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. 最小生成树练习1（克鲁斯卡尔算法Kruskal）

    今天刷一下水题练手入门,明天继续. poj1861 Network(最小生成树)新手入门题. 题意:输出连接方案中最长的单根网线长度(必须使这个值是所有方案中最小的),然后输出方案. 题解:本题没有直 ...

  2. C#WPF做FTP上传下载获取文件列表

    Xaml.cs: using Microsoft.Win32;using System;using System.Collections.Generic;using System.IO;using S ...

  3. EF Code First：实体映射，数据迁移，重构(1)

    一.前言 经过EF的<第一篇>,我们已经把数据访问层基本搭建起来了,但并没有涉及实体关系.实体关系对于一个数据库系统来说至关重要,而且EF的各个实体之间的联系,实体之间的协作,联合查询等也 ...

  4. 我们无法找到服务器加载工作簿的数据模型"的 SharePoint 网站，当您刷新 Excel 2013 工作簿中的数据透视表时出错

    假定您使用 Analysis Services 源在 Microsoft Excel 2013 中创建数据透视表.将 Excel 工作簿上载到 Microsoft SharePoint 网站中.当您尝 ...

  5. 解析网络json数据，模拟美团界面显示。

    <?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:android=&q ...

  6. 分批次从musql取数据，每次取1000条

    $t = new Gettags(); $num=$t->sum_tag(); $num=$num/1000; $flag_num=ceil($num); $flag_array=array() ...

  7. bzoj 2244: [SDOI2011]拦截导弹

    #include<cstdio> #include<iostream> #include<algorithm> #define M 100009 using nam ...

  8. 文件浏览器及数码相框 -2.3.1freetype_pc

    例子 #include <stdio.h> #include <string.h> #include <math.h> #include <ft2build. ...

  9. appjs desktop2

    var express = require('express');var path = require('path');var favicon = require('serve-favicon');v ...

  10. K2 BPM+Microsoft Dynamics CRM，妥妥的~

    啊~~~~七夕 ▼ 你比巴西少一xi 你比山西多四xi 对有情人来说今天就是情人节,对单身汪来说,今天就是个星期四. but,软件也是要秀恩爱的! ♥ 晒晒我家亲爱的CRM,它的全名叫Microsof ...