实用前端我爱编程

bootstrap使用说明

2017-01-09  本文已影响399人  麦壳儿UIandFE2

序

简称：bs.集html、css、js框架于一身，功能更强更全。也就是说结构按照基准模板搭建，类名不要随意删改，对应的js交互控制自然都有了。后台人员较为喜欢使用，因为几乎不用书写css样式，自带的就基本让你满意。前端人建议工作中不要过于依赖，否则呵呵了。

框架的分类：

html、css、js

应用

1 移动端开发；（pc端也可以使用，支持不太好）

2 响应式布局；

依赖

jQuery；
这么一个功能强大完善的代码库，几乎不会选择从原始js层级开发，代码量可想而知，就像我们要做一盘菜就没必要还要掌握菜和配料等是怎么种出来的，只需要到菜市场买回来直接进行就ok了。所以它选择了在jQuery的基础上进行框架的搭建。

其他相关介绍：

1、用于生产环境的 Bootstrap

2、Bootstrap 源码

第一个是常规开发，大部分人会选择这个下载，下载后把里边不需要的文件删除，免得影响开发时多余文件干扰。只保留如下即可：

bootstrap/
├── css/
│ 
│   ├── bootstrap<span class="hljs-class">.min</span><span class="hljs-class">.css</span>
│   ├── 
│   └── bootstrap-theme<span class="hljs-class">.min</span><span class="hljs-class">.css</span><span class="hljs-comment">//是自带的一些主题皮肤</span>
├── js/
│   ├── 
│   └── bootstrap<span class="hljs-class">.min</span><span class="hljs-class">.js</span>
└── fonts<span class="hljs-comment">///和iconfont使用类似</span>
    ├── glyphicons-halflings-regular<span class="hljs-class">.eot</span>
    ├── glyphicons-halflings-regular<span class="hljs-class">.svg</span>
    ├── glyphicons-halflings-regular<span class="hljs-class">.ttf</span>
    └── glyphicons-halflings-regular.woff
`</pre>

第二个是用于少数人想进行二次开发的，这个都是开源的嘛，你想帮忙随时欢迎的。
  1. Bootstrap2中文文档--用于兼容比较老的浏览器，或是公司里的老项目使用。
  2. Bootstrap3中文文档--稳定的最新版
  3. Bootstrap 4.0 预览--待测试的最新版，不建议使用

  1. Less 教程

  2. jQuery API

  3. 网站实例

  4. 收录的牛逼框架---基本都是托管在github上的开源项目；bs都提供免费的 CDN 服务(收录了 2722 个开源项目)

    拿去，不谢！
    http://www.bootcdn.cn/

1. 表格

通过给相应类名得到对应的默认样式（少量的内补（padding）和水平方向的分隔线），一般都不太难看，不符合你的设计，可以单独起个类名进行层叠掉。；这么多类名要想用好用的溜必须记点，知道大概，当然都还是有些规律的，一般有基础类，角色属性加上这两个外出基本样式就出来了，然后加对应的样式类，颜色显隐一些小细节加辅助类；查找官方文档就ok了，编译器里安装bs代码提示插件，这样就不要老去查阅了，浪费时间。

表格有关的状态类

.active 表示给表格添加一个灰色的背景颜色

.success 成功 浅绿色背景

.Info 信息 浅蓝色背景

.warning 警告 浅黄色背景

.danger 危险 浅红色背景

2. 表单

所有设置了 .form-control 类的 表单元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和表单元素包裹在 .form-group 中可以获得最好的排列。
ps:表单元素：<input>、<textarea> 和 <select>

<form role="form">
 <div class="form-group">
 <label for="userEmail">请输入邮箱地址</label>
 <input type="email" class="form-control"id="userEmail" >
 </div>
</form>

注意必须给form 加属性：role="form";表单块写在form-group里；每个表单元素加上.form-control表单控制类，这样就会使用bs自动去- 推算的样式。

在表单身上加一些类名得到相应样式表单：

.form-inline 内联表单（让表单中的元素变成行内块 inline-block）

.form-block表单中默认的类型是块级元素

.form-horizontal 需要配合栅格系统进行使用。

.checkbox 复选框

.radio单选框

.checkbox-inline /

.radio-inline 复选框 / 单选框一行排列

表单有关的状态类、辅助类--颜色、显隐

.has-success 文本和边框颜色变成绿色

.has-warning 深黄色

.has-error 深红色

.sr-only 隐藏

3. 按钮

基类：btn

按钮有关的辅助类--颜色、显隐

.btn-default 透明背景，灰色边框

.btn-primary 蓝色背景

.btn-success

.btn-info

.btn-warning

.btn-danger

.btn-link 只是外观和a标签很相似而已，但是不具备链接跳转的功能

按钮尺寸类

.btn-lg

.btn-sm

.btn-xs （xiao small）

.btn-block 块级按钮（移动端常用的通栏按钮）

.disabled 禁用

例子：

<button type="button" class="btn btn-primary btn-lg">Large button</button>

4. 图片

bs对图片的做个两方面的接口处理，1是响应式即按设备大小缩放图片；2是图片的样式即圆角，边框等。另外还有为开发者提供了占位图，开发初期你完全可以用这种方式先占位。挺好的功能。

响应式图片类

.img-responsive

图片样式类

.img-rounded -- -圆角

.img-circle -----border-radius 50%

.img-thumbnail --边框

.center-block ---水平居中

占位图：

地址之后写上你要占位的大小 宽和高之间用x区分

5. 文本相关----排版

排版：

.text-left 水平左对齐

.text-center 水平居中对齐

.text-right 水平右对齐

.text-justify 自动换行，两端对齐（系统默认）

.text-nowrap 不换行

大小写：

.text-lowercase 小写

.text-uppercase 大写

.text-capitalize 单词首字母大写

列表处理：

.list-inline 列表行内块显示

.list-unstyled 清除默认样式

文本有关的辅助类--颜色、显隐

text-muted 淡灰色

.text-primary

.text-success

.text-info

.text-warning

.text-danger

6. bs辅助类：基本大家都能用

背景

.bg-primary

.bg-success

.bg-info

.bg-warning

.bg-danger

快速浮动(慎用)

.pull-left

.pull-right

.clearfix 清除浮动

.sr-only 隐藏(一般和输入框配合)
.text-hide 隐藏文本
.close 关闭按钮
.caret 箭头（朝下）
.center-block 居中
.show 显示
.hidden 隐藏

栅格系统

栅格：就是把页面划分为不同的行和列；是bs里的特色菜系。用来做响应式处理或是单端布局都是不错的选择，内部自带一些内外边距的算法，所以使用后基本复原你的设计稿；另外网页布局主要是考虑宽度上的适配，所以重点掌握行布局的使用即.row。

最基本的栅格系统布局：

```
<div class="container-fluid">
    <div class="row">
一行内最多能排布12列，多了就滑落到下一行
    </div>
</div>
```

还是拿一个具体的案例讲解下：
假设你要在pc端（大众屏即尺寸在1200px以上）进行布局；一行里里有三个盒子；那么代码如下：

```
  <div class="container">
    <div class="row">
        <div class="col-lg-4">box1</div>
        <div class="col-lg-4">box2</div>
        <div class="col-lg-4">box3</div>
    </div>
  </div>
```

但是要想在pad端显示2个盒子，那么在盒子上再加入对应尺寸类，Bootstrap 的栅格系统检测到当前设大大于768px时则会按照你给的col-smx进行布局。
代码如下：
<div class="container"> <div class="row"> <div class="col-lg-4 col-sm-6">box1</div> <div class="col-lg-4 col-sm-6">box2</div> <div class="col-lg-4 col-sm-6">box3</div> </div> </div>
但是最后一个盒子肯定是要掉下来，根据你个需求是隐藏还是滑落显示。隐藏的话，bs在辅助类里也有对应的类名，加上即可。毕竟网页内容从pc-pad-移动端会删减掉不必要的内容和装饰。

 ```
 <div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-6 col-xs-12">box1</div>
    <div class="col-lg-4 col-sm-6 col-xs-12">box2</div>
    <div class="col-lg-4 col-sm-6 col-xs-12">box3</div>
  </div>
</div>
```

通过下上边可以看出Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。也清楚bs里的响应式是如何实现的了。其实底层也是使用媒体查询。如下：

/ 超小屏幕（手机，小于 768px）
/ 没有任何媒体查询，因为这是默认的（还记得 Bootstrap 是移动设备优先的吗？）

/ 小屏幕（平板，大于等于 768px）
@media (min-width: @screen-sm-min) { ... }

/ 中等屏幕（桌面显示器，大于等于 992px）
@media (min-width: @screen-md-min) { ... }

/ 大屏幕（大桌面显示器，大于等于 1200px）
@media (min-width: @screen-lg-min) { ... }

列嵌套

每一列的子列都会遵循12列布局原则，和父级的列规则无关，
如果要嵌套使用栅格，只需要在列（column）内直接续接行（row），然后再继续接列（column） ，不再需要container

列偏移

1.col-md-offset-* 列偏移的位置
栅格系统的宽度md-XX + offset-XX 如果超过12 会换行显示

列排序

.col-md-push-XX 列偏移的位置（向右） 推
.col-md-pull-XX 列偏移的位置（向左） 拉
注意：每一个偏移的列都是独立存在的，相互之间是不受影响的，同级元素之间不用遵循12列布局的原则，只能左右排序。会有堆叠

关于bs整个框架就说完了，具体实践后续附赠源码一份。

----------------------------------------------------喜欢就动动小手哈。------------------------------------------------------

--------------------------------------你的支持是洒家-麦壳-macrolam前进的动力--------------------------------------

上一篇 下一篇

猜你喜欢

热点阅读