Bootstrap简介及基础使用
一、简介
Bootstrap是有Twitter公司的两名前端工程师研发的。
是一套基于HTML / CSS / JS的前端开源框架。
是一套可以快速构建 移动端 以及 PC端响应式网页的前端框架。
注：1. 不同于jquery脚本库，Bootstrap更像是一个样式的框架。它集成了各种各样的样式，选择器等等。
如果想给网页元素添加效果或修改样式，只需要按照Bootstrap规定，给元素添加class即可。
2. HTML 5 响应式网页指页面的设计与开发应当根据用户行为以及设备环境，包括系统平台、屏幕尺寸、屏幕定向等进行相应的响应和调整。
如在制作安卓或ios程序时，可以使用H5官方提供的软件模板。如淘宝京东使用的webview技术，其本身是类似于浏览器的定制视图，只需要加载html，无需再开发一个软件，从而减少成本(示例https://h5.m.taobao.com)。
但此法的弊端是可以不断更新网页内容来逃避审核，所以ios程序规定不允许这样开发，但安卓尚未统一标准，能安装使用即可。
二、使用步骤
1. 下载框架文件 www.bootcss.com
点击中文文档 -- 下载Bootstrp -- 用于生产环境的Bootstrap或复制BootCDN
2. 解压框架文件
- fonts文件夹 : 字体文件
- css 文件夹 : 样式文件
- js 文件夹 : 脚本文件
3. 将解压的三个文件夹，复制到项目的WebContent目录下
4. 引入jquery.js文件
5. 引入BootStrap的js文件以及css文件
- js文件
<script type=""text/javascript src="js/bootstrap.min.js"></script>
- css文件 :
<link rel="stylesheet" href="css/bootstrap.css">
6. 完毕
注：1. bootstrap.min.css有一些问题，不能引入。
2. js是脚本使用<script>，css是样式使用<link>。
三、默认样式
因为不同浏览器的样式并不一致，Bootstrap为了风格统一，修改了浏览器很多默认的样式，提供了一些常规设计好的页面排版的样式供开发者使用。
如body主体、文本大小、段落标题间距等等。
1. 页面主体 - body四边不再有外边距
- 字体大小font-size设置为14px，字体颜色为#333深灰色
- 行高line-height设置为20px
- 段落元素<p>取消上边距，下边距等于1/2行高即10px。class设为lead段落突出。
2. 标题样式 - h1~h6字体颜色、字体样式、行高均被固定，还支持普通内联元素定义，即class="h1~h6"来实现标题的功能。
3. 内联文本元素 - <mark>突出显示部分文本
- <del>删除的文本
- <s>无用的文本
- <ins> 插入的文本
- <u> 下划线文本
- <small>标准字号的85%
- <strong>加粗700
- <em>倾斜
四、常用class值(样式)
在Bootstrap中，一个class就是一组样式。
1. 文本对齐方式
class :
- text-left : 居左
- text-center : 居中
- text-right : 居右
- text-justify : 两端对齐兼容差
- text-nowrap : 不换行
2. 列表样式
用于修改ol/ul标签中的li标签。
class :
- list-unstyled : 取消列表的前置文字 以及 左内边距
- list-inline : 所有的li标签横向排列，并取消前置的文字和图标
3. 代码块样式
内联代码：
<code>内联代码文字</code>
模拟用户输入的样式(黑底白色文字)：
<kbd>用于提示输入的文字</kbd>
原样显示代码块：
<pre>
带有浅灰色背景的块元素，且内容会原样显示
</pre>
bootstrap代码块：
<div class="well">
带有浅灰色背景的块元素，且内边距很大
</div>
注：原样显示指不进行空白字符的解析，原样输出。
4. 前景色与后景色
前景色即文本颜色，后景色即背景颜色。
前景色
class :
- text-muted : 柔和灰
- text-success : 成功绿
- text-info : 信息蓝
- text-primary : 主要蓝(深)
- text-warning : 警告黄
- text-danger : 危险红
后景色
class :
- bg-success : 成功绿
- bg-info : 信息蓝
- bg-primary : 主要蓝
- bg-warning : 警告黄
- bg-danger : 危险红
注：在使用后景色时，有些后景色的样式，会自动修改前景色。
如果想自定义修改颜色，可以使用优先级覆盖的方法，比如写在style属性中，或赋予绝对覆盖样式等。
5. 表格样式
基本表格样式
class : table
条纹表格样式
指多个tr之间背景颜色不同。
class : table table-striped
边框表格样式
class : table table-bordered
悬停表格样式
class : table table-hover
单独指定tr的样式(背景颜色)
class :
- active : 激活透明灰
- success : 成功绿
- info : 信息蓝
- warning : 警告黄
- danger : 危险红
- sr-only : 隐藏不显示
6. 文字图标
图标不再是图片，而是计算机能识别的编码映射的文字。常结合标签使用。
下列图片，是部分文字图标的class值的描述。
Bootstrap组件地址：https://v3.bootcss.com/components/
使用方式：
1. 编写span标签
2. 给span标签添加class即可
3. 如果想调整其它样式，需要通过调整文字的样式来调整
7. 按钮样式
Bootstrap提供了一些扁平化的按钮样式。
按钮颜色样式
class:
- btn : 基本按钮效果
- btn btn-default : 默认按钮效果
- btn btn-success : 成功绿按钮
- btn btn-info : 信息蓝按钮
- btn btn-primary : 主要蓝按钮
- btn btn-warning : 警告黄按钮
- btn btn-danger : 危险红按钮
- btn btn-link : 超链接样式
使用方式:
上述class值可以使用到四种元素上:
1. span (推荐,普通内联元素,没有自己的脚本样式)
2. button (置于form时默认submit操作)
3. input
4. a (自带选中点击样式)
按钮尺寸样式
class:
- btn-lg : 大按钮
- btn-sm : 小按钮
- btn-xs : 小小按钮
- btn-block : 块按钮，独占一行，常用于手机页面
按钮激活与禁用样式
class:
- active : 激活效果(被点击的样式)
- disabled : 禁用样式
8. 表单样式(输入框)
通过Bootstrap给表单的输入框添加样式时，input标签必须指定type值，哪怕值为text，也必须显示的指定。(已更新)
块级输入框
input标签 - class : form-control
内联输入框(响应式)
class :
1. form标签 - class = form-inline
2. input标签 - class = form-control
输入框尺寸
class :
- input-lg : 大输入框
- input-sm : 小输入框
五、响应式
1. 前置条件
设置<meta>标签
使用响应式时需要设置\<meta>标签。
<meta>标签的作用
1. charset用于通知浏览器网页编码。
<meta charset="UTF-8">
网页编码表类似于字典，当遇到不同的二进制会按照编码表规则显示不同的文字，除英文字母外。英文字母的对应规则是统一的，因为英文字母属于第一套编码表，其它编码表是在它基础上续写的，所以英文不会乱码。常见的编码表有UTF-8，GBK等。
2. 通知网络中网页的关键字
<meta name="keywords",content="关键字";>
3. 添加网页描述
name="description",content="网页描述";
4. 设置视图为移动设备优先(响应式必加)
<meta name="viewport" content="width=device-width,
initial-scale=1,maximum-scale=1">
或
<meta name="viewport" content="width=device-width,
initial-scale=1,maximum-scale=1,user-scalable=no">
注: 1.content是一个键值对，键与值之间是等号，多个键值对之间逗号隔开。
2.user-scalable=no表示用户不可手动缩放。
栅格容器
使用栅格系统需要一个父div元素，称为栅格容器，用来调整栅格内网页元素在屏幕中的占比。主要包括两种：
-
固定宽度栅格容器
12份栅格的总宽度在网页中只有四五个变化值，当介于相近的两值时可能不会发生变化。如宽度在800-900之间，可能占比和800或900相同。
<div class="container"></div> -
自适应占用屏幕宽度100%的栅格容器
无论何时，栅格容器都占屏幕的100%，并随着屏幕的变化而变化。
<div class="container-fluid"></div>
栅格行
在Bootstrap中，栅格容器还需要添加一个栅格行元素。元素为div，class值为row。
以固定宽度栅格容器为例:
<div class="container"> --- 固定宽度栅格容器
<div class="row"></div> --- 栅格行
</div>
在一个栅格行中，一行被分为12等份，栅格行中的子元素可以调整自身占用的份数，当超出12份后，自动换行。
一个栅格容器，可以包含多个栅格行元素，多个栅格行元素，一定是换行分开的。
2. 栅格系统
简介
指的是Bootstrap所提供的的一套用于响应式以及移动设备优先的流式栅格布局。
栅格是一套响应式的百分比，它将一排等分了12份，我们可以通过栅格指定元素在什么样的屏幕下占百分之多少，不同屏幕的百分比可以有不同的设定。
注：流式布局指从左至右排列，一行排满，顺序换行，下一行继续排。如网页中行内元素和行内块元素。
流式栅格布局指由多个格组成的布局，格子一行排满，换行下一行继续排。
屏幕尺寸与类前缀
| 屏幕尺寸 | 固定栅格容器的宽度 | 调整栅格份数的类前缀 |
|---|---|---|
| <768px 【超小屏幕】(小屏幕手机) | auto | col-xs-数值 |
| 大于等于768px 小于992px 【小屏幕】(手机) | 750px | col-sm-数值 |
| 大于等于992px 小于1200px 【中等屏幕】(平板) | 970px | col-md-数值 |
| ≥1200px 【大屏幕】(电脑) | 1170px | col-lg-数值 |
注：1.常见的四种屏幕是手机、平板、电脑和电视。
一种屏幕规格下，有12种份数的class，故一共有48个class控制元素在四种屏幕的尺寸下显示不同的效果。
2.类前缀可以加在div上，也可以加在div里的元素上(如img)。如果只指定元素class为col-xs-12，则表示该元素在超小屏幕及以上，都占满12份。
3.上述类前缀可同时在class中指定。
栅格嵌套问题
栅格行中的每一个占用栅格份数的子元素，都可以作为新的栅格容器来使用。
栅格中的图片溢出问题
因为栅格的格，被指定了固定的宽度，如果图片内容过大，会导致内容溢出，且因为栅格系统是响应式的流式布局，极易发生溢出问题。
当有图片溢出时，不建议使用剪切和滚动条的形式，常通过手动调整图片的宽度来解决，比如设置图片宽度为100%。在栅格系统中也是一样。溢出父元素的内容是不占网页空间的，溢出元素也是按照父元素宽高计算。
Bootstrap中带有解决图片溢出的class，但建议手动来调整。
- 解决方案1:给图片元素指定固定的百分比宽度。
<img style="width:100%">
- 解决方案2:使用栅格嵌套，给图片元素指定占用栅格的份数。
<img class="col-xs-12">
- 解决方案3:给图片元素的父元素div，添加class=“thumbnail”。此法会自动给图片加边框，可能会破坏布局效果。(不推荐)
<div class="thumbnail">
栅格系统其它方法
还可以控制栅格的移动，调整栅格的偏移等。
可以去Bootstrap中文网【组件】下查找相应API。
3. 显示与隐藏
| class值 | <768px 【超小屏幕】(小屏幕手机) | 大于等于768px 小于992px 【小屏幕】(手机) | 大于等于992px 小于1200px 【中等屏幕】(平板) | ≥1200px 【大屏幕】(电脑) |
|---|---|---|---|---|
| visible-xs-参数 | 可见 | 隐藏 | 隐藏 | 隐藏 |
| visible-sm-参数 | 隐藏 | 可见 | 隐藏 | 隐藏 |
| visible-md-参数 | 隐藏 | 隐藏 | 可见 | 隐藏 |
| visible-lg-参数 | 隐藏 | 隐藏 | 隐藏 | 可见 |
| hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
上述的class值中的参数: inline / inline-block / block。指元素在显示时，以什么样的元素类型显示。
inline : 无法调整宽高。
inline-block : 元素可以有自己的宽高，在一行内是从左至右排列的。
block : 元素横向占一行。
六、导航
1. 基本导航栏
步骤：
- 编写ul标签,class=“nav”;
- ul标签中编写一个个的li;
- 每一个li的内容就是一个导航项,li内容必须被超链接包含.
注:三种超链接样式
1.<a href="javascript:void(0)"></a>
系统提供的void函数,返回值是0,样式是超链接,但点击是没有效果的。
2.<a href="#"></a>
有锚点跳至锚点,没有时跳转至当前网页顶部,网址后会出现#,网页会刷新。
3.<a></a>
不指定链接地址的超链接,是一段纯文字。如果引入Bootstrap,也会有超链接样式,悬浮时是光标不是小手。
2. 横向导航栏
步骤：
- 编写ul标签,class=“nav nav-tabs”;
- ul标签中编写一个个的li;
- 每一个li的内容就是一个导航项,li内容必须被超链接包含.
3. 内容切换导航
指点击导航时，网页整体的内容有所变化。
步骤:
- 创建一个基本导航栏;
- 在导航栏外，添加元素div,并指定div的class值为tab-content;
- .tab-content(指class为tab-content的元素)中包含一个个的子div,每一个子div与一个导航项绑定;
- 这些div必须有id属性,class=“tab-pane fade”,默认显示的子div设置class=“tab-pane fade in active”;
- 修改导航栏中的每一个超链接,添加属性data-toggle=“tab"和href=”#子div的id";
- 给默认选中的li设置class=“active”.
注:
1.导航栏里li的数量=.tab-content中子div的数量;
2.默认显示的子div与默认选中的li激活状态保持一致.
4. 导航条
使用步骤
- 编写一个nav标签，指定class=“navbar navbar-default”;
- 向nav标签中，加入子标签ul，指定ul的class=“nav navbar-nav”;
- 向ul中，加入一个个的子li，li中包含的是超链接。
相关设置
1.添加导航栏中的标题
在nav标签中，在ul前nav后前置一个子div，class=“navbar-header”；div嵌套span标签，class=“navbar-brand”，span的内容就是标题。
<div class="navbar-header"><span class="navbar-brand">标题</span></div>
2.添加表单
步骤：
a. 在nav标签中，编写一个form标签，class=“navbar-form”；
b. 正常编写输入组件即可。
注：1. <span>标签实现表单提交的两种方式
a. <span onclick="this.parentNode"></span>
b. <span onclick="$(this).parent().submit()"></span>
2. 提交input输入框的内容需要指定name属性。
如百度的搜索服务器地址为https://www.baidu.com/s设为form的action，百度接收数据时需要的键值对的键为wd，即<input name="wd">.
腾讯视频的服务器地址为https://v.qq.com/x/search/设为form的action，腾讯视频接收数据时需要的键值对的键为q，即<input name="q">.
3.控制导航中内容的显示位置
-左:class="navbar-left"
-右:class="navbar-right"
4.将导航条中所有内容，放入栅格容器中，来实现内容左右的边距。
5.向导航条中加入普通文字
文字通过span标签来添加。
<span class="navbar-text">文字内容</span>
注：网页的执行原理是把网页源代码下载到浏览器最终执行的，即把html文件从服务器里下载到浏览器缓存起来最终执行的。
固定导航条与静态导航条
1.固定导航条
与普通导航条的唯一区别是取消了导航条的圆角。
固定在顶部 - nav标签添加class:navbar-fixed-top
固定在底部 - nav标签添加class:navbar-fixed-bottom
2.静态导航条
只能在顶部显示。也取消了普通导航条的圆角。
nav标签添加class=“navbar-static-top”
注：没有navbar-static-bottom这一属性。
特别鸣谢：@李伟杰
参考文献：Bootstrap中文网
注：以上说明均为个人经验，如有错误欢迎指出，笔者虚心改正。如果有更好的方法或者别的问题，也欢迎大家扫文末的微信平台二维码，共同交流，共同进步。
2935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
