欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【Bootstrap基础学习】，下面是详细的讲解！
Bootstrap基础学习
Bootstrap是一个基于栅格结构的前端结构框架（当然也有JS，JQuery）,它的优点是内容框架能够迅速搭建起来，基于媒介查询可以使搭建的页面迅速的适应不同的用户端，无论是手机，平板，还是PC,基本上都能自适应，当然新版本已经开始不支持IE6了，对IE8的支持也很有限，毕竟IE8对HTML5的支持不太好，（说实话，我自己也不喜欢IE6~8,对于我这种初级选手来说，兼容性有时候真费劲，不仅项目上要用，连面试也要用，有没有搞错嘛，遇到了，上网查一下不就行了。发个牢骚，该会的还是得会啊！！！）
闲言碎语不多讲，开始总结自己这段时间BS笔记！
1.在结构内容方面,BS对结构内容的控制基本是有类来控制，比如对结构的控制就是
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-6">
这一块div的类名中，是由col-md-4,col-xs-6这两个类名来控制他的框架宽度；其中col代表是栅格,md代表客户端显示器的宽度为pc中屏，同样的xs则代表客户端显示器为超小屏，也就是手机屏；4，6就代表了栅格的长度，意思就是在中屏显示器下宽度为4个栅格，在手机端宽度为6个栅格 ，一般情况下把把一整块div最多可以划成12个栅格，所以他的兄弟div在中屏下则是8个栅格！
</div>
<div class="col-md-8 text-muted">这一块div的类名中，抛去col-md-8不说，来说说text-muted.这个类则是控制这个div下的内容字体颜色的，当你把BS的css下载到本地后，你在css我文件中搜索text-muted，就会看到他的定义只有颜色，和他在一起的其他类名就分别定义了不同的颜色 </div>
</div>
</div>
2.结构上面说完了，那就说说页面中具体的一些组件，先说说导航吧，原先我们自己制作导航是由一个基本的内联ul组成（以下css在BS中可以实现），
<ul class="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
<ul class="nav nav-pill"> <li><a href="http://www.jb51.net/article/67915.htm##">Home</a></li> <li><a href="http://www.jb51.net/article/67915.htm##">CSS3</a></li> <li><a href="http://www.jb51.net/article/67915.htm##">Sass</a></li> <li><a href="http://www.jb51.net/article/67915.htm##">jQuery</a></li> <li><a href="http://www.jb51.net/article/67915.htm##">Responsive</a></li> </ul>
3.说完导航条再来说说下拉菜单，BS中的下拉菜单得依靠它自带的一个js文件来实现，而它本身的js还依靠了JQuery,所以这两个文件是必备的。值得说明的是关于这个下拉菜单代码方面有点复杂，button中的data-toggle="dropdown"必须和外层的div类名相同。
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://www.jb51.net/article/67915.htm#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://www.jb51.net/article/67915.htm#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://www.jb51.net/article/67915.htm#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://www.jb51.net/article/67915.htm#">下拉菜单项</a></li> </ul> </div>
4.貌似该说说表单了，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱：</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码"> </div> <div class="checkbox"> <label> <input type="checkbox"> 记住密码 </label> </div> <button type="submit" class="btn btn-default">进入邮箱</button> </form>
以上所述就是本文的全部内容了，希望大家能够喜欢
关于Bootstrap基础学习的用户互动如下：
相关问题：小白学习前端需要具备哪些基础知识？
答：现在最快的方法是学习使用现在流程的各种前端框架，比如bootstrap，另外jquery一定要会，再学学html5和css3的基础知识，就差不多了。其它就是经验积累了。 >>详细
相关问题：自学Java 怎么入门
答：java的知识结构体系多而杂, 需要学习的知识结构包括...前端框架 easyUI bootstrap 自学花费的时间很长普遍要...找一本入门的书看看就好了,基础知识都讲的差不多 ... >>详细
相关问题：学习bootstrap需要先掌握什么？
答：一定的jquery基础（jquery是当前很热门的一个js框架）。bootstrap的组件（如下拉按钮）需要他的支持。 一定的css基矗 另外，bootstrap框架加速开发很有用，但是用多了，会让你对css的掌握能力降低。毕竟他是一套比较完整的css框架，你无需自己去... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【ajax】用js来解决ajax读取页面乱码-页面乱码
- 【addEventListener】addEventListener和attachEv
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【AngularJS】AngularJS语法详解-语法
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-