1_设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果。 2_组件:无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。 3_JavaScript 插件:jQuery 插件为 Bootstrap 的组件赋予了“活的生命”。
1_设置全局 CSS 样式
按钮
普通按钮 可作为按钮使用的标签或元素,为 <a>、<button> 或 <input> 元素添加按钮类。 注意:class="btn btn-default"表示这个标签或元素即使用btn样式, 又使用btn-default样式,二个样式的前后顺序无关。 <a href="#" class="btn btn-default">超链接</a><br/> <input type="button" value="按钮" class="btn btn-default"/><br/> <button class="btn btn-default">按钮</button> 预定义样式的按钮 有不同颜色的按钮。 其中btn btn-primary,btn btn-btn-success,btn btn-info, btn btn-warning,btn btn-danger,btn btn-link 这些样式都是Bootstrap框架内置的按钮样式。 <input class="btn btn-default" type="button" value="注册"/><br/> <input class="btn btn-primary" type="button" value="登录"/><br/> <input class="btn btn-success" type="button" value="退出"/><br/> <input class="btn btn-danger" type="button" value="提交"/><br/> 激活状态 当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。 对于 <button> 元素,是通过 :active 状态实现的。 对于 <a> 元素,是通过 .active 类实现的。 然而,你还可以将 .active 应用到 <button> 上(包含 aria-pressed="true" 属性)), 并通过编程的方式使其处于激活状态。 <button type="button" class="btn btn-default btn-lg active">Button</button> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a> 禁用状态 通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。 <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
图片
响应式图片 通过为图片添加 .img-responsive 类可以让图片支持响应式布局。 其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性, 从而让图片在其父元素中更好的缩放。 如果需要 让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center。 .img-responsive 图片具有响应式 .center-block 图片水平居中 .img-rounded 图片背景是圆角矩形 .img-circle 图片背景是圆形 .img-thumbnail 图片背景是矩形 <img src="img/banner.jpg" class="img-responsive img-thumbnail"/><br/>
表格
响应式表格 将任何 .table 元素包裹在 .table-responsive 元素内, 即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。 当屏幕大于 768px 宽度时,水平滚动条消失。 <div class="table-responsive"> <table class="table"> </table> </div> 带边框的表格 添加 .table-bordered 类为表格和其中的每个单元格增加边框。 <table class="table table-bordered"> ... </table> 鼠标悬停 通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。 状态类 即单独对某个td或tr设置不同的颜色,通过这些状态类可以为行或单元格设置颜色。 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 <table class="table table-hover"> <tr> <th>编号</th> </tr> <tr class="danger"> <td>1</td> </tr> <tr class="warning"> <td>2</td> </tr> <tr class="success"> <td>3</td> </tr> </table>
表单
单独的表单控件会被自动赋予一些全局样式。 所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素 都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 <form> <div class="form-group"> <label for="user">用户名:</label> <input type="text" class="form-control" id="user" placeholder="请输入用户名"> </div> </form> 不要将表单组合输入框组混合使用 不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。 内联表单 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。 **一定要添加 label 标签 如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。 对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。 还有一些辅助技术提供label标签的替代方案,比如 aria-label、aria-labelledby 或 title 属性。 如果这些都不存在,屏幕阅读器可能会采取使用 placeholder 属性, 如果存在的话,使用占位符来替代其他的标记,但要注意,这种方法是不妥当的。 <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="goods">商品</label> <div class="input-group"> <div class="input-group-addon">*</div> <input type="text" class="form-control" id="goods" placeholder="请输入商品名"> </div> </div> <button type="submit" class="btn btn-primary">查找</button> </form> 水平排列的表单 通过为表单添加 .form-horizontal 类, 并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。 这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。 <form class="form-horizontal"> <div class="form-group"> <label for="user" class="col-sm-1 control-label">用户名:</label> <div class="col-sm-4"> <input type="text" class="form-control" id="user" placeholder="请输入用户名"> </div> </div> </form> 输入框 包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件: text、password、datetime、datetime-local、date、 month、time、week、number、email、url、search、tel 和 color。 文本域 支持多行文本的表单控件。可根据需要改变 rows 属性。 <textarea class="form-control" rows="5" placeholder="请输入信息"></textarea> 多选和单选框 多选框(checkbox)用于选择列表中的一个或多个选项, 而单选框(radio)用于从多个选项中只选择一个。 设置了 disabled 属性的单选或多选框都能被赋予合适的样式。 对于和多选或单选框联合使用的 <label> 标签,如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式, 请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。 <div class="checkbox"> <label> <input type="checkbox" value=""> 可选 </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled> 禁止点击 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 只能选一个 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 只能选一个 </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> 禁止点击 </label> </div> 内联单选和多选框 通过将 .checkbox-inline 或 .radio-inline 类 应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。 下拉列表(select) 注意,很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。 <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> 静态控件 如果需要在表单中将一行纯文本和 label 元素放置于同一行,为 <p> 元素添加 .form-control-static 类即可。 <div class="form-group"> <label class="sr-only">。。。</label> <p class="form-control-static">静态控件</p> </div> 焦点状态 我们将某些表单控件的默认 outline 样式移除,然后对 :focus 状态赋予 box-shadow 属性。 只读状态 为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。 添加额外的图标 你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。 反馈图标(feedback icon)只能使用在文本输入框 <input class="form-control"> 元素上。 调整列(column)尺寸 用栅格系统中的列(column)包裹输入框或其任何父元素,都可很容易的为其设置宽度。 <div class="row"> <div class="col-xs-2"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder=".col-xs-3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div>
2_组件
下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里, 或者另一个声明了 position: relative; 的元素。 然后加入组成菜单的 HTML 代码。 默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。 可能需要额外的定位May requir <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="下拉菜单ID" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 下拉菜单名称 <span class="caret"></span> </button> <!--下拉列表--> <ul class="dropdown-menu" aria-labelledby="下拉菜单ID"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ul> </div> 在任何下拉菜单中均可通过添加标题来标明一组动作。 <li class="dropdown-header">标题名称</li> 为下拉菜单添加一条分割线,用于将多个链接分组。 <li role="separator" class="divider"></li> 为下拉菜单中的 <li> 元素添加 .disabled 类,从而禁用相应的菜单项。 <li class="disabled"><a href="#">Disabled link</a></li>
按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。 <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-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。 <div class="btn-toolbar" role="toolbar" aria-label="..."> <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-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> </div> </div> 想要把下拉菜单混合到一系列按钮中,只须把 .btn-group 放入另一个 .btn-group 中。 <div class="btn-toolbar" role="toolbar" aria-label="..."> <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 class="btn-group" role="group" aria-label="..."> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="下拉菜单ID" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 下拉菜单名称 <span class="caret"></span> </button> <!--下拉列表--> <ul class="dropdown-menu" aria-labelledby="下拉菜单ID"> <li class="dropdown-header">标题名称</li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li role="separator" class="divider"></li> <li class="disabled"><a href="#">Disabled link</a></li> <li><a href="#">列表项</a></li> </ul> </div> </div> </div> </div>
按钮式下拉菜单
把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。 <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 按钮 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li role="separator" class="divider"></li> <li><a href="#">列表项</a></li> </ul> </div>
<div class="btn-toolbar" role="toolbar" aria-label="..."> <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 class="btn-group" role="group" aria-label="..."> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 按钮名称 <span class="caret"></span> </button> <!--下拉列表--> <ul class="dropdown-menu"> <li class="dropdown-header">标题名称</li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li role="separator" class="divider"></li> <li class="disabled"><a href="#">Disabled link</a></li> <li><a href="#">列表项</a></li> </ul> </div> </div> </div>
分裂式按钮下拉菜单
分裂式按钮下拉菜单也需要同样的改变一些标记,但只是多一个分开的按钮。 <div class="btn-group"> <button type="button" class="btn btn-danger">按钮名称</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">分裂式按钮下拉菜单</span> </button> <ul class="dropdown-menu"> <!--下拉列表--> <li class="dropdown-header">标题名称</li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li role="separator" class="divider"></li> <li class="disabled"><a href="#">Disabled link</a></li> <li><a href="#">列表项</a></li> </ul> </div>
向上弹出式菜单
给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。 <div class="btn-group dropup"> <button type="button" class="btn btn-danger">按钮名称</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">分裂式按钮下拉菜单</span> </button> <ul class="dropdown-menu"> <!--下拉列表--> <li class="dropdown-header">标题名称</li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li role="separator" class="divider"></li> <li class="disabled"><a href="#">Disabled link</a></li> <li><a href="#">列表项</a></li> </ul> </div>
输入框组
通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。 为 .input-group 赋予 .input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。 <div class="input-group"> <span class="input-group-addon" id="user">@</span> <input type="text" class="form-control" placeholder="请输入用户名" aria-describedby="user"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="搜索"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group -->
导航
确保导航组件的可访问性 如果你在使用导航组件实现导航条功能, 务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性,或者用一个 <nav> 元素包裹整个导航组件。 不要将 role 属性添加到 <ul> 上,因为这样可以被辅助设备(残疾人用的)上被识别为一个真正的列表。 标签页 注意 .nav-tabs 类依赖 .nav 基类。 <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">列表项</a></li> <li role="presentation"><a href="#">列表项</a></li> <li role="presentation"><a href="#">列表项</a></li> </ul> 胶囊式标签页 HTML 标记相同,但使用 .nav-pills 类: <ul class="nav nav-pills"> <!--标记为激活状态--> <li role="presentation" class="active"><a href="#">列表项</a></li> <li role="presentation"><a href="#">列表项</a></li> <!--标记为禁用状态--> <li role="presentation" class="disabled"><a href="#">列表项</a></li> </ul> 添加下拉菜单 用一点点额外 HTML 代码并加入下拉菜单插件的 JavaScript 插件即可。 <ul class="nav nav-pills"> <!--标记为激活状态--> <li role="presentation" class="active"><a href="#">列表项</a></li> <li role="presentation"><a href="#">列表项</a></li> <!--标记为禁用状态--> <li role="presentation" class="disabled"><a href="#">列表项</a></li> <li role="presentation" class="dropdown"> <a class=" dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 列表项 <span class="caret"></span> <span class="sr-only">下拉菜单</span> </a> <ul class="dropdown-menu"> <!--下拉列表--> <li class="dropdown-header">标题名称</li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li role="separator" class="divider"></li> <li class="disabled"><a href="#">Disabled link</a></li> <li><a href="#">列表项</a></li> </ul> </li> </ul>
导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。 它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。 导航条的可访问性 务必使用 <nav> 元素,或者,如果使用的是通用的 <div> 元素的话,务必为导航条设置 role="navigation" 属性,这样能够让使用辅助设备的用户明确知道这是一个导航区域。
整个导航条就是一个nav标签。 .navbar .navbar-default 默认的颜色为白色 .navbar-inverse 颜色为黑色 .navbar-header 指定商标和开关的样式,让它在手机上更好的显示 .collapse navbar-collapse 可以折叠的所有项 .dropdown 下拉菜单 .navbar-left 左对齐 .navbar-right 右对齐 开头相关的属性 作用 data- 表示这有一个事件激活,会产生相应的功能 aria- 给残障人士使用 sr-only 屏幕阅读的功能,给残障人士使用
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- 商标和提示在移动设备中显示的效果 --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#显示条目ID" aria-expanded="false"> <span class="sr-only">隐藏内容</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首页</a> <!--品牌图标--将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。--> <!--即把首页换为<img alt="Brand" src="img/icon_6.jpg">--> </div> <!--弹出菜单的体部内容--> <div class="collapse navbar-collapse" id="显示条目ID"> <!--导航条导航 .navbar-nav--> <ul class="nav navbar-nav"> <!--标记为激活状态--> <li role="presentation" class="active"><a href="#">列表项</a></li> <li role="presentation"><a href="#">列表项</a></li> <!--标记为禁用状态--> <li role="presentation" class="disabled"><a href="#">列表项</a></li> <li role="presentation" class="dropdown"> <a class=" dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 列表项 <span class="caret"></span> <span class="sr-only">下拉菜单</span> </a> <ul class="dropdown-menu"> <!--下拉列表--> <li class="dropdown-header">标题名称</li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li role="separator" class="divider"></li> <li class="disabled"><a href="#">Disabled link</a></li> <li><a href="#">列表项</a></li> </ul> </li> </ul> <!--导航条表单 .navbar-form--> <form class="navbar-form navbar-right" role="search" method="get"> <div class="form-group"> <input type="text" class="form-control" name="band" placeholder="请输入商品"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
按钮.navbar-btn 可以被用在 <a> 和 <input> 元素,<button> 元素上 文本.navbar-text 为了有正确的行距和颜色,通常使用 <p> 标签。