Bootstrap基础学习
Bootstrap是一个基于栅格结构的前端结构框架（当然也有JS，JQuery）,它的优点是内容框架能够迅速搭建起来，基于媒介查询可以使搭建的页面迅速的适应不同的用户端，无论是手机，平板，还是PC,基本上都能自适应，当然新版本已经开始不支持IE6了，对IE8的支持也很有限，毕竟IE8对HTML5的支持不太好，（说实话，我自己也不喜欢IE6~8,对于我这种初级选手来说，兼容性有时候真费劲，不仅项目上要用，连面试也要用，有没有搞错嘛，遇到了，上网查一下不就行了。发个牢骚，该会的还是得会啊！！！）
闲言碎语不多讲，开始总结自己这段时间BS笔记！
1.在结构内容方面,BS对结构内容的控制基本是有类来控制，比如对结构的控制就是
<divclass="container"> <divclass="row"> <divclass="col-md-4col-xs-6"> 这一块div的类名中，是由col-md-4,col-xs-6这两个类名来控制他的框架宽度；其中col代表是栅格,md代表客户端显示器的宽度为pc中屏，同样的xs则代表客户端显示器为超小屏，也就是手机屏；4，6就代表了栅格的长度，意思就是在中屏显示器下宽度为4个栅格，在手机端宽度为6个栅格，一般情况下把把一整块div最多可以划成12个栅格，所以他的兄弟div在中屏下则是8个栅格！ </div> <divclass="col-md-8text-muted">这一块div的类名中，抛去col-md-8不说，来说说text-muted.这个类则是控制这个div下的内容字体颜色的，当你把BS的css下载到本地后，你在css我文件中搜索text-muted，就会看到他的定义只有颜色，和他在一起的其他类名就分别定义了不同的颜色</div> </div> </div>
2.结构上面说完了，那就说说页面中具体的一些组件，先说说导航吧，原先我们自己制作导航是由一个基本的内联ul组成（以下css在BS中可以实现），
<ulclass="list-inline"> <li>W3cplus</li> <li>Blog</li> <li>CSS3</li> <li>jQuery</li> <li>PHP</li> </ul>
但在BS中，则有nav这个类来实现，但是nav这个类需要和其他类合用才能让页面效果发挥出来，譬如说nav-pills和nav-tabs,如果是垂直导航的话则在类名中加入nav-stacked
<ulclass="navnav-pill"> <li><ahref="##">Home</a></li> <li><ahref="##">CSS3</a></li> <li><ahref="##">Sass</a></li> <li><ahref="##">jQuery</a></li> <li><ahref="##">Responsive</a></li> </ul>
3.说完导航条再来说说下拉菜单，BS中的下拉菜单得依靠它自带的一个js文件来实现，而它本身的js还依靠了JQuery,所以这两个文件是必备的。值得说明的是关于这个下拉菜单代码方面有点复杂，button中的data-toggle="dropdown"必须和外层的div类名相同。
<divclass="dropdown"> <buttonclass="btnbtn-defaultdropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"> 下拉菜单 <spanclass="caret"></span> </button> <ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu1"> <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">下拉菜单项</a></li> <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">下拉菜单项</a></li> <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">下拉菜单项</a></li> <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">下拉菜单项</a></li> </ul> </div>
4.貌似该说说表单了，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。
<formrole="form"> <divclass="form-group"> <labelfor="exampleInputEmail1">邮箱：</label> <inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="请输入您的邮箱地址"> </div> <divclass="form-group"> <labelfor="exampleInputPassword1">密码</label> <inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="请输入您的邮箱密码"> </div> <divclass="checkbox"> <label> <inputtype="checkbox">记住密码 </label> </div> <buttontype="submit"class="btnbtn-default">进入邮箱</button> </form>
以上所述就是本文的全部内容了，希望大家能够喜欢