Bootstrap开发

一、BootStrap开发工具

　　任意前端工具

　　专门Bootstrap工具：Jetstrap（下载地址：jetstrap.com）

二、官网：

　　www.bootcss.com（“下载Bootstrap”，解压后是：css、fonts、js三个文件）

三、网页开发：

　　引入样式：<link rel="stylesheet" href="dist/css/bootstrap.min.css"/>

　　引入jquery文件和bootstrap的js：（jquery须要引入1.9.1更高版本）

　　　　<script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>

　　　　<script src="dist/js/bootstrap.min.js" type="text/javascript"></script>

四、Bootstrap中的全局样式

　　基本HTML元素均可以使用class设置样式并获得加强效果

　　①、样式

　　标题（h1~h6 / .h1~.h6）

　　　　<span  class="h1">标题</span>

　　副标题（small）

　　　　<small></small>

　　②、文本

　　　段落（p）

　　③、表格

　　　<table class="table"></table>

　　　<table class="table  table-striped"></table>　　(增长实体线)

　　　<table class="table  table-striped  table-hover"></table>　　(鼠标移动高亮)

　　④、表单

　　　<div  class="form-group">

　　　    <input  class="form-control"   type="text"  placeholder="这是输入框" />

　　　</div>

　　　　水平排列：<div  class="form-inline">

　　　　消失：<laber  class="sr-only">

　　⑤、按钮

　　　　<button  class="btn  btn-default">按钮</button>

　　　　<button  class="btn  btn-success">按钮</button>

　　　　<button  class="btn  btn-primary">按钮</button>

　　　　<button  class="btn  btn-info">按钮</button>

　　　　<button  class="btn  btn-warning">按钮</button>

　　　　<button  class="btn  btn-danger">按钮</button>

　　　　<button  class="btn  btn-link">按钮</button>

　　　　<button  class="btn  btn-default  btn-lg">按钮</button>　　控制大小

　　⑥、图片及辅助类

　　　　<img  class="img-rounded">　　圆角

　　　　<img  class="img-circle">　　　　圆形

　　　　<img  class="img-trumbnail">　　带边框圆角

五、Bootstrap渐进

　　--开发响应式页面　　　　Viewport

 

　　　　<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

　　--利用栅格布局（栅格系统）适配不一样硬件

　　　　*{

　　　　　　padding：0；

　　　　　　margin：0；

　　　　}

　　　　@media  screen  and(max-width:900px)  and  (min-width:500px){　　　　// 当屏幕范围操控在500，900px时

　　　　　　.text{

　　　　　　　　width:100%;

　　　　　　　　hieght:100px;

　　　　　　　　background:blue;

　　　　　　}

　　　　}

　　　　<div  class="text  col-lg-3  col-md-4  col-sm-6  col-xs-12  col-lg-offset-3  col-md-offset-4"></div>　　　//  Bootstrap中的适应屏幕的类

　　--单位

　　　　px、em、rem

　　--字体图标（front文件夹）

　　　　引用后

　　　　<style>

　　　　　　.glyphicon-asterisk{

　　　　　　　　color：green;

　　　　　　　　font-size：100px;

　　　　　　}

　　　　</style>

　　　　<span  class="glyphicon  glyphicon-asterisk"></span>

六、Bootstrap中的组件

　　①、怪异属性（盲文网站）

　　　　role

　　　　aria-label

　　　　tabIndex

　　　　data-

　　②、字体图标

　　③、下拉菜单

　　　　

　　　　data-toggle="dropdown"绑定事件

　　④、控件组

　　　　input-group　　表示控件组

　　　　input-group-addon　　可放置额外内容及图标

　　　　

　　⑤、导航

　　　　一、以一个带有class.nav的无序列表开始

　　　　二、nav-tabs　　表明可切换的导航

　　　　三、nav-pills　　表明胶囊导航

　　　　四、nav-justified　　使导航垂直

　　　　

　　⑥、分页

 　　　　一、pagination　　在父元素中添加表示分页

　　　　二、pager　　放置在翻页区域

　　　　三、previous　　把连接向左对齐

　　　　四、next　　　　把连接向右对齐

　　　　<nav>

　　　　　　　

　　　　　　　

　　　　　　　　　　　</a>

　　　　　　　　　</li>

　　　　　　　</ul>

　　　　</nav>

　　　　结果：

　　⑦、进度条

　　　　一、progress　　表示进度条

　　　　二、经过状态类改变进度条的颜色

　　　　三、progress-bar-striped　　使进度条颜色渐变

　　　　

　　⑧、列表

　　　　一、list-group　　表明列表组

　　　　二、badge　　表明状态数

　　　　三、active　　表明选中状态

　　　　

　　⑨、面板

　　　　一、panel　　面板

　　　　二、panel-body　　表明面板内容

　　　　三、panel-footer　　表明面板的注脚

　　　　

七、Bootstrap中的插件

　　一、Bootstrap插件依赖Bootstrap.js

　　二、Bootstrap.js基于JQuery

　　①、data属性

　　　　一、经过data属性控制页面交互

　　　　二、$(document).off('.data-api')解除属性绑定

　　　　data-toggle="class"　　指定绑定标签的class

　　　　data-target="#id"　　　指定绑定标签的id