Bootstrap基础学习


Posted in Javascript onJune 16, 2015

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="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li><a href="##">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="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</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>

以上所述就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
javascript闭包的理解和实例
Aug 12 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
js Date概念详细介绍
Nov 22 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
JavaScript继承的三种方法实例
May 12 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 #Javascript
常用DOM整理
Jun 16 #Javascript
AngularJS学习笔记之ng-options指令
Jun 16 #Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 #Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 #Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 #Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 #Javascript
You might like
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
JS Timing
2007/04/21 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
vue-axios使用详解
2017/05/10 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
python实现数独算法实例
2015/06/09 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Python logging模块用法示例
2018/08/28 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
pygame实现非图片按钮效果
2019/10/29 Python
python微信公众号开发简单流程实现
2020/03/09 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
大学生暑期实践感言
2014/02/26 职场文书
文体活动实施方案
2014/03/27 职场文书
美术指导助理求职信
2014/04/20 职场文书
新课培训心得体会
2014/09/03 职场文书
个人承诺书格式范文
2015/04/29 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
基于Redission的分布式锁实战
2022/08/14 Redis