BootStrap应用开发学习入门

2019-11-29
jQuery
前端技术

BootStrap应用开发学习入门

2019-11-29

[TOC]

0x00 前言简介

什么是BootStrap?
答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产品。

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它是一个简洁、直观、强悍的前端开发框架，可以让web开发更迅速、简单。

BootStrap有什么作用和特点?
作用:为开发人员创建接口提供了一个简洁统一的解决方案,包含了功能强大的内置组件，易于定制( Web 的定制)。

特点:

简单容易上手，开源产品，提高开发人员的工作效率
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
响应式设计(重点): Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机;

BootStrap包含内容(主要包含):

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构
CSS样式: BS中已经定义好了一套CSS的样式表
布局组件: 用于创建图像、下拉菜单、导航、警告框、弹出框等等
JS插件: BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

BS 环境版本分类:

可视化Boostrap开发:https://www.runoob.com/try/bootstrap/layoutit/

Bootstrap 环境安装:

Bootstrap: Bootstrap CSS、JavaScript 和字体的预编译的压缩版本.
Source: 最新的 Bootstrap LESS 和 JavaScript 源代码.
CDN外联Link

点击阅读完整原文

[TOC]

0x00 前言简介

什么是BootStrap?
答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产品。

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它是一个简洁、直观、强悍的前端开发框架，可以让web开发更迅速、简单。

BootStrap有什么作用和特点?
作用:为开发人员创建接口提供了一个简洁统一的解决方案,包含了功能强大的内置组件，易于定制( Web 的定制)。

特点:

简单容易上手，开源产品，提高开发人员的工作效率
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
响应式设计(重点): Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机;

BootStrap包含内容(主要包含):

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构
CSS样式: BS中已经定义好了一套CSS的样式表
布局组件: 用于创建图像、下拉菜单、导航、警告框、弹出框等等
JS插件: BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

BS 环境版本分类:

可视化Boostrap开发:https://www.runoob.com/try/bootstrap/layoutit/

Bootstrap 环境安装:

Bootstrap: Bootstrap CSS、JavaScript 和字体的预编译的压缩版本.
Source: 最新的 Bootstrap LESS 和 JavaScript 源代码.

CDN外联Link

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

BS 文件结构

预编译的BootStrap

#看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）
C:\USERS\WEIYIGEEK\DOWNLOADS\BOOTSTRAP-3.3.7-DIST\BOOTSTRAP-3.3.7-DIST
├─css
│      bootstrap-theme.css
│      bootstrap-theme.css.map
│      bootstrap-theme.min.css
│      bootstrap-theme.min.css.map
│      bootstrap.css
│      bootstrap.css.map
│      bootstrap.min.css
│      bootstrap.min.css.map
├─fonts  #包含了 Glyphicons 的字体一个可选的 Bootstrap 主题
│      glyphicons-halflings-regular.eot
│      glyphicons-halflings-regular.svg
│      glyphicons-halflings-regular.ttf

│      glyphicons-halflings-regular.woff
│      glyphicons-halflings-regular.woff2
└─js
  bootstrap.js
  bootstrap.min.js
  npm.js

Bootstrap 源代码

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

BootStrap需求样例
描述:使用BS框架需要引入的标签以及CSS和JS文件;

<!-- HTML5 文档类型（Doctype） -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 需求1.包含头部信息用于适应不同设备 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BootStrap Rquirement Demo</title>
  <!-- 需求2.包含 bootstrap 样式表 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
</head>
<body>
  <div class="container">
    <div class="jumbotron">
        <h1>BootStrap 使用案例</h1>
        <p>我的第一个BootStrap页面: Hello World!</p>
        <p>
          <a class="btn btn-primary btn-lg" href="https://weiyigeek.club">My Blog </a>
        </p>
    </div>
  </div>

<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
<!-- 需求3: 包含 jQuery 库请务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 需求4: 合并了 Bootstrap JavaScript 插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

0x01 BS CSS样式分类

描述:BS使用了一些 HTML5 元素和 CSS 属性满足一些新特性:

BS设计目标是移动设备优先然后才是桌面设备；
BS全局显示、排版和链接
响应式布局以及图像响应式
BS支持跨浏览器一致性:使用了 Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性
BS支持 Internet Explorer 8 及更高版本的 IE 浏览器

(1) 移动设备优先策略

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

(2) meta 源标签
viewport meta 标签 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">
<!--
  1.width 属性控制设备的宽度; 假设您的网站将被带有不同屏幕分辨率的设备浏览 device-width 可以确保它能正确呈现在不同设备上。
  2.initial-scale=1.0 属性确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
  3.user-scalable=no  属性可以禁用其缩放（zooming）功能。 
  4.maximum-scale=1.0  属性用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
-->

补充说明:

<meta charset="UTF-8">
<meta http-equiv="refresh" content="5;url=" />
<link rel="copyright" href="copyright.html" 　/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="150 words" />
<meta name="keywords" content="your tags" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。
 -->
<meta name="robots" content="index,follow" />
<meta name="author" content="author name" />
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />
<!-- 启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。
content的值为default | black | black-translucent 。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 忽略数字自动识别为电话号码 -->
<meta content="telephone=no" name="format-detection" />
<!-- 忽略识别邮箱 -->
<meta content="email=no" name="format-detection" />
<meta name="apple-itunes-app" content="app-id=myAppStoreID, <br>affiliate-data=myAffiliateData, app-argument=myURL" />
<!-- 添加智能 App 广告条 Smart App Banner：<br>告诉浏览器这个网站对应的app，并在页面上显示下载banner:<br>https://developer.apple.com/library/ios/documentation/AppleApplications/<br>Reference/SafariWebContent/PromotingAppswithAppBanners/<br>PromotingAppswithAppBanners.html -->
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

排版

(1) 全局显示、排版和链接
BS基本全局显示:

body {
  margin: 0; /*来移除 body 的边距*/
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429; /*行高度*/
  color: #333333;
  background-color: #ffffff;
}

BS排版您可以创建标题、段落、列表及其他内联元素。

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。
强调使用的class类名

/**排版强调**/
.lead: 使段落突出显示
.small: 设定小文本 (设置为父文本的 85% 大小)
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）


/**文本对齐位置**/
.text-left: 文本向左
.text-center: 文本居中
.text-right: 文本向右
.text-justify: 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap: 段落中超出屏幕部分不换行
.pull-left: 元素向左
.pull-center: 元素居中
.pull-right: 元素向右
.blockquote-reverse: 设定引用右对齐


/**字符显示**/
.text-lowercase: Lowercased text（小写文本）
.text-uppercase: Uppercased text（大写文本）  
.text-capitalize: Capitalized text（首字母大写文本）
.initialism: 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.pre-scrollable: 使 <pre> 元素可滚动，代码块区域最大高度为340px 一旦超出这个高度,就会在Y轴出现滚动条

/**列表**/
.list-unstyled: 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)
.list-inline: 将所有列表项放置同一行
.dl-horizontal: 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例

基础示例:

<!-- 内联子标题 -->
<h1>我是标题1 h1. 
<small>我是副标题1 h1, 得到一个字号更小的颜色更浅的文本</small>
<p>这是一个普通的段落。</p>
<p class="small">这是个文字更小。</p>
</h1>

<!-- 引导主体副本 -->
<h2>引导主体副本</h2>
<p class="lead">为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本</p>

<!-- 
强调 
HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。
-->
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>


<!--缩写的标记 -->
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>


<!-- 注意:在HTML5中建议使用语义标签，比如下面的公司地址（Address）和email 地址 -->
<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a>
</address>


<!--引用（Blockquote）-->
<blockquote>
  <p>这是一个带有源标题的引用。</p>
  <small>Someone famous in <cite title="Source Title">Source Title(引用)</cite></small>
</blockquote>
<blockquote class="pull-right">
  这是一个向右对齐的引用。
  <small>Someone famous in <cite title="Source Title">Source Title(引用)</cite></small>
</blockquote>

页面标题（Page Header）
它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。

.page-header: 文档头部标题

基础示例:

<div class="page-header">
    <h1>
      标题
      <small>子标题</small>
    </h1>
  </div>
  <!-- 这里有一段分割-->
  <p>我是一段内容</p>

<div class="page-header">
    <h1>页面标题实例
        <small>子标题</small>
    </h1>
</div>
<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>

列表在BS中支持有序列表、无序列表和定义列表。

有序列表：有序列表是指以数字或其他有序字符开头的列表。
无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。
- 如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。
- 您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
定义列表：在这种类型的列表中，每个列表项可以包含 dt 和 dd 元素。
- dt 代表定义术语，就像字典。接着dd 是dt 的描述。
- .dl-horizontal 可以让 dl 内的短语及其描述排在一行。开始是像 dl 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>
水平的定义列表
 dl  标签定义了定义列表（definition list）
 dt （定义列表中的项目）
 dd （描述列表中的项目）
</h4>
<dl class="dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

(4) 容器
容器(Container): 固定宽度并支持响应式布局的容器<div class="container"></div>, 占据全部视口（viewport）采用container-fluid类;

.container {
/**
1.左右内边距15px ，默认情况下容器是不可嵌套的
2.左右外边距（margin-right、margin-left）交由浏览器决定
*/
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

/*
:before 伪元素防止上边距崩塌
:after 伪元素清除浮动。
*/
.container:before,
.container:after {
  display: table;
  content: " ";
}

/*创建了一个伪元素，并确保了所有的容器包含所有的浮动元素*/
.container:after {
  clear: both;
}

container 与 container-fluid类区别说明:

（0）.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

（1）.container类出现内边距和外边距，.container-fluid类没有它是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。。

（2）.container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。

(5) 超大屏幕 Jumbotron

超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）

1	.jumbotron #容器 <div>除了更大的 <h1>，字体粗细 font-weight 被减为 200。

基础示例:

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>重置浏览器窗口大小查看效果！</p> 
</div>

<div class="container">
   <div class="jumbotron">
        <h1>欢迎登陆页面！</h1>
        <p>这是一个超大屏幕（Jumbotron）的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
        学习更多</a>
      </p>
   </div>
</div>

<!--为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class-->
<div class="jumbotron">
  <div class="container">
    <h1>欢迎登陆页面！</h1>
    <p>这是一个超大屏幕（Jumbotron）的实例。</p>
    <p><a class="btn btn-primary btn-lg" role="button">
      学习更多</a>
    </p>
  </div>
</div>

Grid 网格

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

什么是网格（Grid）？
答:简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

[Grid System]的工作原理:

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行 .row class 来创建列col-xs-n(手机) col-sm-n(平板) col-md-n(电脑) col-lg-n(大桌面显示器)的水平组。
- .col-xs- 超小屏幕手机 (<768px)
- .col-sm- 小屏幕平板 (≥768px)
- .col-md- 中等屏幕桌面显示器 (≥992px)
- .col-lg- 大屏幕大桌面显示器 (≥1200px)
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距 padding来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如要创建三个相等的列，则使用三个 .col-xs-4 满足 1行十二列;

网页媒体查询是非常别致的”有条件的 CSS 规则”,常常用做于网页自适应；
媒体查询有两个部分，先是一个设备规范，然后是一个大小规则

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询,但是可以自己添加 */
@media (max-width: @screen-xs-max) { ... }

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

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

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

Bootstrap 网格系统如何跨多个设备工作：

偏移列
描述:偏移是一个用于更专业的布局的有用功能, 可用来给列腾出更多的空间;
为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-*类,其中 * 范围是从 1 到 11。

嵌套列
描述:为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md- 列内添加一组 .col-md- 列;
简单的说就是相对于父元素可以，再次对行进行等分或者不等分，相对于父元素十二份；
比如:row 分为 3 和 9 列，我们可以在9列中进行分 4 个 col-md-6 则，相对于在 9列中再次等分为2行12列；（具体查看下面的案例）

列排序
描述:以一种顺序编写列，然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* (推)和 .col-md-pull-* (拉)类的内置网格列的顺序，其中 * 范围是从 1 到 11。

基础示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Demo 3 HTML</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- BS容器 内边距15px -->
<div class="container">
  <!-- 行必须放入了container之中确定边界和对其 -->
  <div class="row">
    <!-- 列宽 -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <p style="color: red;">示例1:响应式图片</p>
      <img src="http://www.htmleaf.com/templets/default/images/alyun-1180-90.png" class="img-responsive" alt="阿里云" srcset="">
    </div>
  </div>

  <div class="row">
    <h5 style="color: red;">示例2:列偏移</h5>
    <div class="col-md-6 col-md-offset-1" style="color: white;background-color: cornflowerblue; box-shadow: inset 1px -1px 1px #666666;">
        我坐在这里，奉献我的汗水 col-md-offset-1
    </div>
    <div class="col-md-6 col-md-offset-3" style="color: white;background-color: cornflowerblue; box-shadow: inset 1px -1px 1px #666666;margin-top: 2px;">
        我坐在这里，奉献我的汗水 col-md-offset-3
    </div>
  </div>

  <div class="row">
    <p style="color: red;">示例3:行嵌套</p>
    <div class="col-md-3">
      <p>我是一个三列的文本段</p>
    </div>
    <div class="col-md-9" style="background-color: deepskyblue;">
      <p>列嵌套 9 列</p>
      <div class="row">
        <div class="col-md-6" style="background-color: coral;border: white solid 1px ;">
          <p>第一行第一列占6列</p>
        </div>
        <div class="col-md-6" style="background-color: coral;border: white solid 1px ;">
          <p>第一行第二列占6列</p>
        </div>
      </div>
      <div class="row">
          <div class="col-md-6" style="background-color: coral;border: white solid 1px ;">
            <p>第二行第一列占6列</p>
          </div>
          <div class="col-md-6" style="background-color: coral;border:  white solid 1px ;">
            <p>第二行第二列占6列</p>
          </div>
        </div>
    </div>
  </div>

  <div class="row">
    <p style="color: red;">示例4:列排序</p>
    <div class="col-md-4 col-md-push-8" style="background-color: pink">  
        我是左边但是我却在右边 《《《 （push - 推）
    </div>
    <div class="col-md-8 col-md-pull-4" style="background-color: #888;color: white;">  
        我是右边但是我却在左边 》》》 (pull - 拉)
      </div>
  </div>

</div>

<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
<!-- 需求3: 包含 jQuery 库 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 需求4: 合并了 Bootstrap JavaScript 插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

BS 代码展示

两种方式显示代码：

<code>:内联显示代码
<pre>:显示为一个独立的块元素或者代码有多行
<var>:显示变量赋值
<kbd>:按键文本提示
<samp>: 电脑程序输出格式显示

基础示例:

<div class="container">
    <p>（1）使用 code 元素来表示代码片段:</p>
    <p>以下是 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 。</p>

    <p>（2）使用 pre 元素来表示代码片段:</p>
    <pre class="pre-scrollable">
      把代码显示为一个独立的块元素
      所见即所得但是不能输入HTML标签
      .pre-scrollable 多行代码带有滚动条
      &lt;p&gt; 这是一段转义后的文本测试 &lt;p&gt; 
    </pre>

    <div class="row">
        <p>（3）使用 var 元素表示变量：<var>x</var> = <var>a</var><var>b</var> + <var>y</var> </p> 
        <p>（4）使用 kbd 元素表示按键输入: 使用 <kbd>ctrl + p</kbd> 来打开打印窗口 </p>
        <p>（5）使用 samp 元素包含电脑输出的内容:<samp> This text is output from a computer program....</samp></p>
    </div>
</div>

Table 表格

描述:提供了一个清晰的创建表格的布局;
表格类BS样式:

.table-responsive #任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）
.table 	#为任意 <table> 添加基本样式 (只有横向分隔线) 
.table-striped 	#在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) 隔行添加显示
.table-bordered #为所有表格的单元格添加边框
.table-hover 	#在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 	#在 <tbody> 内的任一行启用鼠标悬停状态

下表的类可用于表格的行或者单元格：

.active 	将悬停的颜色应用在行或者单元格上 	
.success 	表示成功的操作 	
.info 	表示信息变化的操作 	
.warning 	表示一个警告的操作 	
.danger 	表示一个危险的操作

基础示例:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BootStrap CSS学习示例 </title>
  <!-- Boostrap 样式库-->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="container">

    <h4 style="color:red"> 示例1：BS 之 Table 表格样式 </h4>
    <!-- 响应式表格,当在大于 768px 宽的大型设备上查看时您将看不到任何的差别。-->
    <div class="table-responsive">
    <!-- 表格添加基础样式标签 -->
    <table class="table table-hover table-striped table-bordered table-condensed">
      <caption>关于表格存储内容的描述或总结 table table-hover table-striped table-bordered table-condensed</caption>
      <!--- 表格标题行的容器元素（<tr>），用来标识表格列。 -->
      <thead>
        <!-- 表格行 -->
        <tr class="action">
          <!--- 表格列头部 -->
          <th>头部1</th>
          <th>头部2</th>
          <th>头部3-悬停的颜色</th>
        </tr>
      </thead>
      <!--表格主体中的表格行的容器元素（<tr>）-->
      <tbody>
        <!-- 表格行 -->
        <tr class="success">
          <!--- 表格列值 -->
          <td>表格值1</td>
          <td>表格值2</td>
          <td>表格值3-成功的操作</td>
        </tr>
        <tr class="info">
            <!--- 表格列值 -->
            <td>表格值1</td>
            <td>表格值2</td>
            <td>表格值3-信息变化的操作</td>
       </tr>
       <tr class="warning">
          <!--- 表格列值 -->
          <td>表格值1</td>
          <td>表格值2</td>
          <td>表格值3-警告的操作</td>
       </tr>
        <tr class="danger">
            <!--- 表格列值 -->
            <td>表格值1</td>
            <td>表格值2</td>
            <td>表格值3-危险的操作</td>
        </tr>
      </tbody>
      </table>
    </div>
  </div>

<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
<!-- 需求3: 包含 jQuery 库 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 需求4: 合并了 Bootstrap JavaScript 插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Form 表单

描述:Bootstrap 提供了下列类型的表单布局 垂直表单（默认） / 内联表单 / 水平表单
BS支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

<form role="form"> #垂直表单 是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式
.form-inline #内联表单 它的所有元素是内联的，向左对齐的，标签是并排的，
.form-horizontal #水平表单 与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同
.form-group   #把标签和控件放在其中是获取最佳间距所必需的。
.sr-only      #可以隐藏内联表单的标签 label标签
.control-label #控制label标签  label标签
.form-control  #表单与其组件显示样式 （常用输入框焦点）
.checkbox     #默认复选框样式 div标签
.radio       #默认单选按钮样式 dic标签
.checkbox-inline #内联的复选框
.radio-inline #内联的单选按钮的
.form-control-static #在一个水平表单内的表单标签后放置纯文本时
.help-block  #灰色显示表单帮助文本标签


#验证状态
.has-warning、 .has-error 或 .has-success
.input-* #设置表单的高度 xs - sm - md - lg
.col-lg-* #设置表单的宽度 1~12

基础示例:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BootStrap CSS学习示例 </title>
  <!-- Boostrap 样式库-->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    
    <form action="#" method="POST" role="form">
      <legend>示例1:垂直表单</legend>
      <div class="form-group">
        <!--- for属性 与 input的id属性是相绑定的 -->
        <label for="name">姓名:</label>
        <input type="text" class="form-control" id="name" placeholder="Input field">
      </div>
      <div class="form-group">
          <label for="inputfile">文件输入</label>
          <input type="file" id="inputfile">
          <p class="help-block">这里是块级帮助文本的实例。</p>
      </div>
       <!-- 复选框（Checkbox）和单选框（Radio）-->
      <div class="checkbox">
          <label>
            <input type="checkbox"> 请打勾1
          </label>
          <label>
            <input type="checkbox"> 请打勾2
          </label>
      </div>
      <div class="radio">
          <!-- 单选框 需要同一个name属性-->
          <label for="danxuan1"><input type="radio" name="sex" id="danxuan1" value="1" checked="true"> 男/man</label>
          <label for="danxuan2"><input type="radio" name="sex" id="danxuan2" value="2"> 女/woman </input></label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    
    <hr>

    <form action="#" method="POST" role="form" class="form-inline">
      <legend>示例2:内联表单</legend>
      <div class="form-group">
        <label for="">姓名:</label>
        <input type="text" class="form-control" id="name" placeholder="Input field">
      </div>
      <div class="form-group">
        <!---使用 class .sr-only，您可以隐藏内联表单的标签。 -->
          <label class="sr-only" for="inputfile">文件输入</label>
          <input type="file" id="inputfile">
      </div>
      <div class="checkbox">
          <label>
            <input type="checkbox"> 请打勾1
          </label>
          <label>
            <input type="checkbox"> 请打勾2
          </label>
          <label for="danxuan1"><input type="radio" name="danxuan1" id="danxuan1"> 单选1 </input></label>
          <label for="danxuan2"><input type="radio" name="danxuan1" id="danxuan2"> 单选2 </input></label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <hr>

    <form action="#" method="POST" role="form" class="form-horizontal">
      <legend>示例3:水平表单</legend>
      <div class="form-group">
        <label for="username" class="col-sm-2 control-label">用户名:</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </div>
      </div>
      <div class="form-group">
          <label for="password" class="col-sm-2 control-label">密  码:</label>
          <div class="col-sm-3">
              <input type="password" class="form-control" id="password" placeholder="请输入密码">
          </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-3">
          <p class="form-control-static">email@example.com</p>
        </div>
        <label class="col-sm-2 control-label">Email 不能被修改 </label>
        <div class="col-sm-3">
            <!-- P 标签也可以有标签 -->
            <p class="form-control">email@example.com</p>
        </div>
     </div>
      <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label for="remember">
              <input type="checkbox" name="remember" id="remember"> 请记住登录信息
            </label>
          </div>
      </div>
      <div class="form-group">
          <label for="name">文本框</label>
          <textarea class="form-control" rows="3"></textarea>
      </div>
      <div class="form-group">
          <label for="name">选择列表</label>
          <select class="form-control input-lg">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          <label for="name">可多选的选择列表</label>
          <select multiple class="form-control input-sm" >
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>

          <div class="form-group">
              <label class="col-sm-2 control-label">聚焦</label> <!--- 关键点:control-label -->
              <div class="col-sm-10">
                <input class="form-control" id="focusedInput" type="text"  value="该输入框获得焦点...">
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword" class="col-sm-2 control-label">
                禁用
              </label>
              <div class="col-sm-10">
                <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled> <!--- 关键点:disabled-->
              </div>
            </div>

            <fieldset disabled> <!--- 关键点:  <fieldset disabled> -->
              <div class="form-group">
                <label for="disabledTextInput"  class="col-sm-2 control-label">禁用输入（Fieldset disabled）
                </label>
                <div class="col-sm-10">
                  <input type="text" id="disabledTextInput" class="form-control"  placeholder="禁止输入">
                </div>
              </div>
              <div class="form-group">
                <label for="disabledSelect"  class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）
                </label>
                <div class="col-sm-10">
                  <select id="disabledSelect" class="form-control">
                    <option>禁止选择</option>
                  </select>
                </div>
              </div>
            </fieldset>


            <!--- 关键点:  has-success -->
            <div class="form-group has-success">
              <label class="col-sm-2 control-label" for="inputSuccess">
                输入成功
              </label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="inputSuccess">
              </div>
            </div>
            <!--- 关键点:  has-warning -->
            <div class="form-group has-warning">
              <label class="col-sm-2 control-label" for="inputWarning">
                输入警告
              </label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="inputWarning">
              </div>
            </div>
            <!--- 关键点:  has-error-->
            <div class="form-group has-error">
              <label class="col-sm-2 control-label" for="inputError">
                输入错误
              </label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="inputError">
              </div>
            </div>

         <div class="form-group">
          <div class="col-sm-offset-2 col-sm-8">
            <button type="submit" class="btn btn-primary">登录</button>
            <button type="reset" class="btn btn-info">清空</button>
          </div>
        </div>
    </form>
  </div>

<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
<!-- 需求3: 包含 jQuery 库 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 需求4: 合并了 Bootstrap JavaScript 插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

.bs-example       #form标签输入组表单样式
.bs-example-form  #form标签
.input-group       #div 输入组
.input-group-addon # <span> 内放置额外的图标或者文本内容。
.input-group-btn  #按钮插件 把按钮作为输入框组的前缀或者后缀元素
  
#输入组大小
input-group-lg  #改变输入框组的大小。输
input-group-sm

基础案例

<p>输入框组示例</p>
<div role="inputgroup">
  <span class="help-block"> Please input Email</span>
  <form action="#" class="bs-example bs-example-form" role="form">
    <div class="row">
        <label for="emailname">邮箱地址:</label>
        <div class="input-group col-md-6">
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-envelope"></span>
            </span>
            <input type="text" class="form-control" name="emailname" id="emailname">
            <span class="input-group-addon">@</span>
            <input type="text" name="domain" class="form-control" placeholder="Domain URL">
        </div>

        <hr>

        <label for="money">金  额:</label>
        <div class="input-group col-md-6">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" name="money" id="money">
            <span class="input-group-addon">.00</span>
        </div>
        
        <hr>

        <label for="">复选框何单选插件</label>
        <div class="input-group col-md-3">
            <span class="input-group-addon"><input type="checkbox" name="checkout"></span>
            <input type="text" class="form-control">
        </div><!-- /input-group -->
        <div class="input-group col-md-3">
            <span class="input-group-addon"><input type="radio" name="radio"></span>
            <input type="text" class="form-control">
        </div><!-- /input-group -->

        <hr>

        <label for="search">按钮插件</label>
        <div class="input-group col-md-6">
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
          </span>
          <input type="search" name="search" class="form-control" id="search" placeholder="搜索的关键字">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit">搜索</button>
          </span>
        </div>
    </div>
    
    <hr>
    <label for="dropdown">分割下拉框</label>
    <div class="input-group col-md-6">
      <input type="search" name="search1" id="dropdown" class="form-control">
      <div class="input-group-btn">
        <button class="btn btn-default" tabindex="-1">下拉菜单</button>
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <span class="caret"></span>
          <span class="sr-only">切换下拉菜单</span>
        </button>
        <ul class="dropdown-menu pull-right">
          <li class="dropdown-header">分类</li>
          <li><a href="">Java</a></li>
          <li><a href="">CSS</a></li>
          <li class="divider"></li>
          <li><a href="#">PHP</a></li>
        </ul>
      </div>
    </div>
  </form>
</div>

Button 按钮

描述:BS提供了几种样式的Button可以快速进行标签样式的调整；
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观,样式可用于<a>, <button>, 或 <input>元素上;

#基础样式
.btn 	为按钮添加基本样式 	
.btn-default 	默认/标准按钮 	
.btn-primary 	原始按钮样式（未被操作） 	
.btn-success 	表示成功的动作 	
.btn-info 	该样式可用于要弹出信息的按钮 	
.btn-warning 	表示需要谨慎操作的按钮 	
.btn-danger 	表示一个危险动作的按钮操作 	
.btn-link 	让按钮看起来像个链接 (仍然保留按钮行为)

#按钮大小
.btn-lg	#这会让按钮看起来比较大。
.btn-sm	#这会让按钮看起来比较小。
.btn-xs	#这会让按钮看起来特别小。
.btn-block	#这会创建块级的按钮，会横跨父元素的全部宽度。

#按钮状态
.active  #按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）按钮元素 / 锚元素
.disable #禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

#按钮组
.btn-group #用于形成基本的按钮组
.btn-group-lg|sm|xs #控制按钮组的大小，注意md为默认大小所以不用专门去写
.btn-toolbar #有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。
.btn-group-vertical	 #让一组按钮垂直堆叠显示，而不是水平堆叠显示。

#自适应大小的按钮组
.btn-group-justified  #类来设置自适应大小的按钮组。注意: 如果是 <button> 元素, 你需要在外层使用 .btn-group 类来包裹


# 内嵌下拉菜单的按钮组 
.dropdown-toggle  #按钮组内嵌的按钮可以设置下拉菜单 ， 还需要data-toggle="dropdown"
.dropdown-menu   #ul 标签 设置二级菜单样式
.caret #span标签 脱字号；补注号 
data-toggle="dropdown" #需要下拉的

嵌套: 您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。

基础示例:

<div class="container">
   <!-- 标准的按钮 -->
   <button type="button" class="btn btn-default">默认按钮</button>
   <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
   <button type="button" class="btn btn-primary">原始按钮</button>
   <!-- 表示一个成功的或积极的动作 -->
   <button type="button" class="btn btn-success">成功按钮</button>
   <!-- 信息警告消息的上下文按钮 -->
   <button type="button" class="btn btn-info">信息按钮</button>
   <!-- 表示应谨慎采取的动作 -->
   <button type="button" class="btn btn-warning">警告按钮</button>
   <!-- 表示一个危险的或潜在的负面动作 -->
   <button type="button" class="btn btn-danger">危险按钮</button>
   <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
   <button type="button" class="btn btn-link">链接按钮</button>

   <hr>

   <p>
       <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
       <button type="button" class="btn btn-default btn-lg">大的按钮</button>
    </p>
    <p>
       <button type="button" class="btn btn-primary"> 默认大小的原始按钮</button>
       <button type="button" class="btn btn-default"> 默认大小的按钮</button>
    </p>
    <p>
       <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
       <button type="button" class="btn btn-default btn-sm">小的按钮</button>
    </p>
    <p>
       <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
       <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
    </p>
    <p>
       <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
       <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
    </p>

    <hr>
    <button type="button" class="btn btn-primary">原始按钮</button>
    <button type="button" class="btn btn-primary active">激活按钮</button>
    <a href="#" class="btn btn-danger active">a标签锚按钮</a>
    <a href="#" class="btn btn-danger active" role="button">a标签锚按钮</a> <!--注意角色 role--->
    <br><br>
    <p>
       <button type="button" class="btn btn-primary">原始按钮</button>
       <button type="button" class="btn btn-primary" disabled="disabled">禁用的原始按钮</button>
     </p>
     <p>
       <a href="#" class="btn btn-default" role="button">链接</a>
       <a href="#" class="btn btn-default disabled" role="button">禁用链接</a>
     </p>

     <hr>
     <p>通过 .btn-group-* 类来控制按钮组中使用按钮的大小。 </p>
     <div class="btn-group btn-group-sm">
       <button type="button" class="btn btn-primary">Apple</button>
       <button type="button" class="btn btn-primary">Samsung</button>
       <button type="button" class="btn btn-primary">Sony</button>
     </div>

     <hr>
     <div class="btn-group btn-group-justified">
         <!-- 注意:一个button 一个 btn-group 包裹-->
       <div class="btn-group">
         <button type="button" class="btn btn-info">Samsung</button>
       </div>
       <div class="btn-group">
           <button type="button" class="btn btn-info">Sony</button>
       </div>
     </div>
     <!-- a 标签外层可以不是 btn-group包含 一个父div设置即可 与 button的不同-->
     <div class="btn-group btn-group-justified">
       <a href="#" class="btn btn-primary">Apple</a>
       <a href="#" class="btn btn-primary">Samsung</a>
       <a href="#" class="btn btn-primary">Sony</a>
     </div>
     <br><br>
     <div class="btn-group">
           <!--- 关键点 .dropdown-toggle data-toggle="dropdown"-->
           <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">内嵌下拉菜单 <span class="caret"></span></button>
           <!--- 关键点 .dropdown-menu-->
           <ul class="dropdown-menu" role="menu">
               <li> <a href="#" class="btn">成绩查询 <span class="caret"></span> </a></li>
               <li> <a href="#" class="btn">分数查询 <span class="caret"></span> </a> </li>
           </ul>
       </div>

       <div class="btn-group">
           <button type="button" class="btn btn-primary">分隔按钮</button>
           <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
               <span class="caret"></span>
           </button>
           <ul class="dropdown-menu" role="menu">
               <li><a href="#">Tablet</a></li>
               <li><a href="#">Smartphone</a></li>
           </ul>
       </div>
 </div>

按钮组与按钮工具栏示例:

<div class="container">
  <p>基本按钮组与按钮工具栏</p>
  <div class="btn-toolbar" role="toolbar">
    <!-- button -->
    <div class="btn-group">
      <button type="button" class="btn btn-primary">按钮组1</button>
      <button type="button" class="btn btn-info">按钮组1</button>
      <!-- btn-group 嵌套-->
      <div class="btn-group dropdown">
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">按钮组1
          <span class="caret"></span>
          <span class="sr-only">大屏幕显示</span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">导航分类</li>
            <li class="text-center"><a href="#user">用户</a></li>
            <li class="text-center"><a href="#message">信息</a></li>
            <li class="disabled text-center"><a href="#center">中心</a></li>
          </ul>
      </div>
    </div>
 
    <!-- input -->
    <div class="btn-group-sm">
        <input type="button" class="btn btn-primary" value="按钮组2">
        <input type="button" class="btn btn-info" value="按钮组2">
        <input type="button" class="btn btn-danger" value="按钮组2">
    </div>

    <!-- a -->
    <div class="btn-group-xs">
      <a href="#user" class="btn btn-primary">按钮组3</a>
      <a href="#info" class="btn btn-info">按钮组3</a>
      <a href="#danger" class="btn btn-danger">按钮组3</a>
    </div>
  </div>
</div>

Image 图片

描述:Bootstrap 提供了三个可对图片应用简单样式的 class：

#图标大小 140 x 140 px
.img-rounded #添加 border-radius:6px 来获得图片圆角。
.img-circle #添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail ## <a> 标签包含img标签。添加四个像素的内边距（padding）和一个灰色的边框, 当鼠标悬停在图像上时，会动画显示出图像的轮廓。
.img-responsive #图片响应式 (将很好地扩展到父元素)， max-width: 100%; 和 height: auto; 样式应用在图片上
.caption   #div标签 .thumbnail 的 <a> 标签改为 <div> 向缩略图添加各种 HTML 内容，比如标题、段落或按钮
.fakeimg  #图片填充占位（浮动的元素除外）

基础示例

<img src="" class="img-responsive" alt="响应式图像">
<style>
.img-responsive {
  display: block; #当您把元素的 display 属性设置为 block，以块级元素显示。
  height: auto;    #相关元素的高度取决于浏览器。
  max-width: 100%;  #让图像按比例缩放，不超过其父元素的尺寸。
}
.fakeimg {
    height: 200px;
    background: #aaa;
}
</style>

<!-- Bootstrap 创建缩略图通过缩略图为此提供了一种简便的方式。-->
<div class="row">
  <div class="col-sm-6 col-md-3">
    <div class="img-rounded">
      <img src="https://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="图片" class="img-responsive">
    </div>
    <div class="caption">
      <h4>示例1.<small>说明</small></h4>
      <p>一些示例文本，全文阅读...</p>
      <a href="#" class="btn btn-warning">不感兴趣</a>
      <a href="#" class="btn btn-primary pull-right">全文阅读</a>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <img src="https://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="图片圆角"  class="img-circle img-responsive">
    <div class="caption">
      <h4>示例2.<small>说明</small></h4>
      <p>一些示例文本，全文阅读...</p>
      <a href="#" class="btn btn-warning">不感兴趣</a>
      <a href="#" class="btn btn-primary pull-right">全文阅读</a>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="https://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="图片缩略图" class="img-responsive">
        <div class="caption">
            <h4>示例1.<small>说明</small></h4>
            <p>一些示例文本，全文阅读...</p>
            <a href="#" class="btn btn-warning">不感兴趣</a>
            <a href="#" class="btn btn-primary pull-right">全文阅读</a>
          </div>
      </div>
    </div>
</div>

BS 辅助类

#文本样式
.text-muted 	#"text-muted" 类的文本样式 	
.text-primary 	#"text-primary" 类的文本样式 	
.text-success #	"text-success" 类的文本样式 	
.text-info 	#"text-info" 类的文本样式 	
.text-warning #	"text-warning" 类的文本样式 	
.text-danger 	#"#text-danger" 类的文本样式
.text-hide 	  #将页面元素所包含的文本内容替换为背景图（文本隐藏）


#背景颜色，文本是个链接鼠标移动到文本上会变暗
.bg-primary 	表格单元格使用了 "bg-primary" 类 	
.bg-success 	表格单元格使用了 "bg-success" 类 	
.bg-info 	     表格单元格使用了 "bg-info" 类 	
.bg-warning 	 表格单元格使用了 "bg-warning" 类 	
.bg-danger 	     表格单元格使用了 "bg-danger" 类

#元素位置
.pull-left 	    #元素浮动到左边 	
.pull-right 	#元素浮动到右边 	
.center-block 	#设置元素为 display:block 并居中显示 	

#元素显示和隐藏
.clearfix 	#清除浮动 	
.show 	#强制元素显示 	
.hidden 	#强制元素隐藏 	
.sr-only 	#除了屏幕阅读器外，其他设备上隐藏元素 	
.sr-only-focusable #	与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.close     #显示关闭按(使用通用的关闭图标来关闭模态框和警告框)
.caret 	#显示下拉式功能(下拉菜单)

基础示例:

<div class="container">
      <div class="row">
            <img src="https://www.runoob.com/wp-content/uploads/2014/06/download.png" class="img-rounded">
            <img src="https://www.runoob.com/wp-content/uploads/2014/06/download.png" class="img-circle">
            <img src="https://www.runoob.com/wp-content/uploads/2014/06/download.png" class="img-thumbnail">
            <img src="https://tpc.googlesyndication.com/daca_images/simgad/13063754865781208952" alt="图片响应式" class="img-responsive">       
      </div>
      <hr>
      <div class="row">
        <p class="text-muted"> "text-muted" 类的文本样式</p>
        <p class="bg-info">【背景】该段落使用了类 "bg-info"。</p>
        <p class="bg-warning">【背景】该段落使用了类 "bg-warning"。</p>
      <a class="bg-danger" href="/index.php">【背景】该链接使用了类 "bg-danger"。</a>
      </div>

      <br>
      <!-- 注意居中显示块 必须设置宽度大小 -->
      <div class="center-block" style="width:170px;"> 采用 center-block 居中显示</div>
      <div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div>

      <div class="row">
        <!--aria-hidden="true" 主要是帮助残障人士（如失明）使用识读设备（自动读取内容并自动播放出来），播放到带此属性的内容时会自动跳过，以免残障人士混淆！ -->
        <p>关闭图标实例
            <button type="button" class="close"  aria-hidden="true"> &times;</button>
        </p>
        <div class="show" style="margin-left:10px;width:300px;background-color:#ccc;">
            这是 show class 的实例
         </div>
        <div class="hidden" style="width:200px;background-color:#888;">
            这是 hide class 的实例
        </div>
        </div>
        <div class="row" style="padding: 10px 100px 19px 5px;">
                <p>您可以通过使用 class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。</p>
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label class="sr-only" for="email">Email 地址</label>
                        <input type="email" class="form-control" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="pass">密码</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                </form>
        </div>
    </div>

响应式实用工具

描述:可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。
注意:响应式实用工具目前只适用于块和表切换。

从 v3.2.0 版本起，形如 .visible-- 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。列表如下：
类组|CSSdisplay
—|—
.visible--block|display: block;
.visible--inline|display: inline;
.visible-*-inline-block |display: inline-block;

打印类:下表列出了打印类。使用这些切换打印内容。



# (满足条件则显示)
visible-on
visible-xs
visible-sm
visible-md
visible-lg


#浏览器隐藏 / 打印机可见
.visible-print-block
.visible-print-inline
.visible-print-inline-block 	

#浏览器可见 / 打印机隐藏
.hidden-print

基础示例:

<!--勾号（✔） 表示元素在当前视口中可见。-->
<div class="container" style="padding: 40px;">
  <div class="row visible-on">
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
											  box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-xs">特别小型</span>
      <span class="visible-xs">✔ 在特别小型设备上可见</span>
    </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;">
      <span class="hidden-sm">小型</span>
      <span class="visible-sm">✔ 在小型设备上可见</span>
    </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;">
      <span class="hidden-md">中型</span>
      <span class="visible-md">✔ 在中型设备上可见</span>
    </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;">
      <span class="hidden-lg">大型</span>
      <span class="visible-lg">✔ 在大型设备上可见</span>
    </div>
  </div>
</div>

欢迎各位志同道合的朋友一起学习交流，如文章有误请在下方留下您宝贵的经验知识，个人邮箱地址【master#weiyigeek.top】或者个人公众号【WeiyiGeek】联系我。

更多文章来源于【WeiyiGeek Blog - 为了能到远方，脚下的每一步都不能少】, 个人首页地址( https://weiyigeek.top )

专栏书写不易，如果您觉得这个专栏还不错的，请给这篇专栏 【点个赞、投个币、收个藏、关个注、转个发、赞个助】，这将对我的肯定，我将持续整理发布更多优质原创文章！。

最后更新时间：2023-06-06 17:20:28
文章原始路径：_posts/编程世界/前端技术/BootStrap/BootStrap应用开发学习入门0.md
转载注明出处，原文地址：https://blog.weiyigeek.top/2019/11-29-354.html
本站文章内容遵循知识共享署名 - 非商业性 - 相同方式共享 4.0 国际协议

WeiyiGeeker