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 相关文章推荐
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
浅谈js中变量初始化
Feb 03 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
vue构建单页面应用实战
Apr 10 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
Vue组件跨层级获取组件操作
Jul 27 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教程 预定义变量
2009/10/23 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
php身份证号码检查类实例
2015/06/18 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
最新个人职业生涯规划书
2014/01/22 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
监察建议书范文
2014/03/12 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
农村门前三包责任书
2014/07/25 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2014年教研室工作总结
2014/12/06 职场文书
财政局长个人总结
2015/03/04 职场文书
医院病假条怎么写
2015/08/17 职场文书
学生会任命书范本
2015/09/21 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL