Bootstrap 的入门（一）

前言：这是我第一次做的博客，如果有什么做的不对的地方，欢迎大家提出喔！！！

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no自动适应手机屏幕的宽度。

Bootstrap模版

可以参考Bootstrap官网参考模版
1、[Bootstrap v3](https://v3.bootcss.com/getting-started/#download)
2、[Bootstrap v4](https://v4.bootcss.com/docs/getting-started/introduction/)

容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

• ==.container== 类用于固定宽度并支持响应式布局的容器。两边留白
• ==.container-fluid== 类用于 100% 宽度，占据全部视口（viewport）的容器。每一种设备都是100%宽度

<div class="container">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>这是一些文本。</p> 
</div>
-----------------------------------------------------------------------------------------------------
<div class="container-fluid">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p> 
</div>

栅格系统

响应式布局

栅格系统用于通过一系列的行（==row==）与列（==column==）的组合来创建页面布局

• 同一套页面可以兼容不同分辨率的设备。

• 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

• 步骤

  2. 定义行。通过 行（row）在水平方向创建一组 列（column）
  3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
     • 设备代号：

       1. xs：超小屏幕 手机 (<768px)：col-xs-12

       2. sm：小屏幕 平板 (≥768px)

       3. md：中等屏幕 桌面显示器 (≥992px)

       4. lg：大屏幕 大桌面显示器 (≥1200px)

  • 注意：
    1. 一行中如果格子数目超过12，则超出部分自动换行。
    2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
    3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

代码如下：

<div class="container">   <!-- 两边留白-->
      <h1>Hello World!</h1>
      <p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col"  div，会显示四个等宽的列。</p>
      <div class="row">
        <div class="col" style="background-color:lavender;">JavaScript</div>
        <div class="col" style="background-color:orange;">CSS</div>
        <div class="col" style="background-color:lavender;">HTML</div>
      </div>
    </div>

container 的样式<两边留白>:

<div class="container-fluid"> <!-- 每一种设备都是100%宽度-->
<h1>Hello World!</h1>
      <p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col"  div，会显示四个等宽的列。</p>
      <div class="row">
        <div class="col" style="background-color:lavender;">JavaScript</div>
        <div class="col" style="background-color:orange;">CSS</div>
        <div class="col" style="background-color:lavender;">HTML</div>
      </div>
    </div>

container-fluid 的样式<每一种设备都是100%宽度>:

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

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

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

按钮

<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</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-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

大家可以按照自己喜欢的样式来选择按钮哦~

按钮类可用于<a>, <button>, 或 <input>元素上:

<a href="#" class="btn btn-info" role="button">链接按钮</a>
<button type="button" class="btn btn-info">按钮</button>
<input type="button" class="btn btn-info" value="输入框按钮">
<input type="submit" class="btn btn-info" value="提交按钮">

样式：

按钮设置边框

<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>

样式：

不同大小的按钮

<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>

样式：

块级按钮

<button type="button" class="btn btn-primary btn-block">按钮 1</button>

样式：

激活和禁用的按钮

按钮可设置为激活或者禁止点击的状态。

.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

<button type="button" class="btn btn-primary active">点击后的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>