首页 > 代码库 > BOOTSTRAP
BOOTSTRAP
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
现在，给我们提供了 3 中不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局。在平板电脑上，它将是 50%/50% 的布局。在大型视口的设备上，它将是 33%/66% 的布局。
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本
为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本
强调文本的类：
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
<p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>
<p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p>
<p class="text-lowercase">Lowercased text（小写文本）.</p>
<p class="text-uppercase">Uppercased text（大写文本）.</p>
<p class="text-capitalize">Capitalized text（首字母大写文本）.</p>
HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。
<abbr title=”phone”>P:</abbr>
使用<address>标签可以在网页上显示联系信息
<address>
<a href=mailto:#>mailto@somedomain.com</a>
</address>
引用
<blockquote> 这是一个带有源标题的引用。 <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote> <blockquote class="pull-right"> 这是一个向右对齐的引用。 <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote>
列表
<h4>有序列表</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
有序列表是指以数字或其他有序字符开头的列表
<h4>无序列表</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
<h4>定义列表</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。您可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。
把所有列表项放置在同一行
<ul class="list-inline">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中
<dl class="dl-horizontal">
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
bootstrap代码：
第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。
开始和结束标签使用了 unicode 变体： < 和 >；
<p><code><header></code> 作为内联元素被包围。</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
变量赋值: x = ab + y
<p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>
|
|
<pre></pre>中保留了空格和换行
使 <pre> 元素可滚动 scrollable
<pre class="pre-scrollable">
</pre>
按键提示：CTRL+P
<p>使用 <kbd>ctrl + p</kbd> 来打开打印窗口。</p>
表格
<table class="table">只有横向分隔线
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>
<table class="table table-striped">在 <tbody> 内添加斑马线形式的条纹
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">为所有表格的单元格添加边框
|
table-hover |
在 <tbody> 内的任一行启用鼠标悬停状态 |
|||
|
|
|||
<tr>,<th>,<td>
<tr class=”active”>将悬停的颜色应用于行或单元格
.success表示成功的操作
.info表示信息变化的操作
.warning表示警告的操作
.danger表示一个危险的操作
<div class="table-responsive">通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
表单
- · 向父 <form> 元素添加 role="form"。
- · 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
- · 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<form class="form-inline" role="form">
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
水平表单<form class="form-horizontal" role="form">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
表单控件
输入框：
<form role=”form”>
<div class=”form-group”>
<label for=”name”>标签</label>
<input type=”text” class=”form-control” placeholder=”文本输入”>
</div>
</form>
文本框：当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）
<form role=”form>
<div class=”form-group”>
<label for=”name”>文本框</label>
<textarea class=”form-control” row=”3”></textarea>
</div>
</form>
复选框（checkbox）和单选框(radio)
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上
按钮：
<button type=”button” class=”btn btn-default”>默认按钮</button>
<button type=”button” class=”btn btn-primary”>原始按钮</button>
btn-success 成功按钮 btn-info 信息按钮 btn-warning 警告按钮
btn-danger 危险按钮 btn btn-link 链接按钮
btn-lg 大的按钮 btn-sm 小的按钮 btn-xs特别小的按钮
btn-block 块级按钮
active 激活状态
<button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
disabled 禁用
下拉菜单:
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://www.mamicode.com/#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://www.mamicode.com/#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://www.mamicode.com/#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://www.mamicode.com/#">分离的链接</a>
</li>
</ul>
</div>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
class .pull-right 来向右对齐下拉菜单
class dropdown-header 向下拉菜单的标签区域添加标题
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation" >
<a role="menuitem" tabindex="-1" href="http://www.mamicode.com/#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://www.mamicode.com/#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://www.mamicode.com/#">
数据通信/网络
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://www.mamicode.com/#">分离的链接</a>
</li>
</ul>
</div>
BOOTSTRAP