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 中的类和闭包
Jan 08 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
原生JS实现层叠轮播图
May 17 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
javaScript中的空值和假值
Dec 18 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
VUE写一个简单的表格实例
Aug 06 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 mssql 时间格式问题
2009/01/13 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python 实现多维数组转向量
2019/11/30 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
项目开发计划书
2014/01/09 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
房屋出售协议书
2014/04/10 职场文书
司法助理专业自荐书
2014/06/13 职场文书
初婚未育证明样本
2014/10/24 职场文书
房产公证书样本
2015/01/23 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
电影建党伟业观后感
2015/06/01 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
Python制作表白爱心合集
2022/01/22 Python
Python中的datetime包与time包包和模块详情
2022/02/28 Python