9、Bootstrap介绍及样式

来源：互联网发布：在哪买淘宝号编辑：程序博客网时间：2024/05/22 09:01

Bootstrap简介

1、什么是Bootstrap？

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的BreakingNews都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。（源自百度百科）

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

1. 响应式设计；

2. 移动设备优先

3. 使用Bootstrap必须要加载jquery

个人观点：其实Bootstrap给人的感觉就是首先它省略了“格式化”网页的步骤，同时添加了一些不需要js等其他辅助的功能。

3、Bootstrap基本模板

<!DOCTYPE html>

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1">

<linkhref="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

<scriptsrc="./bootstrap/js/jquery.min.js"></script>

<scriptsrc="./bootstrap/js/bootstrap.min.js"></script>

<title>Bootstrap</title>

</head>

<body>

</body>

</html>

3.1、HTML5文档类型定义

Bootstrap的文档是基于HTML5，因此，要用HTML5的文档类型定义（DTD）

<!DOCTYPE html>

3.2、字符集设置

3.3、移动设备优先

3.4、引入CSS和JS文件

<linkhref="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

<scriptsrc="./bootstrap/js/jquery.min.js"></script>

<scriptsrc="./bootstrap/js/bootstrap.min.js"></script>

4、CSS全局样式

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

.container固定宽度并且具有响应式。

.container-fluid自由宽度（100%宽度）。

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

标题样式重写，基本上做到了兼容性

4.3、行内文本样式：

<em>斜体

<i>斜体

<b>加粗

<strong>粗体

<del>删除线

4.4、文本对齐样式：

.text-left：文本左对齐

.text-center:文本居中

.text-right:文本右对齐

.text-justify：文本两端对齐

4.5、列表样式：

4.5.1、.list-unstyled（无符号）：去掉前面的符号。

<li>Javascript</li>

</ul>

4.5.2、list-inline（行内块）

<li>Javascript</li>

</ul>

5、表格样式

5.1、.table：表格全局样式（少量padding和水平方向分割线）

<divclass="container-fluid" style="background-color: #fff;padding:50px;">

<tableclass="table">

</tr>

</table>

</div>

</body>

5.2、.table-striped：有条纹的背景色行（隔行变色）

<divclass="container-fluid" style="background-color: #fff;padding:50px;">

</tr>

</table>

</div>

</body>

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

<divclass="container-fluid" style="background-color: #fff;padding:50px;">

<table class="table table-bordered

</tr>

</table>

</div>

</body>

5.4、.table-hover：鼠标悬停效果（放上变色，离开恢复）

<divclass="container-fluid" style="background-color: #fff;padding:50px;">

</tr>

</table>

</div>

</body>

5.5、.table-condensed：紧凑的表格（单元格内补会减半）

<divclass="container-fluid" style="background-color: #fff;padding:50px;">

</tr>

</table>

</div>

</body>

5.6、行或单元格背景色：

.active：当前样式

.success：

.info：

.warning

.danger

</tr>

</tr>

</tr>

注意：只能给<tr>或<td>添加此类样式。

5.7、响应式表格：

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

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

<divclass="container-fluid table-responsive"style="background-color: #fff;padding: 50px;">

</tr>

</tr>

</table>

</div>

6、表单样式：

6.1、.form-group表单组样式：

将<lable>和表单元素包含其中，可以获得更好的排列

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

<form>

</div>

</form>

placeholder属性：描述：给<input>添加提示信息

6.3、.form-inline内联表单样式（用于<form>元素）：

可以使元素一行排列

<formclass="form-inline">

</div>

</form>

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

<formclass="form-inline">

</div>

</form>

6.5、.checkbox：复选框样式；

6.6、.radio：单选框样式

6.7、.disabled：可以禁用单选框和或复选框的文本；

6.8、.form-horizontal：水平排列的表单（用于form元素）

6.9、.checkbox-inline：控制多个复选框元素在同一行显示

<formclass="form-horizontal">

<labelclass="checkbox-inline"><input type="checkbox"value="paintingl">画画</label>

<labelclass="checkbox-inline"><input type="checkbox"value="PE">体育</label>

<labelclass="checkbox-inline"><input type="checkbox"value="sing">唱歌</label>

</form>

6.10、radio-inline：控制多个单选框元素在同一行显示

<formclass="form-horizontal">

<labelclass="radio-inline"><input type="radio"name="edu">小学</label>

<labelclass="radio-inline"><input type="radio"name="edu">初中</label>

<labelclass="radio-inline"><input type="radio"name="edu">高中</label>

<labelclass="radio-inline"><input type="radio"name="edu">大学</label>

</form>

--------------------------------------------------------------------------------------------------------------------

本文均为学习笔记，仅供个人参考。

阅读全文

0 0

9、Bootstrap介绍及样式

Bootstrap简介

1、什么是Bootstrap？

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

3、Bootstrap基本模板

3.1、HTML5文档类型定义

3.2、字符集设置

3.3、 移动设备优先

3.4、 引入CSS和JS文件

4、CSS全局样式

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

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

4.3、行内文本样式：

4.4、文本对齐样式：

4.5、列表样式：

4.5.1、.list-unstyled（无符号）：去掉前面的符号。

4.5.2、list-inline（行内块）

5、表格样式

5.1、.table：表格全局样式（少量padding和水平方向分割线）

5.2、.table-striped：有条纹的背景色行（隔行变色）

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

5.4、.table-hover：鼠标悬停效果（放上变色，离开恢复）

5.5、.table-condensed：紧凑的表格（单元格内补会减半）

5.6、行或单元格背景色：

5.7、响应式表格：

6、表单样式：

6.1、.form-group表单组样式：

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

6.3、.form-inline内联表单样式（用于<form>元素）：

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

6.5、.checkbox：复选框样式；

6.6、.radio：单选框样式

6.7、.disabled：可以禁用单选框和或复选框的文本；

6.8、.form-horizontal：水平排列的表单（用于form元素）

6.9、.checkbox-inline：控制多个复选框元素在同一行显示

6.10、radio-inline：控制多个单选框元素在同一行显示

3.3、移动设备优先

3.4、引入CSS和JS文件