bootstrap基本整理<1>
@[基本实例|基于bootstrap框架]
bootstrap简介
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的
boostrap CSS
bootsrap概述
bootstrap设定文档类型
<!DOCTYPE>
<html>
...
</html>
移动设备优先
为了更好的适应移动设备,需要添加
<viewport meta>
标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
- width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
- initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
- 在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。
- 通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
bootstrap网格系统
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
bootstrap网格系统工作原理
- 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
- 使用行来创建列的水平组。
- 内容应该放置在列内,且唯有列可以是行的直接子元素。
- 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。
<!--网格系统基本结构-->
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
</div>
列偏移
偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如,.col-xs-* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。
为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
列嵌套
为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。
bootstrap排版
标题
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
内联子标题
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
- 为了给段落添加强调文本,则可以添加 class=”lead”,这将得到更大更粗、行高更高的文本
- HTML 的默认强调标签
<small>
(设置文本为父文本大小的 85%)、<strong>
(设置文本为更粗的文本)、<em>
(设置文本为斜体)- 使用
<address>
标签,您可以在网页上显示联系信息。由于<address>
默认为 display:block;- 可以在任意的 HTML 文本旁使用默认的
<blockquote>
。其他选项包括,添加一个<small>
标签来标识引用的来源,使用 class .pull-right 向右对齐引用
列表
- 有序列表:有序列表是指以数字或其他有序字符开头的列表。
- 无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果您不想显示这些着重号,您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
- 定义列表:在这种类型的列表中,每个列表项可以包含
<dt>
和<dd>
元素。<dt>
代表 定义术语,就像字典,这是被定义的属于(或短语)。接着,<dd>
是<dt>
的描述。您可以使用 class dl-horizontal 把<dl>
行中的属于与描述并排显示。
更多排版类
bootstrap代码
Bootstrap 允许您以两种方式显示代码:
- 第一种是<code>
标签。如果您想要内联显示代码,那么您应该使用<code>
标签。
- 第二种是<pre>
标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用<pre>
标签。
更多实例
bootstrap表格
标签 | 描述 |
---|---|
<table> | 为表格添加基础样式。 |
<thead> | 表格标题行的容器元素(<tr> ),用来标识表格列。 |
<tbody> | 表格主体中的表格行的容器元素(<tr> )。 |
<tr> | 一组出现在单行上的表格单元格的容器元素(<td> 或 <th> )。 |
<td> | 默认的表格单元格。 |
<th> | 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。 |
<caption> | 关于表格存储内容的描述或总结。 |
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>