bootstrap 全局 CSS 样式

概览

布局容器

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

这两种 容器类不能互相嵌套

栅格系统

简介

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

排版

内联文本元素

<mark>标记文本 <del>删除线 <s>无用 <ins>插入 <u>下划线 <small>小号文本 <strong>强调 <em>斜体

<b>高亮 <i>技术词汇

对齐

<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">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

代码

表格

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

表单

基本实例

内联表单

水平排列的表单

被支持的控件

输入框

文本域

多选和单选框

下拉列表（select）

按钮

预定义样式

尺寸

按钮类

为 <a>、<button> 或 <input> 元素应用按钮类。

图片

图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

原文地址