Bootstrap 第一天

Bootstrap第一天

1、什么是Bootstrap？

    Bootstrap是由两位设计开发的。

    Bootstrap主要是前端的框架(HTML、CSS、JS)。

2、为什么使用Bootstrap或者Bootstrap有什么样的特点？

• 学习比较简单，只要有了HTML、CSS、JS基础，就可以学习。
• 响应式布局。
• 移动设备优先。

中文网址：http://v3.bootcss.com/

Bootstrap环境安装

Bootstrap下载

要想使用Bootstrap必须要加载jquery。

Bootstrap基本模板

1、HTML5文档类型定义

    Boostrap的文档是基于HTML5的。因此，要使用HTML5的文档类型定义(DTD)。

    

2、字符集设置

    

3、移动设备优先

4、引入CSS和JS文件

CSS全局样式

1、布局容器类样式：.container 和 .container-fluid

• .container固定宽度并且具有响应式。
• .container-fluid自由宽度(100%宽度)。

2、标题样式：<h1>到<h6>、.h1 ~ .h6

    <h1>……<h6>样式重写了，基本上做到了兼容性。

    

3、行内文本样式：

• <b>：加粗
• <strong>加粗
• <i>：斜体
• <em>斜体，HTML5新标记
• <del>删除线，HTML5新标记。
• <s>删除线

4、文本对齐样式：.text-left、.text-center、.text-right、.text-justify

• .text-left：文本左对齐
• .text-right：右对齐
• .text-center：居中对齐
• .text-justify：两端对齐

5、列表样式：、

• .list-unstyled(无符号)：去掉前面的符号。
• .list-inline(行内块)

    

表格样式

1、.table ：表格全局样式(少量padding和水平方向的分割线)。

2、.table-striped：有条纹的背景色行(隔行变色)

3、.table-bordered：带边框的表格

4、.table-hover：鼠标悬停效果(放上变色、离开恢复)

5、.table-condensed：紧凑的表格(单元格内补会减半)

6、行或单元格背景色：

• .active：当前样式
• .success
• .info
• .warning
• Danger
• 注意：只能给<tr>或<td>添加类样式。

7、响应式表格：

将.table元素包裹在.table-responsive元素内，即可创建响应式表格

    当屏幕宽度小于768px时，表格会出现滚动条。

    当屏幕宽度大于768px时，表格的滚动条自然消失。

 

表单样式

.form-group表单组样式：将<label>和表单元素包含其中，可以获得更好的排列

.form-control表单元素样式：常用于<input>、<textarea>、<select>元素。

Placehoder属性

• 描述：给<input>添加提示信息的。
• 说明：这个属性是HTML5新增加的。

.form-inline内联表单样式(用于form元素)：可以使元素一行排列。

.sr-only：可以用于隐藏元素。