zoukankan html css js c++ java

BootStarp

Bootstrap 简介

什么是 Bootstrap？

Bootstrap是最受欢迎的HTML，CSS和JS框架，用于开发响应式布局，移动设备优先的WEB项目。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

为什么使用 Bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

实例:

View Code

Bootstrap 环境安装

Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。

下载 Bootstrap

您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：

您会看到两个按钮：

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。

由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。

本教程编写时，使用的是最新版（Bootstrap 3）。

文件结构

预编译的 Bootstrap

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

这是最基本的Bootstrap组织形式：未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。

Bootstrap 源代码

如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：

less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

引入Bootstrap相关的css、js

<!-- Bootstrap核心CSS文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
<!-- jQuery文件，在bootstrap.min.js之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap核心JavaScript文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

Bootstrap依赖jQuery
请注意，所有 JavaScript 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入，jQuery版本需大于或等于1.9.0。点击此可以查看Bootstrap所对应的jQuery版本。

Bootstrap CSS 概览

在这一章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。

HTML 5 文档类型（Doctype）

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。因此，请在使用 Bootstrap 项目的开头包含下面的代码段。

<!DOCTYPE html>
<html>
....
</html>

如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），您可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不能通过 W3C 标准的验证。

移动设备优先

移动设备优先是 Bootstrap 3 的最显著的变化。

在之前的 Bootstrap 版本中（直到 2.x），您需要手动引用另一个 CSS，才能让整个项目友好的支持移动设备。

现在不一样了，Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。

Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。

通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

接下来让我们看下这个 class 包含了哪些 css 属性。

在下面的代码中，可以看到img-responsive class 为图像赋予了 max- 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

.img-responsive {
  display: inline-block;
  height: auto;
  max- 100%;
}

这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。

设置 height:auto，相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

全局显示、排版和链接

基本的全局显示

Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。

请看下面有关 body 的设置：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

第一条规则设置 body 的默认字体样式为 "Helvetica Neue", Helvetica, Arial, sans-serif。

第二条规则设置文本的默认字体大小为 14 像素。

第三条规则设置默认的行高度为 1.428571429。

第四条规则设置默认的文本颜色为 #333333。

最后一条规则设置默认的背景颜色为白色。

排版

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

链接样式

通过属性 @link-color 设置全局链接的颜色。

对于链接的默认样式，如下设置：

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

所以，当鼠标悬停在链接上，或者点击过的链接，颜色会被设置为 #2a6496。同时，会呈现一条下划线。

除此之外，点击过的链接，会呈现一个颜色码为 #333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽，且对于基于 webkit 浏览器有一个 -webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为 -2 像素。

以上所有这些样式都可以在 scaffolding.less 中找到。

避免跨浏览器的不一致

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。

Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

容器（Container）

<div class="container">
  ...
</div>

Bootstrap 3 的 container class 用于包裹页面上的内容。让我们一起来看看 bootstrap.css 文件中的这个 .container class。

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

通过上面的代码，把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。

请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。

.container:before,
.container:after {
  display: table;
  content: " ";
}

这会产生伪元素。设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。

如果 conteneditable 属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。

.container:after {
  clear: both;
}

它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。

Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。

@media (min- 768px) {
   .container {
       750px;
}

Bootstrap 网格系统（栅格系统）

本章节我们将讲解 Bootstrap 的网格系统（Grid System）。

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

什么是网格（Grid）？

在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

什么是 Bootstrap 网格系统（Grid System）？

Bootstrap 官方文档中有关网格系统的描述：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

移动设备优先策略

内容
- 决定什么是最重要的。
布局
- 优先设计更小的宽度。
- 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
渐进增强
- 随着屏幕大小的增加而添加元素。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min- @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min- @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min- @screen-lg-min) { ... }

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max- @screen-xs-max) { ... }
@media (min- @screen-sm-min) and (max- @screen-sm-max) { ... }
@media (min- @screen-md-min) and (max- @screen-md-max) { ... }
@media (min- @screen-lg-min) { ... }

媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：

让我们来看下面这行代码：

@media (min- @screen-sm-min) and (max- @screen-sm-max) { ... }

对于所有带有 min- @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列 #	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes

基本的网格结构

下面是 Bootstrap 网格的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

让我们来看几个简单的网格实例：

实例：堆叠的水平
实例：中型和大型设备
实例：手机、平板电脑、台式电脑

响应式的列重置

以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。

为了解决这个问题，可以使用 .clearfix class和响应式实用工具来解决，如下面实例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 响应式的列重置</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
         </p>
      </div>

      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
         </p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
         </p>
      </div>
   </div>
</div>

</body>
</html>

View Code

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

在下面的实例中，我们有 <div class="col-md-6">..</div>，我们将使用 .col-md-offset-3 class 来居中这个 div。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 偏移列</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row" >
      <div class="col-xs-6 col-md-offset-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
         </p>
      </div>

   </div>
</div>

</body>
</html>

View Code

结果如下所示：

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

在下面的实例中，布局有两个列，第二列被分为两行四个盒子。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 嵌套列</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第一列</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第二列 - 分为四个盒子</h4>
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                  assumenda minim organic quis.
               </p>
            </div>
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
               </p>
            </div>
         </div>

         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat.
               </p>
            </div>   
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
         </div>

      </div>

   </div>

</div>

</body>
</html>

View Code

结果如下所示：

列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 列排序</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div><br>
   <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8 col-md-pull-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div>

</div>

</body>
</html>

View Code

结果如下所示：

 1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title></title>
  5     <script src="../js/jquery.min.js" type="text/javascript"></script>
  6     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
  7     <script src="../js/bootstrap.min.js" type="text/javascript"></script>
  8     <style type="text/css">
  9         #bjys{
 10             background-color: #abcdef;
 11         }
 12     </style>
 13 </head>
 14 <body>
 15 <div class="container">
 16 <!--按钮示例-->
 17 <button class="btn btn-default">button</button>
 18 <button class="btn btn-primary">提交按钮</button>
 19 <button class="btn btn-success">成功按钮</button>
 20 <button class="btn btn-info">信息按钮</button>
 21 <button class="btn btn-warning">警告按钮</button>
 22 <button class="btn btn-danger">危险按钮</button>
 23 <button class="btn btn-link">表现链接按钮</button>
 24 <button class="btn btn-lg">大一点按钮</button>
 25 <button class="btn btn-sm">小一点按钮</button>
 26 <button class="btn btn-xs">最小按钮</button>
 27 <button class="btn active">激活状态按钮</button>
 28 <button class="btn disabled">无效按钮</button>
 29 <button class="btn disabled btn-danger">多种按钮样式混用</button>
 30 <br />
 31 
 32 
 33 <!-- 表格示例 -->
 34 <table class="table table-striped">
 35     <h3>斑马线表格</h3>
 36     <th>ID</th>
 37     <th>Name</th>
 38     <th>PWd</th>
 39     <tr>
 40         <td>001</td>
 41         <td>number1</td>
 42         <td>123456</td>
 43     </tr>
 44     <tr>
 45         <td>002</td>
 46         <td>number2</td>
 47         <td>123456</td>
 48     </tr>
 49 </table>
 50 
 51 <table class="table table-bordered">
 52     <h3>带边框表格</h3>
 53     <th>ID</th>
 54     <th>Name</th>
 55     <th>PWd</th>
 56     <tr>
 57         <td>001</td>
 58         <td>number1</td>
 59         <td>123456</td>
 60     </tr>
 61     <tr>
 62         <td>002</td>
 63         <td>number2</td>
 64         <td>123456</td>
 65     </tr>
 66 </table>
 67 
 68 <table class="table table-hover">
 69     <h3>带鼠标悬停效果表格</h3>
 70     <th>ID</th>
 71     <th>Name</th>
 72     <th>PWd</th>
 73     <tr>
 74         <td>001</td>
 75         <td>number1</td>
 76         <td>123456</td>
 77     </tr>
 78     <tr>
 79         <td>002</td>
 80         <td>number2</td>
 81         <td>123456</td>
 82     </tr>
 83 </table>
 84 
 85 <table class="table table-condensed">
 86     <h3>上下间隔紧凑效果表格</h3>
 87     <th>ID</th>
 88     <th>Name</th>
 89     <th>PWd</th>
 90     <tr>
 91         <td>001</td>
 92         <td>number1</td>
 93         <td>123456</td>
 94     </tr>
 95     <tr>
 96         <td>002</td>
 97         <td>number2</td>
 98         <td>123456</td>
 99     </tr>
100 </table>
101 
102 <table class="table table-striped table-bordered table-hover  table-condensed">
103     <h3>带多种混合效果表格</h3>
104     <th>ID</th>
105     <th>Name</th>
106     <th>PWd</th>
107     <tr>
108         <td>001</td>
109         <td>number1</td>
110         <td>123456</td>
111     </tr>
112     <tr>
113         <td>002</td>
114         <td>number2</td>
115         <td>123456</td>
116     </tr>
117 </table>
118 
119 <table class="table">
120     <h3>被激活,成功，信息，危险，警告状态表格</h3>
121     <th>ID</th>
122     <th>Name</th>
123     <th>PWd</th>
124     <tr class="active">
125         <td>001</td>
126         <td>number1</td>
127         <td>123456</td>
128     </tr>
129     <tr class="success">
130         <td>002</td>
131         <td>number2</td>
132         <td>123456</td>
133     </tr>
134     <tr class="info">
135         <td>003</td>
136         <td>number3</td>
137         <td>123456</td>
138     </tr>
139     <tr class="danger">
140         <td>004</td>
141         <td>number4</td>
142         <td>123456</td>
143     </tr>
144     <tr class="warning">
145         <td>005</td>
146         <td>number5</td>
147         <td>123456</td>
148     </tr>
149 </table>
150 
151 <!-- 图片示例 -->
152 <h3>圆角图片</h3>
153 <img class="img img-rounded" src="../images/img3.jpg" width="200px" height="200px">
154 <h3>圆形图片</h3>
155 <img class="img img-circle" src="../images/img1.jpg">
156 <h3>缩略图图片</h3>
157 <img class="img img-thumbnail" src="../images/img4.jpg" width="200px" height="200px">
158 
159 <!-- 表单示例 -->
160 <form class="form-control">
161     <input class="form-control" type="text" name="name" placeholder="name" width="300px">
162     <input class="form-control" type="password" name="pwd" placeholder="password" width="300px">
163     <textarea name="textarea" class="form-control" cols="10">
164         文本域...
165     </textarea>
166     <select name="selt" class="form-control">
167         <option>选项一</option>
168         <option>选项二</option>
169         <option>选项三</option>
170         <option>选项四</option>
171     </select>
172     <input type="radio" name="out" class="">
173     <input type="radio" name="int" class="">
174     <input type="checkbox" name="list">
175     <input type="checkbox" name="list">
176     <button class="btn btn-primary">提交</button>
177 </form>
178 
179 <!-- 文本 -->
180 <span class="text-muted">Never try ,never know 浅灰色文本</span>
181 <span class="text-primary">Never try ,never know 强调文本</span>
182 <span class="text-info">Never try ,never know  提示信息文本</span>
183 <span class="text-success">Never try ,never know 操作成功文本</span>
184 <span class="text-warning">Never try ,never know 警告文本</span>
185 <span class="text-danger">Never try ,never know 危险提示文本</span>
186 
187 <!-- 基本样式 背景 -->
188 <p class="bg-primary">强调</p>
189 <p class="bg-success">操作成功</p>
190 <p class="bg-info">提示文字</p>
191 <p class="bg-warning">警告语</p>
192 <p class="bg-danger">危险语</p>
193 
194 <!-- 其它样式 -->
195 <!-- <button class="close" aria-hidden="true"></button>
196 <button class="caret"></button> -->
197 <div class="pull-left">文字靠左边</div>
198 <div class="pull-right">文字靠右边</div>
199 <!-- <div class="show">show</div>
200 <div class="hidden">hidden</div>
201 <div class="invisible">invisible</div> -->
202 <br />
203 
204 <!-- 栅格布局 -->
205 <div class="row">
206     <div id="bjys" class="col-xs-6">66分</div>
207     <div id="bjys" class="col-xs-6">66分</div>    
208 </div>
209 <div class="row">
210     <div id="bjys" class="col-xs-3">33分</div>
211     <div id="bjys" class="col-xs-4">44分</div>    
212     <div id="bjys" class="col-xs-6">55分</div>
213 </div>
214 
215 </div>
216 <!-- 下拉菜单 -->
217 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
218   <li><a tabindex="-1" href="#">功能一</a></li>
219   <li><a tabindex="-1" href="#">功能二</a></li>
220   <li><a tabindex="-1" href="#">功能三</a></li>
221   <li class="divider"></li>
222   <li><a tabindex="-1" href="#">功能四</a></li>
223 </ul>
224 
225 <!-- 导航 -->
226 <div class="navbar">
227   <div class="navbar-inner">
228     <a class="brand" href="#">Title</a>
229     <ul class="nav">
230       <li class="active"><a href="#">首页</a></li>
231       <li><a href="#">功能一</a></li>
232       <li><a href="#">功能二</a></li>
233     </ul>
234   </div>
235 
236 
237 <!-- 按钮组 -->
238 <h3>单一按钮组</h3>
239 <div class="btn-group">
240   <button class="btn">Left</button>
241   <button class="btn">Middle</button>
242   <button class="btn">Right</button>
243 </div>
244 
245 <!-- 多维按钮 -->
246 <h3>多维按钮</h3>
247 <div class="btn-toolbar">
248     <div class="btn-group">
249         <button class="btn">按钮一</button>
250         <button class="btn">按钮一</button>
251         <button class="btn">按钮一</button>
252     </div>
253     <div class="btn-group">
254         <button class="btn">按钮四</button>
255         <button class="btn">按钮五</button>    
256     </div>
257     <button class="btn">按钮六</button>
258 </div>
259 
260 <h3>垂直按钮组</h3>
261 <div class="btn-group btn-group-vertical">
262         <button class="btn">按钮一</button>
263         <button class="btn">按钮一</button>
264         <button class="btn">按钮一</button>
265 </div>
266 
267 <!-- 按钮式下拉菜单 -->
268 <h3>按钮式下拉菜单</h3>
269 <div class="btn-group">
270   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
271     Action
272     <span class="caret"></span>
273   </a>
274   <ul class="dropdown-menu">
275     <!-- dropdown menu links -->
276   </ul>
277 </div>
278 
279 <h3>分列式下拉菜单</h3>
280 <div class="btn-group">
281   <button class="btn">Action</button>
282   <button class="btn dropdown-toggle" data-toggle="dropdown">
283     <span class="caret"></span>
284   </button>
285   <ul class="dropdown-menu">
286     <!-- dropdown menu links -->
287   </ul>
288 </div>
289 
290 <h3>向上弹出式菜单</h3>
291 <div class="btn-group dropup">
292   <button class="btn">Dropup</button>
293   <button class="btn dropdown-toggle" data-toggle="dropdown">
294     <span class="caret"></span>
295   </button>
296   <ul class="dropdown-menu">
297     <!-- dropdown menu links -->
298   </ul>
299 </div>
300 
301 <!-- 导航 -->
302 <h3>标签页导航</h3>
303 <ul class="nav nav-tabs">
304     <li class="active">
305         <a href="#">首页</a>
306       </li>
307       <li><a href="#">功能一</a></li>
308       <li><a href="#">功能二</a></li>
309 </ul>
310 
311 <div class="tabbable"> <!-- Only required for left/right tabs -->
312   <ul class="nav nav-tabs">
313     <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
314     <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
315   </ul>
316   <div class="tab-content">
317     <div class="tab-pane fade active" id="tab1">
318       <p>I'm in Section 1.</p>
319     </div>
320     <div class="tab-pane fade" id="tab2">
321       <p>Howdy, I'm in Section 2.</p>
322     </div>
323   </div>
324 </div>
325 
326 <h3>基本pills导航</h3>
327 <ul class="nav nav-pills">
328     <li class="active">
329         <a href="#">首页</a>
330       </li>
331       <li><a href="#">功能一</a></li>
332       <li><a href="#">功能二</a></li>
333       <li class="disabled"><a href="#">禁用状态功能</a></li>
334 </ul>
335 
336 <br />
337 <!-- 表单 -->
338 <h3>表单</h3>
339 <form class="navbar-form">
340   <input type="text" class="span2">
341   <button type="submit" class="btn">Submit</button>
342 </form>
343 
344 <h3>搜索表单</h3>
345 <form class="navbar-search pull-left">
346   <input type="text" class="search-query" placeholder="Search">
347 </form>
348 <hr>
349 <h3>响应式导航条</h3>
350 <div class="navbar">
351   <div class="navbar-inner">
352     <div class="container">
353  
354       <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
355       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
356         <span class="icon-bar"></span>
357         <span class="icon-bar"></span>
358         <span class="icon-bar"></span>
359       </a>
360  
361       <!-- Be sure to leave the brand out there if you want it shown -->
362       <a class="brand" href="#">Project name</a>
363  
364       <!-- Everything you want hidden at 940px or less, place within here -->
365       <div class="nav-collapse collapse">
366         <!-- .nav, .navbar-search, .navbar-form, etc -->
367       </div>
368  
369     </div>
370   </div>
371 </div>
372 </div>
373 </body>
374 </html>

BootStarp基本标签使用

查看全文

相关阅读:
hadoop分布式搭建
 朴素贝叶斯算法
 python数组并集交集补集
 VMware Workstation下安装Linux
决策树ID3算法
 微信小程序开发测试
 筛法求素数质数
 STL——heap结构及算法
 STL——序列式容器
 使用位图字体工具BMFont从图片生成自定义字体

原文地址：https://www.cnblogs.com/gongxu/p/7754086.html

BootStarp

Bootstrap 简介

什么是 Bootstrap？

历史

为什么使用 Bootstrap？

Bootstrap 包的内容

Bootstrap 环境安装

下载 Bootstrap

文件结构

预编译的 Bootstrap

Bootstrap 源代码

Bootstrap依赖jQuery请注意，所有 JavaScript 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入，jQuery版本需大于或等于1.9.0。点击此可以查看Bootstrap所对应的jQuery版本。

Bootstrap CSS 概览

HTML 5 文档类型（Doctype）

移动设备优先

响应式图像

全局显示、排版和链接

基本的全局显示

排版

链接样式

避免跨浏览器的不一致

容器（Container）

Bootstrap 网格系统（栅格系统）

什么是网格（Grid）？

什么是 Bootstrap 网格系统（Grid System）？

移动设备优先策略

Bootstrap 网格系统（Grid System）的工作原理

媒体查询

网格选项

网格选项

基本的网格结构

响应式的列重置

偏移列

嵌套列

结果如下所示：

列排序

Bootstrap依赖jQuery
请注意，所有 JavaScript 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入，jQuery版本需大于或等于1.9.0。点击此可以查看Bootstrap所对应的jQuery版本。