首页 > 代码库 > [布局] bootstrap基本标签总结
[布局] bootstrap基本标签总结
文件头：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>基础表格</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head>
bootstrap在reset.css文件中设置margin为0，因此其他的标签需要重新设计margin。
1.h
<h>标签和普通使用方法一样。
定义了.h1~.h6六个类名，样式和标题样式一样。
副标题用<small>标签指出，必须包含在h标签内。
<h1>Bootstrap标题一</h1><div class="h1">Bootstrap标题一</div>
<h1>Bootstrap标题一<small>我是副标题</small></h1>
2.p
定义<body>的字体库、字号、行高、颜色，<p>标签继承这些设置，单独设置margin-bottom为10px，使用方法同普通方法。
强调内容
增大：.lead;
加粗：<strong>; <b>（设置font-weight: bold）
斜体：<em>;<i> （设置font-style: italic）
不变：<cite>
变小：<small>,.small
强调类（颜色）
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（##a94442）
文本对齐
（设置text-align：center、left、right、justify）
? .text-left：左对齐
? .text-center：居中对齐
? .text-right：右对齐
? .text-justify：两端对齐
3.列表（ul ol dl）
Bootstrap对于列表，只是在margin上做了一些调整
margin-top: 0; margin-bottom: 10px;
去除项目符号
.list-unstyled
（padding-left: 0;list-style: none;）
内联列表，制作水平导航
.list-inline
代码
<code> <pre> <kbd>
<pre class=“.pre-scrollable”> 设置最大代码区域
4.表格
千万注意，你的<table>元素中一定不能缺少类名table
? .table：基础表格
? .table-striped：斑马线表格
? .table-bordered：带边框的表格
? .table-hover：鼠标悬停高亮的表格
? .table-condensed：紧凑型表格
? .table-responsive：响应式表格
<table class="table"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table>
<tr>的不同行颜色
<tbody> <tr class="active"> <td>.active</td> <td>表示当前活动的信息</td> </tr> <tr class="success"> <td>.success</td> <td>表示成功或者正确的行为</td> </tr> <tr class="info"> <td >.info</td> <td>表示中立的信息或行为</td> </tr> <tr class="warning"> <td>.warning</td> <td>表示警告，需要特别注意</td> </tr> <tr class="danger"> <td>.danger</td> <td>表示危险或者可能是错误的行为</td> </tr> </tbody>
5.表单
<form role=”form”>
默认垂直显示
用<div class=“form-group”>包围控件及其标签
对input select textarea设置.form-control
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
水平风格表单：标签在左，控件在右
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）
内联表单 ：控件一行显示
在<form>元素中添加类名“form-inline”
表单控件
select：<select multiple class="form-control"> 选择多个
textarea： <textarea class="form-control" rows="3"></textarea>
radio，checkbox：div包着label包着input
<div class="checkbox"> <label> <input type="checkbox" value=""> 记住密码 </label> </div>
radio，checkbox：水平排列
div（class=”form-group”）包着label（class=”checkbox-inline”or“radio-inline”）包着input
禁用控件：在控件上添加disabled属性
<input class="input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
验证状态：form-group容器添加has-success等类;若想label同步变色需要在label上加.control-label;显示icon需要在form-group加.has-feedback，最后加一个span存放icon
表单提示信息：
在form-group容器后加一个span，添加类名.help-block
button：四种方式，bootstrap用button实现，建议用button和a标签来制作按钮
<input type="button">
<input type="reset">
<input type="submit">
<button></button>
button样式
.btn
.btn-default
大小：
.btn-lg
.btn-sm
.btn-xs
块状按钮：按钮充满整个容器，没有padding和margin .btn-block
禁用按钮：添加类.disabled 或者添加属性disabled=“disabled”
[布局] bootstrap基本标签总结