BootStrapCss(v3)样式基础笔记(简单清晰)

admin管理员组

文章数量:1024966

BootStrapCss(v3)样式基础笔记(简单清晰)

1.为了给段落添加强调文本，则可以添加 class=”lead”，这将得到更大更粗、行高更高的文本，如下面实例所示：

<p class="lead">你好啊</p>

2.<small>（设置文本为父文本大小的 85%）

3.Bootstrap 定义<abbr>元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本） 例如

<abbr title="World Wide Web">WWW</abbr><br>

4. .dl-horizontal 把<dl> 行中的属性与描述并排显示。
.list-inline把<ul><ol>行中的属性与描述并排显示。 例如

<ul class="list-inline"><li>Item 1</li><li>Item 2</li>
</ul>

<dl class="dl-horizontal"><dt>Description</dt><dd>Item 1</dd>
</dl>

5.表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
下列表样式可用于表格中：
.table:为任意<table> 添加基本样式 (只有横向分隔线)(包含大小尺寸等)
.table-striped 在 <tbody>内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在<tbody> 内的任一行启用鼠标悬停状态(颜色改变)
.table-condensed 让表格更加紧凑

下表的类可用于表格的行或者单元格：
.active 将悬停的颜色应用在行或者单元格上 (相当于默认选中)
.success 表示成功的操作 (绿色)
.info 表示信息变化的操作 (浅蓝色)
.warning 表示一个警告的操作 (黄色)
.danger 表示一个危险的操作(红色)

响应式表格：table-responsive
在表格外面套一个<div class="table-responsive"></div>就OK了

6.表单
1：.form-control 可以将 <input>、<textarea> 和 <select> 元素宽度属性为 width: 100%;
.control-label 可以将元素宽度属性为 width: 100%;

.form-group 一般写在表单元素外面，可以获取更好的排列效果，例如

<div class="form-group"><label >Email address</label><input type="email" class="form-control"  placeholder="Email"></div>

2:在元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block (也就是排在一行)
在元素添加 .form-horizontal类可以将 label 标签和控件组水平并排布局(就是独占一行)

3:标签中有时候加了 class=“sr-only” 它就相当于注释！不会显示在页面中

7：按钮
1.class=“btn btn-default” 基本样式 没有颜色
2.class=“btn btn-primary” 首选项 蓝色
3.class=“btn btn-success” 成功 绿色
4.class=“btn btn-info” 一般信息 浅蓝
5.class=“btn btn-warning” 警告 橘黄色
6.class=“btn btn-danger” 危险 红色
7.class=“btn btn-link” 链接
例如：

<button type="button" class="btn btn-default">（默认样式）Default</button>

按钮大小:
.btn-lg、.btn-sm 或 .btn-xs 分别为 大 小 超小按钮
例如：

<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
例如：

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>

8：图片
1.通过为图片添加 .img-responsive 类可以让图片支持响应式布局
注意：如果需要让使用了.img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center

2.图片形状

<img src="..." alt="..." class="img-rounded"> 有四个圆角的照片
<img src="..." alt="..." class="img-circle">   圆形照片
<img src="..." alt="..." class="img-thumbnail"> 带相框

9：辅助类
1.情境文本颜色(也就是给一行文字加颜色)

<p class="text-muted">...</p>  灰白
<p class="text-primary">...</p> 蓝色
<p class="text-success">...</p> 绿色
<p class="text-info">...</p> 浅蓝
<p class="text-warning">...</p> 黄色
<p class="text-danger">...</p> 红色

2.情境背景色

<p class="bg-primary">...</p> 蓝色
<p class="bg-success">...</p> 绿色
<p class="bg-info">...</p> 浅蓝
<p class="bg-warning">...</p> 黄色
<p class="bg-danger">...</p> 红色

3.三角符号：<span class="caret"></span>

10.下面是一些基本样式：

BootStrapCss(v3)样式基础笔记(简单清晰)

1.为了给段落添加强调文本，则可以添加 class=”lead”，这将得到更大更粗、行高更高的文本，如下面实例所示：

<p class="lead">你好啊</p>

2.<small>（设置文本为父文本大小的 85%）

3.Bootstrap 定义<abbr>元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本） 例如

<abbr title="World Wide Web">WWW</abbr><br>

4. .dl-horizontal 把<dl> 行中的属性与描述并排显示。
.list-inline把<ul><ol>行中的属性与描述并排显示。 例如

<ul class="list-inline"><li>Item 1</li><li>Item 2</li>
</ul>

<dl class="dl-horizontal"><dt>Description</dt><dd>Item 1</dd>
</dl>

5.表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
下列表样式可用于表格中：
.table:为任意<table> 添加基本样式 (只有横向分隔线)(包含大小尺寸等)
.table-striped 在 <tbody>内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在<tbody> 内的任一行启用鼠标悬停状态(颜色改变)
.table-condensed 让表格更加紧凑

下表的类可用于表格的行或者单元格：
.active 将悬停的颜色应用在行或者单元格上 (相当于默认选中)
.success 表示成功的操作 (绿色)
.info 表示信息变化的操作 (浅蓝色)
.warning 表示一个警告的操作 (黄色)
.danger 表示一个危险的操作(红色)

响应式表格：table-responsive
在表格外面套一个<div class="table-responsive"></div>就OK了

6.表单
1：.form-control 可以将 <input>、<textarea> 和 <select> 元素宽度属性为 width: 100%;
.control-label 可以将元素宽度属性为 width: 100%;

.form-group 一般写在表单元素外面，可以获取更好的排列效果，例如

<div class="form-group"><label >Email address</label><input type="email" class="form-control"  placeholder="Email"></div>

2:在元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block (也就是排在一行)
在元素添加 .form-horizontal类可以将 label 标签和控件组水平并排布局(就是独占一行)

3:标签中有时候加了 class=“sr-only” 它就相当于注释！不会显示在页面中

7：按钮
1.class=“btn btn-default” 基本样式 没有颜色
2.class=“btn btn-primary” 首选项 蓝色
3.class=“btn btn-success” 成功 绿色
4.class=“btn btn-info” 一般信息 浅蓝
5.class=“btn btn-warning” 警告 橘黄色
6.class=“btn btn-danger” 危险 红色
7.class=“btn btn-link” 链接
例如：

<button type="button" class="btn btn-default">（默认样式）Default</button>

按钮大小:
.btn-lg、.btn-sm 或 .btn-xs 分别为 大 小 超小按钮
例如：

<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
例如：

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>

8：图片
1.通过为图片添加 .img-responsive 类可以让图片支持响应式布局
注意：如果需要让使用了.img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center

2.图片形状

<img src="..." alt="..." class="img-rounded"> 有四个圆角的照片
<img src="..." alt="..." class="img-circle">   圆形照片
<img src="..." alt="..." class="img-thumbnail"> 带相框

9：辅助类
1.情境文本颜色(也就是给一行文字加颜色)

<p class="text-muted">...</p>  灰白
<p class="text-primary">...</p> 蓝色
<p class="text-success">...</p> 绿色
<p class="text-info">...</p> 浅蓝
<p class="text-warning">...</p> 黄色
<p class="text-danger">...</p> 红色

2.情境背景色

<p class="bg-primary">...</p> 蓝色
<p class="bg-success">...</p> 绿色
<p class="bg-info">...</p> 浅蓝
<p class="bg-warning">...</p> 黄色
<p class="bg-danger">...</p> 红色

3.三角符号：<span class="caret"></span>

10.下面是一些基本样式：

本文标签： BootStrapCss(v3)样式基础笔记(简单清晰)