Bootstrap

Bootstrap

一、简介

  • Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

  • 凡是使用过Bootstrap的开发者，都不在乎做这么两件事情：复制and粘贴。

  • 它用于开发响应式布局、移动设备优先的 WEB 项目

二、安装

1、本地链接

官网下载

2、CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
​
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
​
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
View Code

引入：

<head>
    <!-- 在head标签上部导入bs的css -->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <!-- 再导入自定义修改的css -->
    <link rel="stylesheet" href="css/my.css">
</head>
<body>
<!-- html代码结构 -->
    ...
    
<!--bs的脚本依赖于jq, 所以要提前导入jq-->
<!--脚本逻辑尽量放在html结构之下-->
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>

三、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器

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

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

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

  • 固定宽度：.container

  • 流式布局：.container-fluid

 <!--总结; 两种容器(container | container-fluid)默认都有左右15px padding-->
<!--固定宽度容器(采用响应式布局)-->
<div class="container">
    <!-- 行: .row, 可以取消容器的默认左右15px padding-->
    <div class="row">
        <h1 class="bg-info">标题</h1>
    </div>
</div>
<!--动态宽度布局(采用流式布局)-->
<div class="container-fluid">
    <div class="row">
        <h1 class="bg-info">标题</h1>
    </div>
</div>

四、响应式布局

概念：开发了一种自适应写法，即一次开发，处处显示！

  • 超小屏幕：小于 768px

  • 小屏幕：大于等于 768px

  • 中等屏幕：大于等于 992px

  • 大屏幕：大于等于 1200px

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>容器于响应式</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .box {
            /*width: 500px;*/
            height: 100px;
            background-color: orange;
            margin: 0 auto;
        }

        /*屏幕尺寸 >1200px 会激活该响应式分支*/
        @media (min-width: 1200px) {
            .box {
                width: 1200px;
            }
        }
        /*992px ~ 1200px*/
        @media (min-width: 992px) and (max-width: 1200px) {
            .box {
                width: 992px;
            }
        }
        /*小于992px*/
         @media (max-width: 992px) {
            .box {
                width: 50px;
            }
        }

        /*用来完成响应式布局
        @media (min-width: 768px) {

        }
        */
    </style>
</head>
<body>
    <!--响应式布局-->
    <div class="box"></div>

    <!--固定宽度容器(采用响应式布局)-->
    <div class="container">
        <!--缩放屏幕尺寸,发现宽度有四种状态存在 => 响应式布局-->
        <h1 class="bg-pink">标题</h1>

        <div class="container">
            <h1 class="bg-pink">子标题</h1>
        </div>
    </div>
    <!--动态宽度布局(采用流式布局)-->
    <div class="container-fluid">
        <h1 class="bg-pink">标题</h1>
    </div>
    <!--总结; 两种容器默认都有左右15px padding-->

    <!-- 行: .row, 可以取消容器的默认左右15px padding-->
    <div class="container">
        <div class="row">
            <h1 class="bg-info">标题</h1>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <h1 class="bg-info">标题</h1>
        </div>
    </div>
    <!--行row就是配合容器来使用, 可以抵消容器默认padding, 且可以给内容按行分组-->
    <div class="container">
        <div class="row">
            ...
        </div>
        <div class="row">
            ...
        </div>
    </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
容器响应式布局案例

五、删格系统

1、概念

将所在父级的宽度等分为12等分
四种屏幕尺寸 col-xs- | col-sm- | col-md- | col-lg-
偏移 col-xs-offset- | ... | col-lg-offset-
<div class="row">
    <div class="ele1 col-lg-4 col-xs-6"></div>
    <div class="ele2 col-lg-4 col-lg-offset-4 col-xs-6"></div>
</div>
<!-- 超大屏幕下: ele1占4等分 ele2与ele1间隔4等分,自己也占4等分 -->
<!-- 在超小,小,中等屏幕下, ele1与ele2均占6等分 -->

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：


栅格参数：

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

  • 移动端适配

<meta name="viewport" content="width=device-width, user-scaleable=no" />
<!-- 适配移动端设备的每一个页面均需要设置 -->

2、列比

  • 超小屏幕：.col-xs-*

  • 小屏幕：.col-sm-*

  • 中等屏幕：.col-md-*

  • 大屏幕：.col-lg-*

只设置小屏列比会影响大屏列比；只设置大屏列比小屏时会撑满屏幕

3、行

<div class="row"></div>
...
<div class="row"></div>

4、列偏移

  • 超小屏幕：.col-xs-offset-*

  • 小屏幕：.col-sm-offset-*

  • 中等屏幕：.col-md-offset-*

  • 大屏幕：.col-lg-offset-*

六、辅助类

1、 情境背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

2、快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

3、快速清浮动

<div class="clearfix">...</div>

4、显隐

<div class="show">...</div>
<div class="hidden">...</div>

七、字体图标

<i class="glyphicon glyphicon-*"></i>

八、组件

表格表单 字体图标 下拉菜单 按钮组 输入框俎 导航 分页 标签和徽章 页头 缩率图 进度条 ...
表格
<!--striped条纹 bordered边框 hover悬浮-->
<table class="table table-striped table-bordered table-hover">
    <tr style="text-align: center">
        <th>标题</th>
        <th>标题</th>
        <th>标题</th>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <!-- 颜色强调,整行tr 或 单元格 th|td -->
    <tr class="success">
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td class="danger">单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td class="info" colspan="2" style="text-align: center">单元格</td>
        <!--<td>单元格</td>-->
    </tr>
</table>
表单
<form action="">
    <!-- 分行: form-group -->
    <div class="form-group">
        <!--label的for是关联匹配的input的id, 当label点击时会让input获取焦点-->
        <label for="usr">用户名:</label>
        <!-- form-control: bs控制 -->
        <input class="form-control" type="text" name="usr" id="usr">
    </div>
    <div class="form-group">
        <label for="pwd">密码:</label>
        <input class="form-control" type="password" name="pwd" id="pwd">
    </div>
    <div class="form-group checkbox">
        <!--复选框-->
        <label>
            <input type="checkbox" value="reading" name="sk">请阅读
        </label>
    </div>
</form>

<!-- 内联表单 -->
<form class="form-inline"></form>

<!-- label与input同行显示 -->
<form action="" class="form-horizontal">
    <div class="form-group has-warning">
        <label for="usr2" class="col-sm-2 control-label">用户名:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="usr2" id="usr2" placeholder="请输入用户名">
        </div>
    </div>
</form>

官方文档
posted @ 2018-12-29 19:35  伍萬磊  阅读(475)  评论(0)  编辑  收藏  举报