注意：本文主要讲解BootStrap常用的一些功能点，使用的idea开发工具。希望小伙伴们下去多加练习。

响应式开发

响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础知识。当然，要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的，但是你至少可以很轻松的确定它是能够正常工作的，因为页面的基本特性和布局结构都是根据语义结构来部署的。

响应式开发概念

响应式开发是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面，随着屏幕尺寸的改变，自适应地改变页面布局。

响应式开发原理

使用媒体查询针对不同宽度进行布局和样式的设置，从而适配不同的设备

设备划分	尺寸区间
超小屏幕（手机）	<768px
小平设备（平板）	>= 768px~992px
中等屏幕（桌面显示器）	>=992px~1200px
宽屏设备（大桌面显示器）	>=1200px

响应式布局容器

响应式需要一个父级作为布局容器，来配合子集容器来实现效果
例如：1200时父级容器有三个子集div 分三列，当容器变小的时候这三列div变成三行来显示
根据页面宽度动态该变布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style> .container{ width: 750px; margin: 0px auto; } .container ul{ list-style: none; } .container ul li{ text-align: center; float: left; width: 93.75px; height: 30px; background-color: green; } @media screen and (max-width: 768px){ .container ul li{ float: left; width: 33.3%; } .container{ width: 100%; } } /*如果屏幕宽度小于992px,宽度设置为750*/ @media screen and (min-width: 992px){ .container{ width: 750px; } } /*如果屏幕宽度小于1200px,宽度设置为1100px*/ @media screen and (min-width: 1200px) { .container{ width: 952px; } } /*如果屏幕宽度大于1200px,宽度设置为1100px*/ @media screen and (min-width: 1200px) { .container{ width: 1100px; } } </style>
<body>
<div class="container">
  <ul>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
  </ul>
</div>
</body>
</html>

宽屏效果

小屏效果

BootStrap

官网：https://getbootstrap.com/
菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html
中文官网：https://www.bootcss.com/

BootStrap 简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

为什么使用 Bootstrap

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。它是开源的。

Bootstrap 包的内容

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

BootStrap 初步使用

进入官网点击入门把bootstrap核心复制到页面（核心文件放在竟在资源也可），

点击组件粘贴想要的样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初步使用</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"></head>
<body>
一个放大镜 <span class="glyphicon glyphicon-search"></span>
</body>
</html>

初步使用BootStrap初次使用效果显示

注意：下面还有很多组件可以复制，前提当前页面要有bootstrap核心文件

布局容器

固定宽度布局容器

<!-- 一个固定宽度的相应式布局的div-->
<div class="container"></div>

占据全部视口布局容器

<!-- 一个占据全部视口的响应式布局的div-->
<div class="container-fluid"></div>

两种响应式布局页面效果显示

粉色为：container，黄色为：container-fluid

格栅系统

1.格栅系统参数

不同屏幕分辨率可以设置不同的格栅宽度，从而实现不同分辨率下显示不同布局

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

格栅系统使用

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>格栅系统</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <style> .container ul{ list-style: none; } .container ul li{ text-align: center; float: left; height: 30px; background-color:greenyellow; } </style>
</head>
<body>
<!-- 一个固定宽度的相应式布局的div-->
<div class="container">
  <ul>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
  </ul>
</div>
</body>
</html>

格栅系统效果显示

不同的屏幕宽度显示不同的布局

2.格栅系统偏移

格栅偏移参数：

xxxxxxxxxx class="col-md-offset-x" //x 是数字和格栅一样最大12 相当于在两个格栅中间加了一个空的格栅

格栅偏移使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>格栅系统偏移</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <style> .container ul{ list-style: none; } .container ul li{ text-align: center; float: left; height: 30px; background-color:greenyellow; } </style>
</head>
<body>
<!-- 一个固定宽度的相应式布局的div-->
<div class="container">
  <ul>
    <li class="col-md-4 col-lg-4">导航栏</li>
    <li class="col-md-4 col-lg-4 col-md-offset-4">导航栏</li>
  </ul>
</div>
</body>
</html>

格栅偏移校效果显示

页面排版

1.副标题（small）

副标题使用

<h1>这是个标题    <small>这是个副标题</small></h1>
  <h2>这是个标题    <small>这是个副标题</small></h2>
  <h3>这是个标题    <small>这是个副标题</small></h3>
  <h4>这是个标题    <small>这是个副标题</small></h4>

  <h1>这是个标题用class    <span class="small">这是个副标题</span></h1>
  <h2>这是个标题用class    <span class="small">这是个副标题</span></h2>
  <h3>这是个标题用class    <span class="small">这是个副标题</span></h3>
  <h4>这是个标题用class    <span class="small">这是个副标题</span></h4>

副标题使用效果显示

2.标记（mark）

标记使用

<h1>复制即用<mark>为初学者而生！</mark></h1>

标记效果显示

删除/无用文本标记

<h1><del>此方法已被删除</del></h1>
<h1><s>此方法已被废弃</s></h1>

删除无用标记效果显示

字体加重倾斜标记

<!-- em倾斜 strong加粗 多个标记可以写在一起组合使用-->
<h1><em><strong>加重字体</strong></em></h1>

字体加重倾斜标记效果显示

字体加重倾斜标记（HTML）

<p><b>ALYTS</b><br> 复制即用为初学者而生!</p>
<p><i>ALYTS</i><br> 复制即用为初学者而生!</p>
<p><i><b>ALYTS</b></i><br> 复制即用为初学者而生!</p>

字体加重倾斜标记效果显示

对齐标记

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

对齐标记效果显示

缩略语

<!-- 普通缩略语句-->
<h1><abbr title="alyts">al</abbr></h1>
<!-- 首字母缩略语句-->
<h1><abbr title="ALYTS YMM" class="initialism">al</abbr></h1>

鼠标悬停会显示title里的数据，不方便截图大家可以下去自行演示！

无样式/内敛列表

<!--无样式列表-->
<div class="container">
<ul class="list-unstyled">
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
</div>
<!--内敛列表（横向） 并添加少量的内边距-->
<div class="container">
<ul class="list-inline">
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
</div>

无样式/内敛列表效果显示

3.表格

基本表格（ .table ）

<table class="table">
<tr>
  <th>序号</th>
  <th>姓名</th>
  <th>性别</th>
  <th>年龄</th>
</tr>
  <tr>
    <td>1</td>
    <td>王</td>
    <td>男</td>
    <td>24</td>
  </tr>
  <tr>
    <td>2</td>
    <td>林</td>
    <td>男</td>
    <td>24</td>
  </tr>
  <tr>
    <td>3</td>
    <td>峰</td>
    <td>男</td>
    <td>25</td>
  </tr>
</table>

基本表格效果显示

基本表格无样式（.table）效果显示

表格状态（颜色）类

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

表格状态使用

<table class="table table-condensed">
    <tr>
      <th class="active">序号</th>
      <th class="success">姓名</th>
      <th class="warning">性别</th>
      <th class="danger">年龄</th>
    </tr>
    <tr class="info">
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

表格状态效果显示

条纹表格(.table-striped)

<table class="table table-striped">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

条纹表格效果显示

带边框的表格(.table-bordered)

<table class="table table-bordered">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

带边框表格效果显示

鼠标悬停表格(.table-hover)

<table class="table table-hover">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

鼠标悬停表格效果显示

紧缩表格

<table class="table table-condensed">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

紧缩表格效果显示

响应式表格

<table class="table table-responsive">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

响应式表格效果显示

4.表单

基本表单

<!-- for="id" 点击此空间就相当于点击目标控件-->
<!-- class="form-control" 会给当前空间一个宽度百分百的样式-->
<!-- class="form-group" 会给一个上边距-->
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">邮箱：</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">上传文件</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block"></p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" checked="checked">复选框
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>

基本表单效果显示

内敛表单

<!--内敛表单-->
<div class="container">
    <!-- for="id" 点击此空间就相当于点击目标控件-->
    <!-- class="form-control" 会给当前空间一个宽度百分百的样式-->
    <!-- class="form-group" 会给一个上边距-->
    <form class="form-inline">
        <div class="form-group">
            <label for="exampleInputEmail2">邮箱：</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword2">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile2">上传文件</label>
            <input type="file" id="exampleInputFile2">
            <p class="help-block"></p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" checked="checked">复选框
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</div>

内敛表单效果显示

水平排列表单

<!--水平排列表单-->
<div class="container">
    <!-- for="id" 点击此空间就相当于点击目标控件-->
    <!-- class="form-control" 会给当前空间一个宽度百分百的样式-->
    <!-- class="form-group" 会给一个上边距-->
    <form class="form-horizontal">
        <div class="form-group">
            <label for="exampleInputEmail3">邮箱：</label>
            <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword3">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile3">上传文件</label>
            <input type="file" id="exampleInputFile3">
            <p class="help-block"></p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" checked="checked">复选框
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</div>

水平排列表单效果显示

被支持的控件

输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

文本域

<div class="container">
    <form>
        <!--rows="3" 表示文本域可以输入的行数-->
        <label>文本域</label>
        <div class="form-group">
        <textarea class="form-control" rows="3" style="resize:none;"></textarea>
        </div>
    </form>
</div>

文本域效果显示

禁用状态

<form>
    	<!--通过disabled来控制控件的批量禁用-->
        <fieldset disabled>
            <div class="form-group">
                <label for="disabledTextInput">被禁用的input</label>
                <input type="text" id="disabledTextInput" class="form-control" placeholder="被禁用的input">
            </div>
            <div class="form-group">
                <label for="disabledSelect">被禁用的下拉框</label>
                <select id="disabledSelect" class="form-control">
                    <option>被禁用的 select</option>
                </select>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 被禁用的复选框
                </label>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </fieldset>
    </form>

禁用状态效果显示

只读状态

<form>
        <input class="form-control" type="text" placeholder="只读" readonly>
    </form>

只读状态效果显示

效验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

效验状态使用

<div class="container">
    <form>
        <!--改变边框字体颜色 has-success has-warning has-error-->
        <div class="form-group has-success">
            <label class="control-label" for="inputSuccess1">Input with success</label>
            <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
            <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
        </div>
        <div class="form-group has-warning">
            <label class="control-label" for="inputWarning1">Input with warning</label>
            <input type="text" class="form-control" id="inputWarning1">
        </div>
        <div class="form-group has-error">
            <label class="control-label" for="inputError1">Input with error</label>
            <input type="text" class="form-control" id="inputError1">
        </div>
        <div class="has-success">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="checkboxSuccess" value="option1">
                    Checkbox with success
                </label>
            </div>
        </div>
        <div class="has-warning">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="checkboxWarning" value="option1">
                    Checkbox with warning
                </label>
            </div>
        </div>
        <div class="has-error">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="checkboxError" value="option1">
                    Checkbox with error
                </label>
            </div>
        </div>
    </form>
</div>

效验状态效果显示

控件尺寸

控件高度

<div class="container">
    <form>
        <input class="form-control input-lg" type="text" placeholder="变高">
        <input class="form-control" type="text" placeholder="默认高度">
        <input class="form-control input-sm" type="text" placeholder="变矮">
    </form>
</div>

控件高度效果显示

控件宽度

<div class="container">
    <form>
        <!--form-control会给一个内边距-->
        <div class="col-xs-2">
            <input type="text" class="form-control" placeholder="宽度2">
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="宽度3">
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" placeholder="宽度4">
        </div>
    </form>
</div>

控件宽度效果显示

5.按钮

可以作为按钮使用的标签或元素

代码示例

<div class="container">
  <!--可以作为按钮使用的标签或元素 为<a>,<button> 或 <input>元素添加按钮类-->  
  <a class="btn btn-default" href="#" role="button">Link</a>
  <button class="btn btn-default" type="submit">Button</button>
  <input class="btn btn-default" type="button" value="Input">
  <input class="btn btn-default" type="submit" value="Submit">
</div>

代码效果显示

预定义样式

<!--预定样式-->
<div class="container">
    <!-- btn-default 为默认按钮样式 !注意如果不写btn-default此按钮就没有任何样式 -->
    <button type="button" class="btn btn-default">（默认样式）Default</button>
    <!-- btn-primary 为首选项（深蓝色）-->
    <button type="button" class="btn btn-primary">（首选项）Primary</button>
    <!-- btn-primary 为成功（绿色）-->
    <button type="button" class="btn btn-success">（成功）Success</button>
    <!-- btn-primary 一般信息（天蓝色）-->
    <button type="button" class="btn btn-info">（一般信息）Info</button>
    <!-- btn-primary 为警告（橙色）-->
    <button type="button" class="btn btn-warning">（警告）Warning</button>
    <!-- btn-primary 为危险（红色）-->
    <button type="button" class="btn btn-danger">（危险）Danger</button>
    <!-- btn-primary 为链接（和a标签一样）（深蓝色）-->
    <button type="button" class="btn btn-link">（链接）Link</button>
</div>

代码效果显示

按钮尺寸

<!--可以作为按钮的标签元素-->
<div class="container">
    <p>
        <!--btn-lg给按钮一个比较大的大小和内边距-->
        <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>
        <!--btn-sm给按钮一个比较小的大小和内边距-->
        <button type="button" class="btn btn-primary btn-sm">小按钮</button>
        <button type="button" class="btn btn-default btn-sm">小按钮</button>
    </p>
    <p>
        <!--btn-xs给按钮一个超级小的大小和内边距-->
        <button type="button" class="btn btn-primary btn-xs">超小尺寸</button>
        <button type="button" class="btn btn-default btn-xs">超小尺寸</button>
    </p>
</div>

代码效果显示

块级按钮

会占满整个容器并把此按钮变成块级元素

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

代码效果显示

按钮禁用状态

普通按钮禁用状态

<!--禁用状态按钮-->
<div class="container">
    <button type="button" class="btn btn-lg btn-primary" disabled="disabled">禁用的首选项按钮</button>
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用的按钮</button>
</div>

代码效果显示

链接按钮禁用状态

<!--禁用状态按钮-->
<!-- hidden能让整个模块隐藏-->
<div class="container hidden">
    <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的首选项链接按钮</a>
    <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用的链接按钮</a>
</div>

代码效果显示

点击没有任何反应没有禁用标识

整合不易还请大家一键三连支持一下！

一篇文章熟练使用BootStrap，用的时候翻一下百度都省了！

响应式开发

响应式开发概念

响应式开发原理

响应式布局容器

BootStrap

BootStrap 简介

为什么使用 Bootstrap

Bootstrap 包的内容

BootStrap 初步使用

布局容器

格栅系统

1.格栅系统参数

2.格栅系统偏移

页面排版

1.副标题（small）

2.标记（mark）

删除/无用文本标记

字体加重倾斜标记

字体加重倾斜标记（HTML）

对齐标记

缩略语

无样式/内敛列表

3.表格

基本表格（ .table ）

表格状态（颜色）类

条纹表格(.table-striped)

带边框的表格(.table-bordered)

鼠标悬停表格(.table-hover)

紧缩表格

响应式表格

4.表单

基本表单

内敛表单

水平排列表单

被支持的控件

输入框

文本域

禁用状态

只读状态

效验状态

控件尺寸

5.按钮

预定义样式

按钮尺寸

块级按钮

按钮禁用状态

相关文章

热门标签

最新文章

目录