BootStrap详解之

Posted 2020-06-18 吴老二

六、内容
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428

中心内容
.lead 将字体大小、加粗、行高修改 （无卵高深用）
标记
mark标签高亮内容 <mark>highlight</mark>
删除内容
del标签删除内容（横线）
<del>This line of text is meant to be treated as deleted text.</del>
无用文本
s 标签（横线）
<s>This line of text is meant to be treated as deleted text.</s>
同删除内容
插入文本
ins标签（下划线）
<ins>This line of text is meant to be treated as an addition to the document.</ins>
带下划线的文本
u标签
<u>This line of text will render as underlined</u>

小号文本
small标签，父容器字体大小的 85% （标题的small是指定的大小）

着重
strong标签

斜体
em标签

对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</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>

缩略语
<abbr title="attribute">attr</abbr>
首字母缩略语
<abbr title="HyperText Markup Language" class="initialism">html</abbr>

地址

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> [phone]
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:[email protected]">[email protected]</a>
</address>

引用
blockquote标签

<footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

右对齐效果
　　.blockquote-reverse

无序列表
<ul>
<li>...</li>
</ul>
有序列表
<ol>
<li>...</li>
</ol>
无样式列表
<ul class="list-unstyled">
<li>...</li>
</ul>

内联列表
<ul class="list-inline">
<li>...</li>
</ul>

描述列表
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
水平排列的描述
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>

-- 自动截断：text-overflow: ellipsis;
-- 不换行：white-space: nowrap;

用户输入
<kbd> 标签

代码块
<pre> 标签

.pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条

变量
var 标签

程序输出
标签

 

七、表格
table、caption、thead、tbody、tr、th、td

.table
.table .table-striped 条纹状
.table .table-bordered 边框
.table .table-hover 鼠标悬停
.table .table-condensed 紧缩，padding减少
颜色，tr和td都可以加入颜色样式：
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

.table-responsive 相应式表格，将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

八、表单
基本表单
.form-group
label
.form-control

内联表单
.form-inline：当行表单，在表单组外面添加.form-inline 类，可以使得表单内联， 如果屏幕宽度小于768px，则失效
.sr-only： 隐藏label，class="sr-only"
.input-group： 对input标签进行处理
.form-horizontal： .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局

 

其他详见：http://v3.bootcss.com/