bootstrap常用组件 - Pure nonsense

主要内容

1 按钮（Button）
- 1.1 按钮尺寸
- 1.2 按钮状态
2 按钮组
- 2.1 按钮组尺寸
- 2.2 按钮工具栏
3 导航条
4 警告框
- 4.1 可关闭的警告框
- 4.2 警告框中的链接
5 进度条

按钮（Button）

bootstrap可以为<a>、<button>或<input>元素添加按钮类以使用按钮组件，为了更好地解决跨浏览器显示问题，最好统一使用<button>元素。

bootstrap按钮依赖.btn样式，通过为button元素设置该样式即可创建一个简单的按钮。

bootstrap预定义了一系列的按钮样式，主要体现在颜色的不同。它们分别是：

btn-default：默认颜色
btn-primary：蓝色
btn-info：浅蓝色
btn-success：绿色
btn-warning：黄色
bt-danger：红色

<button role="button" class="btn btn-default">Button</button>

<button role="button" class="btn btn-primary">primary</button>

<button role="button" class="btn btn-danger">danger</button>

<button role="button" class="btn btn-warning">warning</button>

<button role="button" class="btn btn-success">success</button>

</div>

样式如下：

bootstrap还提供了链接样式的按钮，使用btn-link标识

1	<button role="button" class="btn btn-link">link button</button>

按钮尺寸

bootstrap的按钮有4中尺寸，分别是大（large）、默认（default）、小（small）、超小（extra small）

<button role="button" class="btn btn-danger btn-sm">danger</button>

<button role="button" class="btn btn-primary">primary</button>

<button role="button" class="btn btn-warning btn-lg">warning</button>

</div>

显示如下：

按钮状态

按钮可分为三种状态，它们是静止、激活、禁用。静止状态指按钮未被激活和禁用。这里主要讨论激活和禁用状态。

激活状态（按钮被按下）：

通过添加.active样式把按钮设置为激活状态

通过设置元素属性disabled值为disabled把按钮设置为禁用状态

<button role="button" class="btn btn-danger">danger</button>

<button role="button" class="btn btn-warning" disabled="disabled">warning</button>

<button role="button" class="btn btn-success active">success</button>

</div>

效果如下：

另外，如果按钮是使用<a>标签创建的，不能使用disabled属性，而是使用.disabledcss样式。

1	<a href="#" class="btn btn-primary disabled">primary</a>

按钮组

按钮组用于把一组按钮放到同一行里。把.gtn-group样式应用到div上创建按钮组。按钮组里面的按钮互相之间没有补白（padding）

<button role="button" class="btn btn-default">Button</button>

<button role="button" class="btn btn-primary">primary</button>

<button role="button" class="btn btn-danger">danger</button>

<button role="button" class="btn btn-warning">warning</button>

<button role="button" class="btn btn-success">success</button>

</div>

效果如下：

按钮组尺寸

按钮组同样也有4种尺寸，超小、小、默认、大。

</div>

<button class="btn btn-default">delete</button>

<button class="btn btn-default">reset</button>

</div>

效果如下：

按钮工具栏

按钮工具栏可用于包裹按钮组，创建类似应用程序的toolbar样式。按钮工具栏使用.btn-toolbar标识。

</div>

<button class="btn btn-default">delete</button>

<button class="btn btn-default">reset</button>

</div>

效果如下：

导航条

导航条是网页开发中最有用的组件，导航条的重要性不言而喻。bootstrap按导航条位置划分预定义了三种类型的导航条。

分别是固定在顶部、固定在底部和静止在顶部，对应的css样式分别是：

navbar-fixed-top 固定在顶部，会跟随页面滚动
navbar-fixed-bottom
navbar-static-top 静止在顶部，不会跟随页面滚动

bootstrap中的导航条由两部分组成，品牌商标和真正的导航组件。品牌商标主要用于放置公司的商标或标志性文字。

例如：

上图中红框中的就是品牌图标，绿框就是真正的导航内容

创建最简单的导航条：

<a class="navbar-header navbar-brand" href="#">Brand</a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</div>

navbar样式说明该div是一个导航条，而navbar-default则是创建默认样式的导航条。bootstrap导航条预定义两种样式，除了navbar-default外还有navbar-inverse，navbar-inverse是黑底灰字。

响应式导航条

虽然上面的代码创建了一个完全可用的导航条，但是，当浏览器窗口缩少的时候，该导航条的外观就显得比较丑了。因此，最好是创建一个响应式的导航条。

响应式导航条的行为是：当浏览器窗口缩少到一定程度的时候，导航条内容隐藏到一个可折叠的菜单之中。

</button>

<a class="navbar-brand" href="#">Brand</a>

</div>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</div>

注意：响应式导航条需要jquery支持。

导航条中的表单

最常见的需求就是搜索。为form元素添加.navbar-form样式就可以获得导航条的表单支持，目的是为了取得较好的显示效果。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target="#nav-item">

</button>

<a class="navbar-brand" href="#">Brand</a>

</div>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

</ul>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

导航条按钮

最常见的需求是登录和注册。导航条按钮使用样式.navbar-btn标识，好处是应用了该样式的按钮在导航条中会自动垂直居中显示。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target="#nav-item">

</button>

<a class="navbar-brand" href="#">Brand</a>

</div>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

</ul>

</div>

导航条文本

把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签。

该文本可应用于已登录提醒

</button>

<a class="navbar-brand" href="#">Brand</a>

</div>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

</ul>

<p class="navbar-text">你已经登录为 admin</p>

</div>

警告框

警告框使用.alert样式设置，分别有4种类型的警告框

alert-success
alert-info
alert-warning
alert-danger

可关闭的警告框

使用.alert-dismissible样式设置可关闭的警告框，此类型的警告框需要另外添加一个关闭按钮。

<strong>Warning!</strong> Better check yourself, you're not looking too good.

</div>

警告框中的链接

通过为警告框中的<a>元素添加.alert-link样式来设置警告框链接。

</div>

进度条

进度条通过.progress样式设置。一个完整的进度条由两个div构成，一个是进度条的边框，一个是进度条本身的进度。进度条边框由.progress样式设置，实际进度由.progress-bar设置，而且需要显式设置progress-bar的进度样式。

</div>

带文字的进度条

如果要使用文字显示当前进度，只需要在.progress-bar中使用文字标出即可。

</div>

进度条的颜色

根据不同的环境，bootstrap可设置4中颜色的进度条。

这四种样式分别对应progress-bar-success、progress-bar-info、progress-bar-warning和progress-bar-danger。

<div class="progress-bar progress-bar-success" role="progressbar"

style="width:30%;">

</div>

条纹效果的进度条

使用.progress-bar-striped样式设置进度条的条纹效果。

<div class="progress-bar progress-bar-success progress-bar-striped"

role="progressbar" style="width:30%;">

</div>

进度条动画

使用.active样式设置进度条的动画效果

<div class="progress-bar progress-bar-success progress-bar-striped

active" role="progressbar" style="width:30%;">

</div>

转载请注明：Pure nonsense » bootstrap常用组件

一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31