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学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
JavaScript异步操作中串行和并行
Nov 20 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下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
分享ES6的7个实用技巧
2018/01/18 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Django分组聚合查询实例分享
2020/04/29 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
十八大闭幕感言
2014/01/22 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
银行授权委托书格式
2014/10/10 职场文书
党员评议个人总结
2014/10/20 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
刑事附带民事代理词
2015/05/25 职场文书
红色革命电影观后感
2015/06/18 职场文书
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL