一：
代码显示方式：
第一种是“内联“标签 <code>。
第二种是 ”块级“<pre> 标签。
【注意】当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。
1）<pre>标签：多行代码
<pre>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</pre>
image.png
2）<code>标签：
<p><code><header></code> 作为内联元素被包围。</p>
3）<var>标签：变量赋值
<p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>
==> x = ab + y
4）<kbd>标签：
<p>使用 <kbd>ctrl + p</kbd> 来打开打印窗口。</p>
image.png
二：表格
<table><thead><tbody><tr><td><th><caption>
1）用于table上的相关样式类：
<table class="table"> 任意表格添加基本样式 (只有横向分隔线)；
<table class="table table-striped">在 tbody 内添加斑马线形式的条纹 ( IE8 不支持)
<table class="table table-bordered">为所有表格的单元格添加边框；
<table class="table table-hover">启用表格中 tbody 上的行的悬停效果；
<table class="table table-condensed">让表格更加紧凑；
<table class="table table-striped table-bordered table-hover table-condensed">联合使用所有表格类
2）可用于表格的行或者单元格
<tr class="active">类将悬停的颜色应用在行或者单元格上
<tr class="success">类表示执行成功的操作（绿色）
image.png
<tr class="info">表示信息变化的操作（蓝色）
<tr class="warning">表示一个警告操作（黄色）
<tr class="danger">表示一个危险的操作（红色）
3）响应式表格：把任意的 .table 包在 .table-responsive class 内
<div class="table-responsive"><table class="table"></table></div>
三：表单
1）布局：
1、基本布局：
创建基本表单的步骤：向父 <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" >
<p class="help-block">这是块级帮助文本的实例--解释的灰色文本。</p>
</div>
</form>
2、内联布局：文本标签按钮都在一行内显示，向 <form> 标签添加 class .form-inline；
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
使用 class .sr-only，您可以隐藏内联表单的标签。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
</form>
3、水平表单：
创建步骤：向父 <form> 元素添加 class .form-horizontal ==》把标签和控件放在一个带有 class .form-group 的 <div> 中 ==》向标签添加 class .control-label
例如：<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">名字</label>
<div class="col-sm-10"><input type="text" class="form-control"></div>
</div>
</form>
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。
- 输入框（Input）适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
文本框（Textarea）进行多行输入的时候，必要时可以改变 rows 属性行<textarea class="form-control" rows="3"></textarea> - 复选框（Checkbox）和单选框（Radio）对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline，控制它们显示在同一行上。<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1</label>
- 选择框（Select）:使用 multiple="multiple" 允许用户选择多个选项。<select multiple class="form-control"></select>
- 静态控件：当您需要在一个水平表单内的表单标签后放置纯文本时使用form-control-static；<p class="form-control-static">email@example.com</p>
image.png
表单控件状态：
- 输入框焦点
- 禁用输入框input：只需要简单地添加 disabled 属性<input disabled>
- 禁用fieldset：<fieldset disabled></fieldset>
- 验证状态：<div class="form-group has-success"></div> 成功绿色 / .has-warning警告黄 / .has-error错误红
表单控件大小：可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度
<input class="form-control input-lg" type="text" > / .input-sm input-lg
<select class="form-control input-lg"></select>
网友评论