Bootstrap前端框架

bootstrap

前端框架

发布日期: 2020-07-28

文章字数: 933

阅读时长: 4 分

阅读次数:

Bootstrap

概念：一个前端开发的框架
- 框架：一个半成品软件，开发人员在框架基础上，在进行开发
- 好处：
  - 定义了很多CSS样式和js插件，开发人员可以直接使用来丰富页面效果
  - 响应式布局：同一套页面可以兼容不同分辨率的设备
快速入门
1. 下载：v3.bootcss.com
2. 在项目中将三个文件夹和jquery.js（放到js文件夹中）复制到项目中
3. 创建html页面，引入必要的资源文件
  1. 引入一个css，两个js
```
           <link href="css/bootstrap.min.css" rel="stylesheet">
           <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
```

响应式布局

同一套页面可以兼容不同分辨率的设备
实现：依赖于==栅格系统==：将一行平均分成12个格子，可以指定元素占几个格子
步骤：(class来定义，一个class里可以定义多个属性值)
1. 定义容器。相当于之前的table
  - 容器分类：
    1. container：两边留白
    2. container-fluid：每一种设备都是100%宽度
2. 定义行。相当于之前的tr 样式：row
3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目(一个格子占几个位置)
  - 设备代号：
    1. xs：超小屏幕手机 (<768px)：col-xs-12
    2. sm：小屏幕平板 (≥768px)
    3. md：中等屏幕桌面显示器 (≥992px)
    4. lg：大屏幕大桌面显示器 (≥1200px)
- 注意：
  1. 一行中如果格子数目超过12，则超出部分自动换行。
  2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
  3. （向下不兼容）如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

CSS样式和JS插件

全局CSS样式：（class来定义，一个class里可以定义多个属性值）

按钮：

button标签
class="btn btn-default/success/info（一般信息）/warning/danger/link"

图片：

img标签
*  class="img-responsive"：图片在任意尺寸都占100%
    *  图片形状
        *  <img src="..." alt="..." class="img-rounded">：方形
        *  <img src="..." alt="..." class="img-circle"> ： 圆形
        *  <img src="..." alt="..." class="img-thumbnail"> ：相框

表格：

table标签    
    * table 表格样式
    * table-bordered  表格边框
    * table-hover 表格悬停特效

  tr标签
    * active灰色/success绿色/info蓝色/warning黄色/danger红色

表单：

input标签
    * class="form-control"
注意：用div包裹表单，div中写class="form-group"效果更棒
     <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>//这是扩大焦点
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
      </div>

水平排列表单
form标签中class="form-horizontal"
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

组件：

导航条：看文档，把模板复制进去，看不懂删了就知道是哪个结构，改就可以了

分页条：

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

ul标签
    * pager 翻页
    * pagination-lg 大号分页
    * pagination-sm 小号分页

li标签
    * active 激活
    * disabled 禁用