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与flash交互通信基础教程
Aug 07 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
vue实现分页栏效果
Jun 28 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
Gird事件机制初级读本
2007/03/10 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
JS实现留言板功能
2017/06/17 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python如何获取服务器硬件信息
2017/05/11 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
新年团拜会主持词
2014/04/02 职场文书
个人投资计划书
2014/05/01 职场文书
美容院合作经营协议书
2014/10/10 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书