首页 > 代码库 > Bootstrap CSS 描述
Bootstrap CSS 描述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--定于内容，和内容的编码格式-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--为了确保适当的绘制与放缩，需要在<head>中添加viewport元数据标签-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--该标签的属性 user-scalabel=no 可以禁止页面放缩，使其变为滚动式
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-->
<link rel="stylesheet" href="http://www.mamicode.com/resources/bootstrap/css/bootstrap.min.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://www.mamicode.com/resources/bootstrap/jquery.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/resources/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!--bootstrap 排版 链接样式设置了基本的全局样式-->
<!--bootstrap为页面内容和栅格系统包裹一个。container容器，bootstrap总共提供了两个容器，由于padding等属性的原因，他们之间不能相互嵌套-->
<!--container类用于固定宽度并支持响应式布局的容器 ,container-fluid类似与宽度100%，占据全部视图的容器-->
<div class="container">
<!--栅格系统是Bootstrap提供的一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局-->
<!--“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。-->
<div class="row">
<!-- xs:超小，sm:小屏，md:中屏，lg:大屏, col:表示列-->
<div class="col-md-1 col-sm-1">.col-md-1</div>
<div class="col-md-2 col-sm-2">.col-md-2</div>
<div class="col-md-3 col-sm-3">.col-md-3</div>
<div class="col-md-4 col-sm-4">.col-md-4</div>
<div class="col-md-2 col-sm-2">.col-md-2</div>
</div>
<div class="row">
<!--为了更好的适应view-->
<div class="col-md-8 col-lg-8">.col-md-8</div>
<div class="col-md-4 col-lg-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-5 col-xs-5">.col-md-5</div>
<div class="col-md-6 col-xs-6">.col-md-6</div>
<div class="col-md-1 col-xs-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-7">.col-md-7
<div class="row">
<div class="col-md-11">
row的内部嵌套
</div>
<div class="col-md-1">row的内部嵌套</div>
</div>
</div>
<div class="col-md-5">.col-md-5</div>
</div>
<!--通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。-->
<div class="row">
<div class="col-lg-pull-10">pull</div>
<div class="col-lg-push-2">push</div>
</div>
<!--在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。-->
<h1>h1. Bootstrap heading
<small>Secondary text</small>
</h1>
<h2>h2. Bootstrap heading
<small>Secondary text</small>
</h2>
<h3>h3. Bootstrap heading
<small>Secondary text</small>
</h3>
<h4>h4. Bootstrap heading
<small>Secondary text</small>
</h4>
<h5>h5. Bootstrap heading
<small>Secondary text</small>
</h5>
<h6>h6. Bootstrap heading
<small>Secondary text</small>
</h6>
<!--页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。
另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。-->
<div>
<!--对于被删除的文本，使用标签<del>-->
<del>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus</del>
<!--着重 通过增加 font-weight 值强调一段文本。可以使用标签<strong-->
et magnis <strong>dis parturient</strong> montes,
<!--用倾斜来强调的文本，使用标签<em>-->
<em>nascetur ridiculus mus.</em>
Nullam id dolor id nibh ultricies vehicula.
<!--用于突出文本中某些文字,使用标签<mark>-->
Cum sociis natoque
<mark>penatibus</mark>
et magnis dis parturient montes,
<!--对于没有用的文本，使用标签<s>-->
<s> nascetur ridiculus mus.</s> Donec ullamcorper nulla non metus auctor fringilla.
<!--对于插入的文本，使用标签<ins>-->
<ins>Duis mollis, est non commodo luctus</ins>
<!--在中心内容中 添加lead类让段落突出显示-->
<p class="lead">nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<!--为文本添加下划线，使用标签<u>-->
<u>Donec ullamcorper nulla non metus</u>
auctor fringilla.</p>
<!--在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。-->
<b>The following snippet of text is rendered as italicized text.</b><i>The following talicized text.</i>
</div>
<div>
<!--通过文本对其齐，可以文本对齐-->
<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>
<!--Bootstrap的缩语 当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，
外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但完整的内容需要包含在 title 属性。-->
<!--基本缩语，如想看完整的内容可把鼠标悬停在缩略语上, 但需要为 <abbr> 元素设置 title属性，title属性为缩语的完整内容。-->
<abbr title="看不到我，看不到我！">attr</abbr>
<!--首字母缩语，为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。-->
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<!--Bootstrap中的引用-->
<!--在你的文档中引用其他来源的内容。-->
<!--默认样式的引用将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。-->
<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 class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<!--有序列表，排列顺序无关的要紧的元素-->
<ul>
<li></li>
</ul>
<!--顺序至关重要的一组元素。-->
<ol>
<li></li>
</ol>
<!--无样式列表移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。
这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。-->
<ul class="list-unstyled">
<li></li>
</ul>
<!--内联列表，通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。-->
<ul class="list-inline">
<li>one</li>
<li>tow</li>
<li>three</li>
</ul>
<!--带有描述的短语列表-->
<dl>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
</dl>
<!--水平排列的描述.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。-->
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
</dl>
<!--自动截断通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。-->
<dl class="text-overflow dl-horizontal">
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.A description list is perfect for defining terms.A
description list is perfect for defining terms.A description list is perfect for defining terms.A
description list is perfect for defining terms.A description list is perfect for defining terms.A
description list is perfect for defining terms.A description list is perfect for defining terms.A
description list is perfect for defining terms.A description list is perfect for defining terms.
</dd>
<dt>Description lists</dt>
<dd> A description list is perfect for defining terms.</dd>
</dl>
</div>
<div>
<!--代码-->
<!--通过 <code> 标签包裹内联样式的代码片段。-->
For example, <code><section></code> should be wrapped as inline.
<!--通过 <kbd> 标签标记用户通过键盘输入的内容。=-->
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<!--多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。-->
<!--还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。-->
<pre class="pre-scrollable"><p>Sample text here...</p></pre>
</div>
<!--表格，表格的基本类有.table:基本表格样式、
.table table-striped：通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。而这一功能不被 Internet Explorer 8 支持。
.table table-bordered:通过 .table-bordered 类为表格和其中的每个单元格增加边框。
.table table-hover:通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
.table table-condensed:通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
-->
<table class="table table-striped">
</table>
<!--响应式表格将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。-->
<div class="table-responsive">
<table class="table">
...
</table>
</div>
<!--Bootstrap的表单-->
<!--单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select>
元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。-->
<div class="form-group">
<label>用户名称：</label>
<input class="form-control"/>
<label>用户密码：</label>
<input class="form-control"/>
</div>
<!--为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。
只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
需要手动设置宽度
在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。
在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。
-->
<div class="from">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</body>
</html>
待续...
Bootstrap CSS 描述