主要内容
按钮(Button)
bootstrap可以为<a>
、<button>
或<input>
元素添加按钮类以使用按钮组件,为了更好地解决跨浏览器显示问题,最好统一使用<button>
元素。
bootstrap按钮依赖.btn
样式,通过为button元素设置该样式即可创建一个简单的按钮。
bootstrap预定义了一系列的按钮样式,主要体现在颜色的不同。它们分别是:
- btn-default:默认颜色
- btn-primary: 蓝色
- btn-info:浅蓝色
- btn-success: 绿色
- btn-warning: 黄色
- bt-danger: 红色
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row"> <button role="button" class="btn btn-default">Button</button> <button role="button" class="btn btn-primary">primary</button> <button role="button" class="btn btn-info">info</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> </div> |
样式如下:
bootstrap还提供了链接样式的按钮,使用btn-link
标识
1 |
<button role="button" class="btn btn-link">link button</button> |
按钮尺寸
bootstrap的按钮有4中尺寸,分别是大(large)、默认(default)、小(small)、超小(extra small)
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="row"> <!-- 超小按钮 --> <button role="button" class="btn btn-info btn-xs">info</button> <!-- 小按钮 --> <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> </div> |
显示如下:
按钮状态
按钮可分为三种状态,它们是静止、激活、禁用。静止状态指按钮未被激活和禁用。这里主要讨论激活和禁用状态。
激活状态(按钮被按下):
通过添加.active
样式把按钮设置为激活状态
通过设置元素属性disabled值为disabled把按钮设置为禁用状态
1 2 3 4 5 6 7 |
<div class="container"> <div class="row"> <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> </div> |
效果如下:
另外,如果按钮是使用<a>
标签创建的,不能使用disabled
属性,而是使用.disabled
css样式。
1 |
<a href="#" class="btn btn-primary disabled">primary</a> |
按钮组
按钮组用于把一组按钮放到同一行里。把.gtn-group
样式应用到div上创建按钮组。按钮组里面的按钮互相之间没有补白(padding)
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="row"> <div class="btn-group" role="group"> <button role="button" class="btn btn-default">Button</button> <button role="button" class="btn btn-primary">primary</button> <button role="button" class="btn btn-info">info</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> </div> </div> |
效果如下:
按钮组尺寸
按钮组同样也有4种尺寸,超小、小、默认、大。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <div class="row"> <div class="btn-toolbar" role="toolbar"> <div class="btn-group btn-group-sm" role="group"> <button class="btn btn-default">open</button> <button class="btn btn-default">save</button> <button class="btn btn-default">save as...</button> </div> <div class="btn-group btn-group-lg" role="group"> <button class="btn btn-default">delete</button> <button class="btn btn-default">reset</button> </div> </div> </div> </div> |
效果如下:
按钮工具栏
按钮工具栏可用于包裹按钮组,创建类似应用程序的toolbar样式。按钮工具栏使用.btn-toolbar
标识。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <div class="row"> <div class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button class="btn btn-default">open</button> <button class="btn btn-default">save</button> <button class="btn btn-default">save as...</button> </div> <div class="btn-group" role="group"> <button class="btn btn-default">delete</button> <button class="btn btn-default">reset</button> </div> </div> </div> </div> |
效果如下:
导航条
导航条是网页开发中最有用的组件,导航条的重要性不言而喻。bootstrap按导航条位置划分预定义了三种类型的导航条。
分别是固定在顶部、固定在底部和静止在顶部,对应的css样式分别是:
- navbar-fixed-top 固定在顶部,会跟随页面滚动
- navbar-fixed-bottom
- navbar-static-top 静止在顶部,不会跟随页面滚动
bootstrap中的导航条由两部分组成,品牌商标和真正的导航组件。品牌商标主要用于放置公司的商标或标志性文字。
例如:
上图中红框中的就是品牌图标,绿框就是真正的导航内容
创建最简单的导航条:
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="navbar navbar-default"> <a class="navbar-header navbar-brand" href="#">Brand</a> <ul class="nav navbar-nav"> <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> </div> |
navbar
样式说明该div是一个导航条,而navbar-default
则是创建默认样式的导航条。bootstrap导航条预定义两种样式,除了navbar-default
外还有navbar-inverse
,navbar-inverse
是黑底灰字。
响应式导航条
虽然上面的代码创建了一个完全可用的导航条,但是,当浏览器窗口缩少的时候,该导航条的外观就显得比较丑了。因此,最好是创建一个响应式的导航条。
响应式导航条的行为是:当浏览器窗口缩少到一定程度的时候,导航条内容隐藏到一个可折叠的菜单之中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="navbar-header"> <!-- 添加一个按钮用于小屏幕中展开和折叠导航条 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-item"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="nav-item"> <ul class="nav navbar-nav"> <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> </div> |
注意:响应式导航条需要jquery支持。
导航条中的表单
最常见的需求就是搜索。为form
元素添加.navbar-form
样式就可以获得导航条的表单支持,目的是为了取得较好的显示效果。
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 |
<div class="container"> <div class="navbar navbar-default"> <div class="navbar-header"> <!-- 添加一个按钮用于小屏幕中展开和折叠导航条 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-item"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="nav-item"> <ul class="nav navbar-nav"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div> |
导航条按钮
最常见的需求是登录和注册。导航条按钮使用样式.navbar-btn
标识,好处是应用了该样式的按钮在导航条中会自动垂直居中显示。
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 |
<div class="container"> <div class="navbar navbar-default"> <div class="navbar-header"> <!-- 添加一个按钮用于小屏幕中展开和折叠导航条 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-item"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="nav-item"> <ul class="nav navbar-nav"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> <div class="navbar-right"> <button role="button" class="btn btn-link navbar-btn">注册</button> <button role="button" class="btn btn-link navbar-btn">登录</button> </div> </div> </div> |
导航条文本
把文本包裹在 .navbar-text
中时,为了有正确的行距和颜色,通常使用 <p>
标签。
该文本可应用于已登录提醒
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 |
<div class="container"> <div class="navbar navbar-default"> <div class="navbar-header"> <!-- 添加一个按钮用于小屏幕中展开和折叠导航条 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-item"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="nav-item"> <ul class="nav navbar-nav"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> <div class="navbar-right"> <p class="navbar-text">你已经登录为 admin</p> </div> </div> </div> </div> |
警告框
警告框使用.alert
样式设置,分别有4种类型的警告框
- alert-success
- alert-info
- alert-warning
- alert-danger
1 2 3 4 |
<div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div> |
可关闭的警告框
使用.alert-dismissible
样式设置可关闭的警告框,此类型的警告框需要另外添加一个关闭按钮。
1 2 3 4 |
<div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> |
警告框中的链接
通过为警告框中的<a>
元素添加.alert-link
样式来设置警告框链接。
1 2 3 |
<div class="alert alert-success" role="alert"> <a href="#" class="alert-link">...</a> </div> |
进度条
进度条通过.progress
样式设置。一个完整的进度条由两个div构成,一个是进度条的边框,一个是进度条本身的进度。进度条边框由.progress
样式设置,实际进度由.progress-bar
设置,而且需要显式设置progress-bar
的进度样式。
1 2 3 4 5 6 7 8 9 |
<div class="container"> <div class="row"> <div class="col-xs-4"> <div class="progress"> <div class="progress-bar" role="progressbar" style="width:30%;"></div> </div> </div> </div> </div> |
带文字的进度条
如果要使用文字显示当前进度,只需要在.progress-bar
中使用文字标出即可。
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container"> <div class="row"> <div class="col-xs-4"> <div class="progress"> <div class="progress-bar" role="progressbar" style="width:30%;"> <span>30%</span> </div> </div> </div> </div> </div> |
进度条的颜色
根据不同的环境,bootstrap可设置4中颜色的进度条。
这四种样式分别对应progress-bar-success、progress-bar-info、progress-bar-warning和progress-bar-danger。
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="row"> <div class="col-xs-4"> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" style="width:30%;"> <span>30%</span> </div> </div> </div> </div> </div> |
条纹效果的进度条
使用.progress-bar-striped
样式设置进度条的条纹效果。
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="row"> <div class="col-xs-4"> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width:30%;"> <span>30%</span> </div> </div> </div> </div> </div> |
进度条动画
使用.active
样式设置进度条的动画效果
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="row"> <div class="col-xs-4"> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width:30%;"> <span>30%</span> </div> </div> </div> </div> </div> |
转载请注明:Pure nonsense » bootstrap常用组件