Bootstrap学习（一）

时间 2019-12-07

标签 bootstrap 学习栏目 Bootstarp 繁體版

原文原文链接

Bootstrap

1、简介:

bootstrap，来自 Twitter，是目前很受欢迎的前端框架。php

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。css

2、特色：

1.跨设备，跨浏览器html

2.响应布局前端

3.提供的全面的组件html5

4.内置jquery插件jquery

5.支持html5 css3ios

6.支持less动态样式css3

3、环境搭建：

如今稳定的是3的版本bootstrap

一、下载方式：api

打开网址 http:// http://v3.bootcss.com/ 点击下载

而后编写HTML时候引用

二、地址引用：

使用 BootCDN 提供的免费 CDN

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

<!-- 可选的 Bootstrap 主题文件（通常不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 引入JQuery(必须在Bootsrap JS以前引入)） -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

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

4、快速入门

一、Bootstrap中的排版

（1）、标题

标题：（h1~h6/.h1~.h6）

副标题：(samll)

以下：

<h1>Hello, world!<small>副标题</small></h1>
      <h2>Hello, world!</h2>
      <h3>Hello, world!</h3>
      <h4>Hello, world!</h4>
      <h5>Hello, world!</h5>
      <h6>Hello, world!</h6>
      <span class="h1">Hello, world!</span>
      <span class="h2">Hello, world!</span>
      <span class="h3">Hello, world!</span>
      <span class="h4">Hello, world!</span>
      <span class="h5">Hello, world!</span>
      <span class="h6">Hello, world!</span>

显示效果：

（2）、对齐

<p class="text-left">左对齐</p>     <!-- 左对齐 -->
   <p class="text-center">居中对齐</p> <!-- 右对齐 -->
   <p class="text-right">右对齐</p>    <!-- 居中对齐 -->

显示效果：

（3）、大小写转换

<p class="text-lowercase">HELLO</p>           <!-- 转换大写 -->
   <p class="text-uppercase">hello</p>           <!-- 转换小写 -->
   <p class="text-capitalize">hello worlk！</p>  <!-- 首字母转换成大写 -->

显示效果：

hello

HELLO

Hello Worlk！

（4）、表格

<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th>#</th>
				<th>Firstname</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Anna</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Debbie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>John</td>
			</tr>
            <tr>
				<td>4</td>
				<td>Dlq</td>
			</tr>
		</tbody>
	</table>

显示效果：

Bootstrap 提供了一个清晰的建立表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签	描述
<table>	为表格添加基础样式。
<thead>	表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>	表格主体中的表格行的容器元素（<tr>）。
<tr>	一组出如今单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>	默认的表格单元格。
<th>	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>	关于表格存储内容的描述或总结。

表格类

下表样式可用于表格中：

类	描述	实例
.table	为任意 <table> 添加基本样式 (只有横向分隔线)	尝试一下
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)	尝试一下
.table-bordered	为全部表格的单元格添加边框	尝试一下
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态	尝试一下
.table-condensed	让表格更加紧凑	尝试一下
联合使用全部表格类	尝试一下

<tr>, <th> 和 <td> 类

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

类	描述	实例
.active	将悬停的颜色应用在行或者单元格上	尝试一下
.success	表示成功的操做	尝试一下
.info	表示信息变化的操做	尝试一下
.warning	表示一个警告的操做	尝试一下
.danger	表示一个危险的操做	尝试一下

代码:

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody>
</table>

显示效果：

响应式表格

经过把任意的 .table 包在 .table-responsive class 内，您可让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差异。

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table>
</div>

尝试一下

（5）、表单

表单布局：

垂直表单（默认）
内联表单：.form-inline
水平表单：.form-horizontal

垂直表单——显示效果：垂直布局的表单

内联表单——显示效果：向左对齐的，标签是并排的

水平表单——显示效果：水平布局的表单

支持的表单控件：

Bootstrap 支持最多见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

输入框（text）：

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

显示效果：

文本框（Textarea）：

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

显示效果：

复选框（Checkbox）和单选框（Radio）：

<!-- 复选框 -->
<div class="checkbox">
	<label><input type="checkbox" value="">选项 1</label>
</div>
    <!-- 单选框 -->
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
	</label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
    <!-- 内联复选框 -->
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
	</label>
    <!-- 内联单选框 -->
	<label class="checkbox-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
	</label>
	<label class="checkbox-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
	</label>
</div>

显示效果：

下拉选择框（Select）：

<label for="name">选择列表</label>
		<select class="form-control">
			<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">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>

显示效果：

静态控件：

当您须要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 .form-control-static

<div class="form-group">
		<label class="col-sm-2 control-label">帐号</label>
		<div class="col-sm-10">
			<p class="form-control-static">example</p>
		</div>
	</div>
	<div class="form-group">
		<label for="inputPassword" class="col-sm-2 control-label">密码</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword" 
				   placeholder="请输入密码">
		</div>
	</div>

显示效果：

禁用的输入框input：

若是您想要禁用一个输入框 input，只须要简单地添加 disabled 属性，这不只会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

<div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" placeholder="禁止输入" disabled>
    </div>
  </div>

显示效果：

禁用的字段集 fieldset

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的全部控件。

显示效果：

<fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入</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">禁用选择菜单</label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>禁止选择</option>
        </select>
      </div>
    </div>
  </fieldset>

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只须要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .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>
	<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>
	<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>

显示效果：

表单控件大小

一、input-lg:大

二、(默认)

三、input-sm:小

输入框：

<div class="form-group">
		<input class="form-control input-lg" type="text" placeholder=".input-lg">
	</div>
	<div class="form-group">
		<input class="form-control" type="text" placeholder="默认输入">
	</div>
	<div class="form-group">
		<input class="form-control input-sm" type="text" placeholder=".input-sm">
	</div>

显示效果：

选择框：

<div class="form-group">
		<select class="form-control input-lg">
			<option value="">.input-lg</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control">
			<option value="">默认选择</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control input-sm">
			<option value="">.input-sm</option>
		</select>
	</div>

显示效果：

设置大小：

<div class="row">
		<div class="col-lg-2">
			<input type="text" class="form-control" placeholder=".col-lg-2">
		</div>
		<div class="col-lg-3">
			<input type="text" class="form-control" placeholder=".col-lg-3">
		</div>
		<div class="col-lg-4">
			<input type="text" class="form-control" placeholder=".col-lg-4">
		</div>
	</div>

显示效果：

表单帮助文档

<form role="form">
  <span>帮助文本实例</span>
  <input class="form-control" type="text" placeholder="">
  <span class="help-block">一个较长的帮助文本块，超过一行，
  须要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

（6）、按钮

一、按钮的样式

带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。

可是 Bootstrap 提供了一些选项来定义按钮的样式，具体以下表所示：

类	描述
.btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操做）
.btn-success	表示成功的动做
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示须要谨慎操做的按钮
.btn-danger	表示一个危险动做的按钮操做
.btn-link	让按钮看起来像个连接 (仍然保留按钮行为)
.btn-lg	制做一个大按钮
.btn-sm	制做一个小按钮
.btn-xs	制做一个超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

<!-- 标准的按钮 -->
<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>

显示效果：

二、按钮的大小

Class	描述
.btn-lg	这会让按钮看起来比较大。
.btn-sm	这会让按钮看起来比较小。
.btn-xs	这会让按钮看起来特别小。
.btn-block	这会建立块级的按钮，会横跨父元素的所有宽度。

<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>

显示效果：

三、按钮状态

一、激活状态：

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了让按钮元素和锚元素呈激活状态的 class：

元素	Class
按钮元素	添加 .active class 来显示它是激活的。
锚元素	添加 .active class 到 <a> 按钮来显示它是激活的。

按钮激活状态：

<p>
	<button type="button" class="btn btn-default btn-lg ">默认按钮</button>
   	<button type="button" class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p>
   	<button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
   	<button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>

</p>
<p>
	<a class="btn btn-default active" href="">链接</a>
</p>

显示效果：

二、禁用状态：

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

元素	Class
按钮元素	添加 disabled 属性到 <button> 按钮。
锚元素	添加 disabled class 到 <a> 按钮。

<p>
   <button type="button" class="btn btn-default btn-lg">默认按钮</button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p>
   <a href="#" class="btn btn-default btn-lg" role="button">连接</a>
   <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用连接</a>
</p>
<p>
   <a href="#" class="btn btn-primary btn-lg" role="button">原始连接</a>
   <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始连接</a>
</p>

显示效果：

三、按钮标签

您能够在 <a>、<button> 或 <input> 元素上使用按钮 class。

可是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。

<!-- a标签 -->
<a class="btn btn-default" href="#" role="button">连接</a>
<!-- button标签 -->
<button class="btn btn-default" type="submit">按钮</button>
<!-- input标签 -->
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

显示效果：

（7）、图片

一、样式

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

类	描述
.img-rounded	为图片添加圆角 (IE8 不支持)
.img-circle	将图片变为圆形 (IE8 不支持)
.img-thumbnail	缩略图功能
.img-responsive	图片响应式 (将很好地扩展到父元素)

<img src="/1.png" class="img-rounded">
<img src="/2.png" class="img-circle">
<img src="/3.png" class="img-thumbnail">

显示效果：

二、响应式图片

<img src="test.jpg" class="img-responsive" alt="测试图片" width="304" height="236">

效果本身测试

（8）、Bootstrap 辅助类

Bootstrap 中的一些辅助类可能常常用到。

文本

如下不一样的类展现了不一样的文本颜色。若是文本是个连接鼠标移动到文本上会变暗：

类	描述	实例
.text-muted	"text-muted" 类的文本样式	尝试一下
.text-primary	"text-primary" 类的文本样式	尝试一下
.text-success	"text-success" 类的文本样式	尝试一下
.text-info	"text-info" 类的文本样式	尝试一下
.text-warning	"text-warning" 类的文本样式	尝试一下
.text-danger	"text-danger" 类的文本样式	尝试一下

背景

如下不一样的类展现了不一样的背景颜色。若是文本是个连接鼠标移动到文本上会变暗：

类	描述	实例
.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 类结合使用，在元素获取焦点时显示(如：键盘操做的用户)	尝试一下
.text-hide	将页面元素所包含的文本内容替换为背景图	尝试一下
.close	显示关闭按钮	尝试一下
.caret	显示下拉式功能	尝试一下

（8）、Bootstrap 响应式实用工具

Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。

这些能够经过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。

须要谨慎使用这些工具，避免在同一个站点建立彻底不一样的版本。

响应式实用工具目前只适用于块和表切换。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面 (≥992px)	大屏幕桌面 (≥1200px)
.visible-xs-*	可见	隐藏	隐藏	隐藏
.visible-sm-*	隐藏	可见	隐藏	隐藏
.visible-md-*	隐藏	隐藏	可见	隐藏
.visible-lg-*	隐藏	隐藏	隐藏	可见
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每一个针对 CSS 中不一样的 display 属性，列表以下：

类组	CSS display
.visible-*-block	display: block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;

所以，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。可是从 v3.2.0 版本开始再也不建议使用。除了 <table> 相关的元素的特殊状况外，它们与 .visible-*-block 大致相同。

打印类

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

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