图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span>
标签,并将图标类应用到这个 <span>
标签上。
图标类只能应用在不包含任何文本内容或子元素的元素上。
| <button type="button" class="btn btn-default" aria-label="Left Align"> |
| <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> |
| </button> |
| |
| <button type="button" class="btn btn-default btn-lg"> |
| <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star |
| </button> |
| <div class="alert alert-danger" role="alert"> |
| <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> |
| <span class="sr-only">Error:</span> |
| Enter a valid email address |
| </div> |
| <div class="dropdown"> |
| <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> |
| Dropdown |
| <span class="caret"></span> |
| </button> |
| <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> |
| <li><a href="#">Action</a></li> |
| <li><a href="#">Another action</a></li> |
| <li><a href="#">Something else here</a></li> |
| <li role="separator" class="divider"></li> |
| <li><a href="#">Separated link</a></li> |
| </ul> |
| </div> |
通过为下拉菜单的父元素设置 .dropup
类,可以让菜单向上弹出(默认是向下弹出的)
| <div class="dropup"> ... </div> |
默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu
添加 .dropdown-menu-right
类可以让菜单右对齐。
| <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel"> |
| ... |
| </ul> |
在任何下拉菜单中均可通过添加标题来标明一组动作。
| <ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> |
| ... |
| <li class="dropdown-header">Dropdown header</li> |
| ... |
| </ul> |
为下拉菜单添加一条分割线,用于将多个链接分组
| <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider"> |
| ... |
| <li role="separator" class="divider"></li> |
| ... |
| </ul> |
为下拉菜单中的 <li>
元素添加 .disabled
类,从而禁用相应的菜单项
| <div class="btn-group" role="group" aria-label="..."> |
| <button type="button" class="btn btn-default">Left</button> |
| <button type="button" class="btn btn-default">Middle</button> |
| <button type="button" class="btn btn-default">Right</button> |
| </div> |
把多个按钮组 嵌套在一个工具栏里面
| <div class="btn-toolbar" role="toolbar" aria-label="..."> |
| <div class="btn-group" role="group" aria-label="...">...</div> |
| <div class="btn-group" role="group" aria-label="...">...</div> |
| <div class="btn-group" role="group" aria-label="...">...</div> |
| </div> |
只要给 .btn-group
加上 .btn-group-*
类,就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用
| <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div> |
| <div class="btn-group" role="group" aria-label="...">...</div> |
| <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div> |
| <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div> |
想要把下拉菜单混合到一系列按钮中,只须把 .btn-group
放入另一个 .btn-group
中
| <div class="btn-group" role="group" aria-label="..."> |
| <button type="button" class="btn btn-default">1</button> |
| <button type="button" class="btn btn-default">2</button> |
| |
| <div class="btn-group" role="group"> |
| <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
| Dropdown |
| <span class="caret"></span> |
| </button> |
| <ul class="dropdown-menu"> |
| <li><a href="#">Dropdown link</a></li> |
| <li><a href="#">Dropdown link</a></li> |
| </ul> |
| </div> |
| </div> |
让一组按钮垂直堆叠排列显示而不是水平排列
| <div class="btn-group-vertical" role="group" aria-label="..."> |
| ... |
| </div> |
<a>
元素
只须将一系列 .btn
元素包裹到 .btn-group.btn-group-justified
中即可
| <div class="btn-group btn-group-justified" role="group" aria-label="..."> |
| ... |
| </div> |
<button>
元素
| <div class="btn-group btn-group-justified" role="group" aria-label="..."> |
| <div class="btn-group" role="group"> |
| <button type="button" class="btn btn-default">Left</button> |
| </div> |
| <div class="btn-group" role="group"> |
| <button type="button" class="btn btn-default">Middle</button> |
| </div> |
| <div class="btn-group" role="group"> |
| <button type="button" class="btn btn-default">Right</button> |
| </div> |
| </div> |
前面的下拉菜单,重点介绍下拉菜单。 本部分介绍下拉菜单的按钮
| |
| <div class="btn-group"> |
| <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
| Action <span class="caret"></span> |
| </button> |
| <ul class="dropdown-menu"> |
| <li><a href="#">Action</a></li> |
| <li><a href="#">Another action</a></li> |
| <li><a href="#">Something else here</a></li> |
| <li role="separator" class="divider"></li> |
| <li><a href="#">Separated link</a></li> |
| </ul> |
| </div> |
| |
| <div class="btn-group"> |
| <button type="button" class="btn btn-danger">Action</button> |
| <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
| <span class="caret"></span> |
| <span class="sr-only">Toggle Dropdown</span> |
| </button> |
| <ul class="dropdown-menu"> |
| <li><a href="#">Action</a></li> |
| <li><a href="#">Another action</a></li> |
| <li><a href="#">Something else here</a></li> |
| <li role="separator" class="divider"></li> |
| <li><a href="#">Separated link</a></li> |
| </ul> |
| </div> |
按钮式下拉菜单适用所有尺寸的按钮。
| |
| <div class="btn-group"> |
| <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
| Large button <span class="caret"></span> |
| </button> |
| <ul class="dropdown-menu"> |
| ... |
| </ul> |
| </div> |
| |
| |
| <div class="btn-group"> |
| <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
| Small button <span class="caret"></span> |
| </button> |
| <ul class="dropdown-menu"> |
| ... |
| </ul> |
| </div> |
| |
| |
| <div class="btn-group"> |
| <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
| Extra small button <span class="caret"></span> |
| </button> |
| <ul class="dropdown-menu"> |
| ... |
| </ul> |
| </div> |
给父元素添加 .dropup
类就能使触发的下拉菜单朝上方打开。
| <div class="btn-group dropup"> |
| <button type="button" class="btn btn-default">Dropup</button> |
| <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
| <span class="caret"></span> |
| <span class="sr-only">Toggle Dropdown</span> |
| </button> |
| <ul class="dropdown-menu"> |
| |
| </ul> |
| </div> |
通过在文本输入框 <input>
前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group
赋予 .input-group-addon
或 .input-group-btn
类,可以给 .form-control
的前面或后面添加额外的元素。
| <div class="input-group"> |
| <span class="input-group-addon" id="basic-addon1">@</span> |
| <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> |
| </div> |
| |
| <div class="input-group"> |
| <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> |
| <span class="input-group-addon" id="basic-addon2">@example.com</span> |
| </div> |
| |
| <div class="input-group"> |
| <span class="input-group-addon">$</span> |
| <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> |
| <span class="input-group-addon">.00</span> |
| </div> |
| |
| <label for="basic-url">Your vanity URL</label> |
| <div class="input-group"> |
| <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span> |
| <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> |
| </div> |
| <div class="input-group input-group-lg"> |
| <span class="input-group-addon" id="sizing-addon1">@</span> |
| <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1"> |
| </div> |
| |
| <div class="input-group"> |
| <span class="input-group-addon" id="sizing-addon2">@</span> |
| <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2"> |
| </div> |
| |
| <div class="input-group input-group-sm"> |
| <span class="input-group-addon" id="sizing-addon3">@</span> |
| <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3"> |
| </div> |
| |
| <div class="input-group"> |
| <span class="input-group-addon"> |
| <input type="checkbox" aria-label="..."> |
| </span> |
| <input type="text" class="form-control" aria-label="..."> |
| </div> |
| |
| <div class="input-group"> |
| <span class="input-group-addon"> |
| <input type="radio" aria-label="..."> |
| </span> |
| <input type="text" class="form-control" aria-label="..."> |
| </div> |
| <div class="input-group"> |
| <span class="input-group-btn"> |
| <button class="btn btn-default" type="button">Go!</button> |
| </span> |
| <input type="text" class="form-control" placeholder="Search for..."> |
| </div> |
| |
| <div class="input-group"> |
| <input type="text" class="form-control" placeholder="Search for..."> |
| <span class="input-group-btn"> |
| <button class="btn btn-default" type="button">Go!</button> |
| </span> |
| </div> |
| <div class="input-group"> |
| <div class="input-group-btn"> |
| <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> |
| <ul class="dropdown-menu"> |
| <li><a href="#">Action</a></li> |
| <li><a href="#">Another action</a></li> |
| <li><a href="#">Something else here</a></li> |
| <li role="separator" class="divider"></li> |
| <li><a href="#">Separated link</a></li> |
| </ul> |
| </div> |
| <input type="text" class="form-control" aria-label="..."> |
| </div> |
| <div class="input-group"> |
| <div class="input-group-btn"> |
| |
| </div> |
| <input type="text" class="form-control" aria-label="..."> |
| </div> |
| |
| <div class="input-group"> |
| <input type="text" class="form-control" aria-label="..."> |
| <div class="input-group-btn"> |
| |
| </div> |
| </div> |
| <div class="input-group"> |
| <div class="input-group-btn"> |
| |
| </div> |
| <input type="text" class="form-control" aria-label="..."> |
| </div> |
| |
| <div class="input-group"> |
| <input type="text" class="form-control" aria-label="..."> |
| <div class="input-group-btn"> |
| |
| </div> |
| </div> |
| <ul class="nav nav-tabs"> |
| <li role="presentation" class="active"><a href="#">Home</a></li> |
| <li role="presentation"><a href="#">Profile</a></li> |
| <li role="presentation"><a href="#">Messages</a></li> |
| </ul> |
| <ul class="nav nav-pills"> |
| <li role="presentation" class="active"><a href="#">Home</a></li> |
| <li role="presentation"><a href="#">Profile</a></li> |
| <li role="presentation"><a href="#">Messages</a></li> |
| </ul> |
胶囊式标签页垂直
| <ul class="nav nav-pills nav-stacked"> |
| ... |
| </ul> |
| <ul class="nav nav-tabs nav-justified"> |
| ... |
| </ul> |
| <ul class="nav nav-pills nav-justified"> |
| ... |
| </ul> |
对任何导航组件(标签页、胶囊式标签页),都可以添加 .disabled
类,从而实现链接为灰色且没有鼠标悬停效果。
| <ul class="nav nav-tabs"> |
| ... |
| <li role="presentation" class="dropdown"> |
| <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> |
| Dropdown <span class="caret"></span> |
| </a> |
| <ul class="dropdown-menu"> |
| ... |
| </ul> |
| </li> |
| ... |
| </ul> |
| |
| <ul class="nav nav-pills"> |
| ... |
| <li role="presentation" class="dropdown"> |
| <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> |
| Dropdown <span class="caret"></span> |
| </a> |
| <ul class="dropdown-menu"> |
| ... |
| </ul> |
| </li> |
| ... |
| </ul> |
| <nav class="navbar navbar-default"> |
| <div class="container-fluid"> |
| |
| <div class="navbar-header"> |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> |
| <span class="sr-only">Toggle navigation</span> |
| <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="bs-example-navbar-collapse-1"> |
| <ul class="nav navbar-nav"> |
| <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> |
| <li><a href="#">Link</a></li> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> |
| <ul class="dropdown-menu"> |
| <li><a href="#">Action</a></li> |
| <li><a href="#">Another action</a></li> |
| <li><a href="#">Something else here</a></li> |
| <li role="separator" class="divider"></li> |
| <li><a href="#">Separated link</a></li> |
| <li role="separator" class="divider"></li> |
| <li><a href="#">One more separated link</a></li> |
| </ul> |
| </li> |
| </ul> |
| <form class="navbar-form navbar-left"> |
| <div class="form-group"> |
| <input type="text" class="form-control" placeholder="Search"> |
| </div> |
| <button type="submit" class="btn btn-default">Submit</button> |
| </form> |
| <ul class="nav navbar-nav navbar-right"> |
| <li><a href="#">Link</a></li> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> |
| <ul class="dropdown-menu"> |
| <li><a href="#">Action</a></li> |
| <li><a href="#">Another action</a></li> |
| <li><a href="#">Something else here</a></li> |
| <li role="separator" class="divider"></li> |
| <li><a href="#">Separated link</a></li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </nav> |
将导航条内放置品牌标志的地方替换为 <img>
元素即可展示自己的品牌图标。由于 .navbar-brand
已经被设置了内补(padding)和高度(height),你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。
| <nav class="navbar navbar-default"> |
| <div class="container-fluid"> |
| <div class="navbar-header"> |
| <a class="navbar-brand" href="#"> |
| <img alt="Brand" src="..."> |
| </a> |
| </div> |
| </div> |
| </nav> |
将表单放置于 .navbar-form
之内可以呈现很好的垂直对齐,并在较窄的视口(viewport)中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。
| <form class="navbar-form navbar-left" 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> |
对于不包含在 <form>
中的 <button>
元素,加上 .navbar-btn
后,可以让它在导航条里垂直居中
| <button type="button" class="btn btn-default navbar-btn">Sign in</button> |
把文本包裹在 .navbar-text
中时,为了有正确的行距和颜色,通常使用 <p>
标签
| <p class="navbar-text">Signed in as Mark Otto</p> |
或许你希望在标准的导航组件之外添加标准链接,那么,使用 .navbar-link
类可以让链接有正确的默认颜色和反色设置
| <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> |
通过添加 .navbar-left
和 .navbar-right
工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如,要对齐导航链接,就要把它们放在个分开的、应用了工具类的 <ul>
标签里。
添加 .navbar-fixed-top
类可以让导航条固定在顶部,还可包含一个 .container
或 .container-fluid
容器,从而让导航条居中,并在两侧添加内补(padding)。
| <nav class="navbar navbar-default navbar-fixed-top"> |
| <div class="container"> |
| ... |
| </div> |
| </nav> |
添加 .navbar-fixed-bottom
类可以让导航条固定在底部,并且还可以包含一个 .container
或 .container-fluid
容器,从而让导航条居中,并在两侧添加内补(padding)
| <nav class="navbar navbar-default navbar-fixed-bottom"> |
| <div class="container"> |
| ... |
| </div> |
| </nav> |
| <nav class="navbar navbar-default navbar-static-top"> |
| <div class="container"> |
| ... |
| </div> |
| </nav> |
| <nav class="navbar navbar-inverse"> |
| ... |
| </nav> |
面包屑导航
| <ol class="breadcrumb"> |
| <li><a href="#">Home</a></li> |
| <li><a href="#">Library</a></li> |
| <li class="active">Data</li> |
| </ol> |