HTML中的所有标题标签，<h1>到<h6>均可使用。另外，还提供了.h1到.h6类，为的是给内联(inline)属性的文本赋予标题的样式。在标题内还可以包含<small>标签或赋予.small类的元素，可以用来标记副标题。

Bootstrap将全局font-size设置14px，line-height设置为1.428。这些属性直接赋予<body>元素和所有段落元素。另外，<p>(段落)元素还被设置了等于1/2行高(10px)的底部外边距(margin)。

通过添加.lead类可以让段落突出显示。

variables.less文件中定义的两个Less变量决定了排版尺寸：@font-size-base和@line-height-base。第一个变量定义了全局font-size基准，第二个变量是line-height基准。自定义这些变量即可改变Bootstrap的默认样式。

高亮字体可以使用<mark>标签。

被删除的文本可以使用<del>标签。

没用的文本可以使用<s>标签。

额外插入的文本可以使用<ins>标签。

带下划线的文本可以使用<u>标签。

对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。。small类可以代替任何<small>元素。

通过增加font-weight值强调一段文本可以使用<strong>标签。

用斜体强调一段文本可以使用<em>标签。

在HTML5中可以放心使用<b>和<i>标签。<b>用于高亮单词或短语，不带有任何着重的意味；而<i>标签主要用于发言、技术词汇等。

通过文本对齐类，可以将文字重新对齐。 .text-left   .text-center   .text-rigjt  .text-justify   .text-nowrap

通过.text-lowercase、.text-uppercase和.text-capitalize可以改变大小写。

缩略语：当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语带有title属性，外观表现为带有较浅的虚线框鼠标移至上面时会变成带有问号的指针。 
<abbr title="attribute">attr</abbr> 
首字母缩略语需添加.initialism类。

换行可以在每行末尾添加<br>标签。

将任何HTML元素包裹在<blockquote>中即可表现为引用样式。对于直接引用，建议使用<p>标签。 
<blockquote> 
   <p>hello</p> 
</blockquote>

可以使用<footer>标签对引用的话进行标注。 
<blockquote> 
   <p>hello</p> 
   <footer>create by <cite title="Source Title">forever</cite></footer> 
</blockquote>

可以使用.blockquote-resverse对引用的话进行位置对称。

无序列表可以使用<ul><li>...</li>...</ul>标签实现。

有序列表可以用<ol><li>...</li>...</li>标签实现。

无样式列表可以使用<list-style>标签实现，是直接针对子元素的。

内联类表通过设置.inline-block;并添加少量的内补(padding)，将所有元素放置于同一行。 
<ul class="list-inline"> 
   <li>...</li> 
</ul>

带有描述的短语列表使用<dl><dt></dt></dl>标签。

.dl-horizontal可以让<dl>内的短语及其描述排在一行。开始时像<dl>的默认样式堆叠在一起，随着导航条逐渐展开而排列在一起。

内联代码通过<code>标签包裹内联样式的代码片段。

通过<kdb>标签标记用户通过键盘输入的内容。

多行代码可以使用<pre>标签。（尖括号要做转义处理$lt）

通过<var>标签标记变量。

通过<samp>标签来标记程序输出的内容。

为任意<table>标签添加.table类可以为其赋予基本的样式——少量的内补(padding)和水平方向的分割线。 
通过添加.table-striped类可以给<body>之内的每一行增加斑马条纹样式。 
通过添加.table-bordered类为表格和其中的每个单元格增加边框。 
通过添加.table-hover类可以让<tbody>中每一行对鼠标悬停状态做出响应。 
通过添加.table-condensed类可以让表格更加紧凑，单元格中的内补(padding)均会减半。 
通过这些状态类可以为行或单元格设置颜色。 
Class                   描述 
.active         鼠标悬停在行或单元格上时所设置的颜色 
.success        标识成功或积极的动作 
.info           标识普通的提示信息或动作 
.warning        标识警告或需要用户注意 
.danger         标识危险或潜在的带来负面影响的动作

将.table元素包裹在.table-responsive元素内，即可创建响应式表格。(当屏幕小于768px时显示水平滚动条)。

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100%;。将<label>元素和前面元素提到的控件包裹在.form-group中可以获得最好的排列。 
<form role="form"> 
   <div class="form-group"> 
       <label for="exampleInputEmail">Email address</label> 
       <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
   </div> 
   <div class="form-group"> 
       <label for="exampleInputPassword1">Password<label> 
       <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter password"> 
   </div> 
   <div class="form-group"> 
    <label for="exampleInputFile">File input</label> 
    <input type="file" id="exampleInputFile"> 
    <p class="help-block">Example block-level help text here.</p> 
  </div> 
  <button type="submit" class="btn btn-default">Submit</button> 
</form>

为<form>元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口(viewport)至少在768px宽度时。一定要为每个输入控件添加label标签，否则屏幕阅读器将无法正确识别。对于内联表单，你可以通过为label设置.sr-only类将其隐藏。

水平排列的表单：通过为表单添加.form-horizontal类，并联合使用Bootstrap预置的栅格类，可以将label标签和空间组水平并排布局。这样将改变.form-group的行为，使其表现为栅格系统中的行(row)，因此无需再额外添加.row了。

输入框：包括大部分表单控件、文本输入域控件，还支持所有HTML5类型的输入空间：text、password、datetime、datetime-local、data、month、time、week、number、email、url、search、tel和color。<input type="">type属性的输入控件才能被赋予正确的样式。

文本域：支持多行文本的表单控件。 
<textarea class="form-control" rows="3" />

多选和单选框：设置了disabled属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用改的<label>标签，若也希望将悬停于上方的鼠标设置为禁止点击的样式，请讲.disabled类赋予.radio、radio-inline、.checkbox、.checkbox-inline或<fieldset>.

通过将.checkbox-inline或.radio-inline类应用到一系列的多选框(checkbox)或单选框(radio)控件上，可以使这些控件排列在一行。

下拉列表：使用默认选项或添加multiple属性可以同时显示多个选项。

静态控件：若需要在表单中将一行纯文本和label元素放置在同一行，为<p>元素添加.form-control-static类即可。

输入框焦点：为某些表单控件的默认outline样式移出，然后对:focus状态赋予box-shadow属性。也可为输入框设置disabled属性放置用户输入。为<fieldset>设置disabled属性，可以禁用<fieldset>中共包含的所有控件。 
只读输入框：readonly

Bootstrap对表单控件的校验状态，如error、warnning和success状态，都定义了样式。使用时，需添加.has-warning、.has-error或.has-success类到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block元素都将接受这些检验状态的样式。

通过.input-lg类似的类可以为空间设置高度，通过.col-lg-*类似的类可以为控件设置宽度。 
通过.form-group-lg或.form-group-sm类，为.form-horizontal包裹的label元素和表单控件快速设置尺寸。

用栅格系统中的列(column)包裹输入框或其任何父元素，都可很容易的为其设置宽度。

针对表单控件的“块”级辅助文本。

通过.btn-lg、.btn-sm或.btn-xs可以获得不同尺寸的按钮。通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级元素。

当按钮处于激活状态时，其表现为被按压下去。对于<button>元素，是通过:active状态实现的。对于<a>元素，是通过.active类实现的。还可以对button使用.active。

在Bootstrap V3中，通过为图片添加.img-responsive类可以让图片支持响应式布局(为图片设置了max-width:100%;和height:auto;)。

为图片设置形状： 
方形img-rounded   圆形img-circle   带边框的方形img-thumbnail

Bootstrap全局css的更多相关文章

  1. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  2. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  3. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  4. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  5. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  6. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  7. Bootstrap全局CSS样式之button和图片

    .btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...

  8. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  9. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

随机推荐

  1. java 多线程——一个定时调度的例子

    java 多线程 目录: Java 多线程——基础知识 Java 多线程 —— synchronized关键字 java 多线程——一个定时调度的例子 java 多线程——quartz 定时调度的例子 ...

  2. synchronized和static synchronized的比较

    群里讨论的一个问题,网上别人已经贴出了很详细的说明,这里补充记录下,后面加入个人测试代码. 起因:1月份的时候看群里讨论一道问题,问题内容如下: 一个日本作者-结成浩的<java多线程设计模式& ...

  3. Tomcat性能调优-让小猫飞奔[转]

      http://blog.csdn.net/lifetragedy/article/details/7708724   http://blog.csdn.net/lifetragedy/articl ...

  4. PowerPivot安装完成后创建网站或网站集报错解决办法

    根据上一篇“在现有 SharePoint 服务器上安装 PowerPivot for SharePoint”后,新建网站或网站集时报错,重新配置了一下PowerPivot For SharePoint ...

  5. 这是BUG吗？

    百度首页的控制台里,有一段招聘信息,想必大家都知道吧,点击里面的链接地址跳到了百度招聘页面然后就发现了这个:,如果这不是BUG的话,那用户体验真是不好

  6. 如何整治那些敢偷用你Wi-Fi的人

    我的邻居正在盗用我的WiFi,唔,对此我可以直接选择加密口令,或者…作为一名极客我也可以耍耍他.那么,我就从划分网络开始吧.我把网络划分成两部分,受信任部分和非受信任部分.受信任部分组成一个子网,而非 ...

  7. bzoj 2282: [Sdoi2011]消防

    #include<cstdio> #include<cstring> #include<iostream> #define N 600000 using names ...

  8. 一模 （6） day1

    第一题: 题目大意: 一个n的全排列A[i]是单峰的,当且仅当存在某个x使得A[1]<A[2]<...<A[x]>A[x+1]>...>A[n]. 试求 n 的单峰 ...

  9. C# JObject解析Json(多方法解析Json 二)

    下载Newtonsoft.Json,添加引用 记得using Newtonsoft.Json.Linq; //用JObject解析 string json = "{\"offlin ...

  10. DataGridView复选框实现单选功能（二）

    双击DataGridView进入事件 private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventA ...