BootStrap系列:BootStrap组件
BootStrap组件
一、按钮
二、表格
- 基本表格
table.table>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n table.table>caption+(thead>tr>th*n)+tbody>tr*n>td*n
- 可选的表格类1:条纹表格
table.table.table-striped>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n
- 可选的表格类2:边框表格
table.table.table-bordered>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n
- 可选的表格类3:悬停表格
table.table.table-hover>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n
- 可选的表格类4:精简表格
table.table.table-condensed>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n
- 上下文类
table.table>caption+(thead>tr>th*n)+tbody>((tr.颜色>td*n))*n
- 响应式表格
div.table-responsive>table.table>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n
三、表单
- 表单布局
- 垂直表单(默认)
- 内联表单
- 水平表单
- 垂直或基本表单
- 向父 <form> 元素添加 role="form"
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control"
- 内联表单
- 向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline
- 水平表单
- 向父 <form> 元素添加 class .form-horizontal
- 把标签和控件放在一个带有 class .form-group 的 <div> 中
- 向标签添加 class .control-label
- 支持的表单控件
- 输入框Input 类型:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 、color
- 文本框Textarea 属性rows <textarea class="form-control" rows="3"></textarea>
- 复选框Checkbox .checkbox-inline ,控制它们显示在同一行上。
- 单选框Radio .radio-inline,控制它们显示在同一行上。
- 选择框Select 想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框
- 静态控件 在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static
- 表单控件大小 .input-lg等 和 .col-lg等-* 来设置表单的高度和宽度
- 表单帮助文本 为了添加一个占用整个宽度的内容块,在 <input> 后使用 .help-block
- 输入框组 http://www.runoob.com/bootstrap/bootstrap-input-groups.html
- 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
- 接着,在相同的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
- 把该 <span> 放置在 <input> 元素的前面或者后面。
四、布局组件
- 字体图标Glycerines http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
- <span class="glyphicon glyphicon-search"></span>
- 在线定制字形图标 http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
- 下拉菜单dropdowns http://www.runoob.com/bootstrap/bootstrap-dropdowns.html
- 按钮组【见上图】 http://www.runoob.com/bootstrap/bootstrap-button-groups.html
- 按钮下拉菜单【见上图】 http://www.runoob.com/bootstrap/bootstrap-button-dropdowns.html
- 导航元素
- 以一个带有 .nav 的无序列表开始。
- 添加 .nav-tabs
- 标签式 的导航菜单 ul.nav.nav-tabs>li*n>a
- 胶囊式 的导航菜单【普通】 ul.nav.nav-pills>li*n>a
- 标签式 的导航菜单【垂直】 ul.nav.nav-tabs.nav-stacked>li*n>a
- 两端对齐 的导航菜单 ul.nav.nav-justified>li*n>a
- 带有下拉框 的标签 在需要有下拉框的一个li里的a加 class="dropdown-toggle" data-toggle="dropdown" 在li下加ul.dropdown-menu>li>a
- 动态标签1 tab-content http://www.runoob.com/try/try.php?filename=trybs_ref_comp_nav-toggle&basepath=0
- 动态标签2 tab-pane http://www.runoob.com/try/try.php?filename=trybs_ref_comp_nav-toggle&basepath=0
- 导航栏
- 向 <nav> 标签添加 class .navbar、.navbar-default。
- 向上面的元素添加 role="navigation",有助于增加可访问性。
- 向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。会让文本看起来更大一号。
- 为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
- 响应式导航栏
- 要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中
- 折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。
- 第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。
- 三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮
- 这些会切换为 .nav-collapse <div> 中的元素
- 导航栏中的表单: .navbar-form
- 导航栏中的按钮: .navbar-btn
- 导航栏中的文本: .navbar-text
- 导航栏中的对齐方式: .navbar-left|right
- 固定到顶部|底部: .navbar-fixed-top|bottom
- 静态的顶部|底部: .navbar-static-top
- 反色的导航栏: .navbar-inverse
- 面包屑导航栏:breadcrumb
- 徽章Badges <span class="badge"></span>
- 超大屏幕Jumbotron <div class="jumbotron"> </div> 这个标签会出现灰色的背景颜色
- 页面标题Page Header <div class="page-header"> <h1>页面标题实例 <small>子标题</small> </h1> </div>
- 缩略图
- 在图像周围添加带有 class .thumbnail 的 <a> 标签。
- 这会添加四个像素的内边距(padding)和一个灰色的边框。
- 当鼠标悬停在图像上时,会动画显示出图像的轮廓。
- 进度条 http://www.runoob.com/bootstrap/bootstrap-progress-bars.html
- 添加一个带有 class .progress 的 <div>。
- 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>。
- 添加一个带meiy有百分比表示的宽度的 style 属性,例如 style="width: 60%"; 表示进度条在 60% 的位置。
- 多媒体对象Media Object
- 媒体对象可以用更少的代码来实现媒体对象与文字的混排
- http://www.runoob.com/bootstrap/bootstrap-media-object.html
- 分页Pagination http://www.runoob.com/bootstrap/bootstrap-pagination.html
- 列表组 http://www.runoob.com/bootstrap/bootstrap-list-group.html
- 面板Panels
- http://www.runoob.com/bootstrap/bootstrap-panels.html
- <div class="panel panel-default"> <div class="panel-heading"> 不带 title 的面板 </div> <div class="panel-body"> 内容 </div> </div>
- Wells 一种会引起内容凹陷显示或插图效果的容器 <div> <div class="well">您好,我在 Well 中!</div>