bootstrap使用说明

作者: 麦壳儿UIandFE2 | 来源:发表于2017-01-09 23:17 被阅读399次

序

简称：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>

第二个是用于少数人想进行二次开发的，这个都是开源的嘛，你想帮忙随时欢迎的。

版本选择上

官网提供3个版本。

Bootstrap2中文文档--用于兼容比较老的浏览器，或是公司里的老项目使用。
Bootstrap3中文文档--稳定的最新版
Bootstrap 4.0 预览--待测试的最新版，不建议使用

文件引入方式
本地引入肯定是最稳当的了，但是bs官网提供了CSDN加速服务，也就是你引用线上的速度依然很快，理解秒加载吧，这种加速会优先选择离你最近的节点（服务器）去拿资源。

ps:CSDN加速服务;把文件放在各处的服务器上，访问时会优先加载离你最近的服务器。不够专业，自行Google。呵呵；所以网站要是想加速处理压缩代码图片还可以采用csdn加速的方式哟。
官网其他资源

这里还提供了其他的技术的API使用说明，相关文档等。

Less 教程
jQuery API
网站实例
收录的牛逼框架---基本都是托管在github上的开源项目；bs都提供免费的 CDN 服务(收录了 2722 个开源项目)

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

bs相关资源

在百度谷歌里搜索bootstrap关键字能出现千万条的资源，可见其成熟度，丰富度，其实就是公认的强大，你值得拥有。

介绍摘要

接下来从以下几个方面进行：
html----bs的基本结构
css----bs的样式部分
布局组件----bs的js
插件----bs的扩展功能

也就是官网上对应的：
起步、
全局CSS样式、
组件、
JavaScript 插件

HTML：最基本的bs骨架

<pre>`<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>麦壳</title>
```

<link href="css/bootstrap.min.css" rel="stylesheet">
```
</head>
<body>
<h1>你好，世界！</h1>
```
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
```
</body>
</html>
`</pre>

这里对官网的做了略微的删改；要对上边解释两点：

1.这句代码的意思是运行在IE浏览器上时优先用最高模式进行解析渲染，而不会出现跳转到怪异模式下运行而产生的视觉误差。

<pre><meta http-equiv="X-UA-Compatible" content="IE=edge"></pre>

2.这句代码的意思是约束视口的，bs是主打移动端的肯定要对视口进行处理下，当然PC端没有这个概念，你要是用在pc端，这句话毫无影响的。体现了Bootstrap 是移动设备优先的

<pre><meta name="viewport" content="width=device-width, initial-scale=1"></pre>

深入了解 Bootstrap html结构的关键部分，会让 web 开发变得如鱼得水

CSS

设置全局 CSS 样式； HTML 元素通过加对应的class 得到增强效果；配合栅格系统会有响应式的布局。你马上可以无敌了。

先越过较难的bs的栅格系统，从简单常用实用的几处bs组件讲起。

1. 表格

最基本的表格
<table class="table">
条纹表格--隔行变色
<table class="table table-striped">
带边框的表格
<table class="table table-bordered">
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover">

通过给相应类名得到对应的默认样式（少量的内补（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前进的动力--------------------------------------