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

╰+攻爆jí腚メ 2022-09-09 12:59 227阅读 0赞

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

![在这里插入图片描述][06dc82ed4ec04ae9b5005dddb8b0013a.gif_pic_center]

### 文章目录 ###

*  响应式开发
 *   *  响应式开发概念
     *  响应式开发原理
     *  响应式布局容器
 *  BootStrap
 *   *  BootStrap 简介
     *  为什么使用 Bootstrap
     *  Bootstrap 包的内容
     *  BootStrap 初步使用
     *  布局容器
     *  格栅系统
     *   *  1.格栅系统参数
         *  2.格栅系统偏移
     *  页面排版
     *   *  1.副标题（small）
         *  2.标记（mark）
         *   *  删除/无用文本标记
             *  字体加重倾斜标记
             *  字体加重倾斜标记（HTML）
             *  对齐标记
             *  缩略语
             *  无样式/内敛列表
         *  3.表格
         *   *  基本表格（ .table ）
             *  表格状态（颜色）类
             *  条纹表格(.table-striped)
             *  带边框的表格(.table-bordered)
             *  鼠标悬停表格(.table-hover)
             *  紧缩表格
             *  响应式表格
         *  4.表单
         *   *  基本表单
             *  内敛表单
             *  水平排列表单
             *  被支持的控件
             *   *  输入框
                 *  文本域
                 *  禁用状态
                 *  只读状态
                 *  效验状态
                 *  控件尺寸
         *  5.按钮
         *   *  预定义样式
             *  按钮尺寸
             *  块级按钮
             *  按钮禁用状态

# 响应式开发 #

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_10_color_FFFFFF_t_70_g_se_x_16]

## 响应式开发概念 ##

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

## 响应式开发原理 ##

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

<table> 
 <thead> 
  <tr> 
   <th>设备划分</th> 
   <th>尺寸区间</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>超小屏幕（手机）</td> 
   <td>&lt;768px</td> 
  </tr> 
  <tr> 
   <td>小平设备（平板）</td> 
   <td>&gt;= 768px~992px</td> 
  </tr> 
  <tr> 
   <td>中等屏幕（桌面显示器）</td> 
   <td>&gt;=992px~1200px</td> 
  </tr> 
  <tr> 
   <td>宽屏设备（大桌面显示器）</td> 
   <td>&gt;=1200px</td> 
  </tr> 
 </tbody> 
</table>

## 响应式布局容器 ##

*  响应式需要一个父级作为布局容器，来配合子集容器来实现效果
 *  例如：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>

宽屏效果

*  ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16]

小屏效果

*  ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 1]

--------------------

# BootStrap #

*  官网：[https://getbootstrap.com/][https_getbootstrap.com]
 *  菜鸟教程：[https://www.runoob.com/bootstrap/bootstrap-tutorial.html][https_www.runoob.com_bootstrap_bootstrap-tutorial.html]
 *  中文官网：[https://www.bootcss.com/][https_www.bootcss.com]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16]

## BootStrap 简介 ##

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

## 为什么使用 Bootstrap ##

1.  **移动设备优先**：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
2.  **浏览器支持**：所有的主流浏览器都支持 Bootstrap。 ![在这里插入图片描述][c2bf08af03ed4b498850290dc0f885a2.png]
3.  **容易上手**：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
4.  **响应式设计**：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

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

## Bootstrap 包的内容 ##

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

## BootStrap 初步使用 ##

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16]

1.  点击组件粘贴想要的样式

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_17_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 1]

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

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

![在这里插入图片描述][2ae2dea3fb5940deb388d576cc5af94f.png]  
`注意：下面还有很多组件可以复制 ，前提当前页面要有bootstrap核心文件`

## 布局容器 ##

*  固定宽度布局容器

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

*  占据全部视口布局容器

<div class="container-fluid"></div>

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

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 2]

## 格栅系统 ##

### 1.格栅系统参数 ###

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

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

*  格栅系统使用

<!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">
      
      <title>格栅系统</title>
    
      
      <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 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>

> 格栅系统效果显示

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

![在这里插入图片描述][e3476f183d6245f58c920591f012ba52.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_17_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 3]

### 2.格栅系统偏移 ###

*  格栅偏移参数：

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

*  格栅偏移使用：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>格栅系统偏移</title>
      
      <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 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>

> 格栅偏移校效果显示

![在这里插入图片描述][8bbe5edf933741eebe1e0c5ee071534d.png]

--------------------

## 页面排版 ##

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

> 副标题使用效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 4]

--------------------

### 2.标记（mark） ###

*  标记使用

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

> 标记效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 2]

#### 删除/无用文本标记 ####

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

> 删除无用标记效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 2]

#### 字体加重倾斜标记 ####

<h1><em><strong>加重字体</strong></em></h1>

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 3]

#### 字体加重倾斜标记（HTML） ####

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

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 5]

#### 对齐标记 ####

> 对齐标记效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 3]

#### 缩略语 ####

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

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 4]

--------------------

### 3.表格 ###

#### 基本表格（ .table ） ####

> 基本表格效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_17_color_FFFFFF_t_70_g_se_x_16 2]

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 5]

#### 表格状态（颜色）类 ####

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

*  表格状态使用

> 表格状态效果显示

![在这里插入图片描述][a6baefda78724f608587e06e0d05ed7b.png]

#### 条纹表格(.table-striped) ####

> 条纹表格效果显示

![在这里插入图片描述][b0375e1f339244d0952f20e159798e0a.png]

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

> 带边框表格效果显示

![在这里插入图片描述][aac833960d9a43c1bd1c991e4d880254.png]

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

> 鼠标悬停表格效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 6]

#### 紧缩表格 ####

> 紧缩表格效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 6]

#### 响应式表格 ####

> 响应式表格效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 7]

--------------------

### 4.表单 ###

#### 基本表单 ####

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

> 基本表单效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 4]

#### 内敛表单 ####

<div class="container">
        
        
        
        <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>

> 内敛表单效果显示

![在这里插入图片描述][927e986124cc423a8695809377afa0e9.png]

#### 水平排列表单 ####

<div class="container">
        
        
        
        <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>

> 水平排列表单效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 5]

#### 被支持的控件 ####

##### 输入框 #####

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

##### 文本域 #####

> 文本域效果显示

![在这里插入图片描述][ef7ba6573e0249e5a1f4eab7f240e952.png]

##### 禁用状态 #####

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

> 禁用状态效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 6]

##### 只读状态 #####

> 只读状态效果显示

![在这里插入图片描述][26b4ca6cfdea4fb4b0ee6831dc810a02.png]

##### 效验状态 #####

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

效验状态使用

<div class="container">
        <form>
            
            <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>

> 效验状态效果显示

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 7]

##### 控件尺寸 #####

*  控件高度

> 控件高度效果显示

![在这里插入图片描述][3cf6cfb6674043c2849047310f394775.png]

*  控件宽度

> 控件宽度效果显示

![在这里插入图片描述][3d4852fe759746ec934051eec7f6e188.png]

--------------------

### 5.按钮 ###

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

代码示例

<div class="container">
        
      <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>

> 代码效果显示

![在这里插入图片描述][246aec2defb04ab5a96d79ffaa29cf05.png]

#### 预定义样式 ####

<div class="container">
        
        <button type="button" class="btn btn-default">（默认样式）Default</button>
        
        <button type="button" class="btn btn-primary">（首选项）Primary</button>
        
        <button type="button" class="btn btn-success">（成功）Success</button>
        
        <button type="button" class="btn btn-info">（一般信息）Info</button>
        
        <button type="button" class="btn btn-warning">（警告）Warning</button>
        
        <button type="button" class="btn btn-danger">（危险）Danger</button>
        
        <button type="button" class="btn btn-link">（链接）Link</button>
    </div>

> 代码效果显示

![在这里插入图片描述][ab32f7ac58cd43b88e90f0e5ae9f6d83.png]

#### 按钮尺寸 ####

<div class="container">
        <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>
    </div>

> 代码效果显示

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-geDLZVXR-1630482054719)(C:\\Users\\wlf\\AppData\\Roaming\\Typora\\typora-user-images\\1630467602311.png)\]][img-geDLZVXR-1630482054719_C_Users_wlf_AppData_Roaming_Typora_typora-user-images_1630467602311.png]

#### 块级按钮 ####

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

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

> 代码效果显示

![在这里插入图片描述][febc1ac5499e4dd3810ee29b013c3fe9.png]

#### 按钮禁用状态 ####

*  普通按钮禁用状态

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

> 代码效果显示

![在这里插入图片描述][bdee4731495b498f88a1b4fba40b2854.png]

*  链接按钮禁用状态

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

> 代码效果显示

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

![在这里插入图片描述][19033d37c6c744849ef0869c44d891a2.png]

--------------------

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_14_color_FFFFFF_t_70_g_se_x_16]

[06dc82ed4ec04ae9b5005dddb8b0013a.gif_pic_center]: /images/20220829/8e5c97a6e3e64d46ba08136bd7fb1418.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/066cf53625654b3c8516a8b67448f850.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/be2bd63224984afa854ede340d391b8f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/7bd071060ebe412d8d461325ed663392.png
[https_getbootstrap.com]: https://getbootstrap.com/
[https_www.runoob.com_bootstrap_bootstrap-tutorial.html]: https://www.runoob.com/bootstrap/bootstrap-tutorial.html
[https_www.bootcss.com]: https://www.bootcss.com/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e24bbb7f7e154d7e8135cb530d5a2ec8.png
[c2bf08af03ed4b498850290dc0f885a2.png]: /images/20220829/db5413aed5294a0f84572e98e340c315.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f7800b787df94b229c152e26cc6f5709.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/811effcb2c864b9ba475421ffd9fbeae.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/019bc59bd954414ea95027af4426822e.png
[2ae2dea3fb5940deb388d576cc5af94f.png]: /images/20220829/652e2c989e6443d29420150b4826a249.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/ce1d969a544f445dbd1873fff7b24f78.png
[e3476f183d6245f58c920591f012ba52.png]: /images/20220829/4b4b1248445d448ab57dd5cd11cecded.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_17_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/dcb76ed5314041bf99c0fa7d8a38c72f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/89c6cdc53c944cc094189cb740657ea4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/b9f9ff3148844f23b9c413d61340ca4c.png
[8bbe5edf933741eebe1e0c5ee071534d.png]: /images/20220829/3ba58cf0e21f47d7ba8ca41b3b094827.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/8f8c062344e54bfead0decf2be88cd8f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/0159bc46a8be482484b6bb2edc8bae24.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/ba87650981564ecfb8f84bbd2e1529b1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/21319c38adb44d35b6e48b9ee9c7ebad.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/e2e7cb33aeb246948cbdc1a92077d29a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/71143e74447f4978b549ae6b71c704a2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/a9ba83c399264a0b977091bbe67c1b3d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_17_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/6b0c5e2919bf4d0e8c455cba57f2ad22.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/c5ab5c4753614cafbcff7a03986f069a.png
[a6baefda78724f608587e06e0d05ed7b.png]: /images/20220829/3f91ed4ff4f54a47bd8d5db82b533438.png
[b0375e1f339244d0952f20e159798e0a.png]: /images/20220829/a9e14c04cc9442b0bd6339cae37af29f.png
[aac833960d9a43c1bd1c991e4d880254.png]: /images/20220829/83ebd356f99d4346893197537844192f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/ae791e2286fd4d5cab5d4a7e5b670098.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/cadb1e78f23f4de0b6f84190a2144c4d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_19_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/e5145e02f651451a9c63ec9cfd4632d1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/5b8fd15479644030b573f3ca465eb069.png
[927e986124cc423a8695809377afa0e9.png]: /images/20220829/b64657ab771d4899b7f3ae48e826a92c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/4a43280672b049fea2ea824a6e1b4cd5.png
[ef7ba6573e0249e5a1f4eab7f240e952.png]: /images/20220829/3961fb06246f48fe9c06e77a76098093.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/7daa94ad88484f7bafb67d3a51cdbdfa.png
[26b4ca6cfdea4fb4b0ee6831dc810a02.png]: /images/20220829/9acc5ade111d4c738a2a1a32d99a9ea9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_18_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/4d15b4c4fa71496598af4dbb8164c4f7.png
[3cf6cfb6674043c2849047310f394775.png]: /images/20220829/a377cd92ebc340f0acef3f32a7c92d89.png
[3d4852fe759746ec934051eec7f6e188.png]: /images/20220829/ab01d16137dd4c55b2d242e8b004b18e.png
[246aec2defb04ab5a96d79ffaa29cf05.png]: /images/20220829/78b447601dbf457fab5dec17d01587ce.png
[ab32f7ac58cd43b88e90f0e5ae9f6d83.png]: /images/20220829/5ad5c68b074244e3b1d89b5d1af68191.png
[img-geDLZVXR-1630482054719_C_Users_wlf_AppData_Roaming_Typora_typora-user-images_1630467602311.png]: /images/20220829/2af4d3d6799a4ccfbf9d39c39ba48133.png
[febc1ac5499e4dd3810ee29b013c3fe9.png]: /images/20220829/83792a89e0f94c36ac9c7f0df39afcd0.png
[bdee4731495b498f88a1b4fba40b2854.png]: /images/20220829/ead69c56a46f435a9483d208fc1f98d6.png
[19033d37c6c744849ef0869c44d891a2.png]: /images/20220829/bab1e7997bbe4ecca0adf3fd0a63c675.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oy95ZGo55qESmF2YSBMaWJyYXJ5_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/0d279175b5a047dabdb867ea72b85357.png