BootStrap详解之

Posted 吴老二

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BootStrap详解之相关的知识,希望对你有一定的参考价值。

六、内容
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> (123) 456-7890
</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/

 

以上是关于BootStrap详解之的主要内容,如果未能解决你的问题,请参考以下文章

BootStrap实用代码片段(持续总结)

DOM探索之基础详解——学习笔记

MyBatis之Mapper XML 文件详解-sql和入参

css Bootstrap 3进度条片段

HTML bootstrap片段消息

Jquery if复选框是否已选中Bootstrap开关