Bootstrap 基本使用

作者: dawsonenjoy | 来源:发表于2019-05-21 09:17 被阅读212次

该框架提供友好的电脑版和移动设备版的页面布局配置，在CSS样式方面十分突出，要求文件必须为HTML5类型，并且在IE7以上环境使用

环境导入

需要引入相关的CSS和JS文件，由于其基于jQuery，所以也需要提前引入jQuery

<!--  核心 CSS 文件-bootstrap.min.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" >

<!-- 引入jquery -->
<script src="http://code.jquery.com/jquery-3.4.1.js" ></script>

<!-- 核心 JavaScript 文件-bootstrap.min.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>

使用方法

该框架主要针对响应式的CSS样式，因此使用时主要通过对标签设置对应的类属性来实现样式的设置，说白了，就是框架里提供了很多class的样式，你只要在对应的标签里使用他提供的类就可以得到想要的效果了

手机界面兼容

如果想要在手机界面自动调节友好样式，则需要在文件当中添加下面的标签：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

栅格系统

在Bootstrap框架当中，每列基本被分为12格，要使用栅格系统需要在该<div>标签当中设置class="container"，而对于每一行则用<div class="row">包着，内部由于有12格，因此可以结合具体情况分配比例，举例：

lass="container">
    <!-- 定义栅格系统 -->
    <div class="row">
        <!-- 定义一行 -->
        <div class="col-md-4">
            <!-- 定义了三列，每列占3格 -->
            <img src="timg.jpg" width="300px">
        </div>
        <div class="col-md-4">
            <img src="timg.jpg" width="300px">
        </div>
        <div class="col-md-4">
            <img src="timg.jpg" width="300px">
        </div>
    </div>
    <div class="row">
        <!-- 定义了4列，分别占6、3、2、1格 -->
        <div class="col-md-6">
            <img src="timg.jpg" width="300px">
        </div>
        <div class="col-md-3">
            <img src="timg.jpg" width="300px">
        </div>
        <div class="col-md-2">
            <img src="timg.jpg" width="300px">
        </div>
        <div class="col-md-1">
            <img src="timg.jpg" width="300px">
        </div>
    </div>
</div>

列偏移

对于上面的情况如果没用到规定格子数，则一般右边剩下的格子会直接空出来，但是如果想要在规定的地方空出来，比如第二列的左边空出4格，则可以在该列的类中添加一个col-md-offset-4的属性，举例：

class="row">
    <div class="col-md-4">
        <img src="timg.jpg" width="300px">
    </div>
    <div class="col-md-4 col-md-offset-4">
        <!-- 第二列的左边空4格 -->
        <img src="timg.jpg" width="300px">
    </div>
</div>

列嵌套

在一个列里，可以再进行嵌套栅格系统，此时被嵌套的列里也拥有12个列，以此类推...

注：
上面在列中用的类前缀是col-md-，其表示当窗口宽度低于970px时会将所有的列分到单独的行中，即变成单列模式。其他还有对窗口控制的类前缀如下：

col-xs-  总是水平排列，不会变成单列模式
col-sm-  750px变单列
col-lg-  1170px变单列

排版

该框架提供了很多的类属性和标签样式，常用如下：
1.标题：<h1>~<h6>中.page-header
2.段落：<p>中.lead
3.黄色标记：<mark>
4.删除线：<del>
5.小字：<small>
6.文本对齐：<p>中.text-left/.text-center/.text-right
7.文本大小写：<p>中.text-lowercase/.text-uppercase/.text-capitalize

代码

代码语句

<code>

代码块

<pre>

键盘标记

<kbd>

表格

表格样式

<table>中.table-表格、.table-striped-条纹、.table-bordered-边框、.table-hover-悬浮时样式，这些样式可以结合使用

表格颜色

<tr>/<td>中.active-灰色背景、.success-绿色背景、.info-蓝色背景、.warning-黄色背景、.danger-红色背景

响应式表格

<div>中.table-responsive-当窗口缩小到一定程度时，横向将会出现滚动条，使用时将其包在对应的<table>外面，使用举例：

<div class="table-responsive">
    <table class="table table-striped">
        <tr class="warning">
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
        </tr>
        <tr>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
        </tr>
        <tr>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaa</td>
        </tr>
    </table>
</div>

按钮

按钮样式

<button>/<input type="button">等按钮中.btn-灰色按钮、.btn .btn-default-白色按钮、.btn .btn-success-绿色背景、.btn .btn-primary-蓝色背景、.btn .btn-info-浅蓝背景、.btn .btn-warning-黄色背景、.btn .btn-danger-红色背景、.btn .btn-link-超链接背景，举例：

<button class="btn">灰色按钮</button>
<button class="btn btn-default">白色按钮</button>
<button class="btn btn-primary">蓝色按钮</button>
<button class="btn btn-success">绿色按钮</button>
<button class="btn btn-info">浅蓝色按钮</button>
<button class="btn btn-warning">黄色按钮</button>
<button class="btn btn-danger">红色按钮</button>
<button class="btn btn-link">超链接按钮</button>

按钮大小

.btn-lg-大、.btn-sm-小、.btn-xs-微小

块级按钮

.btn-block-独占一行

表单

配置表单组使用类form-group，其中对于输入框等可以使用类form-control使其能够占满一行，并且根据窗口大小自动改变，还有可以设置placeholder属性来定义默认值，举例：

<form>
    <div class="form-group">
        <label for="name">用户名：</label>
        <input type="text" class="form-control" id="name" placeholder="default name">
    </div>
    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" class="form-control">
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-success form-control" value="go">
        <input type="reset" class="btn btn-danger form-control" value="cancel">
    </div>
</form>

内联表单

在<form>标签当中添加form-inline类，可以使表单内容都在同一行内显示

输入框组

即对于一个输入框，可以有前缀和后缀修饰，使用input-group类包起来，对于前后缀则使用类input-group-addon，如果是前后缀的按钮则可以使用类input-group-btn，举例：

<div class="input-group">
    <div class="input-group-addon">$</div>
    <input class="form-control">
    <div class="input-group-addon">.00</div>
</div>
<div class="input-group">
        <input class="form-control">
        <div class="input-group-btn">
            <button class="btn btn-danger">GO</button>
        </div>
</div>

输入框颜色

.has-success-绿色、.has-warning-黄色、.has-error-红色，举例：

<div class="form-group has-success">
    <label for="name">用户名：</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="default name">
</div>

禁用/只读

使用disabled/readonly属性实现，要注意的是对于禁用的内容，其对应的name和value不会上传，而只读的内容会上传，使用举例：

<div class="form-group">
    <label for="name">用户名：</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="default name" disabled>
</div>
<div class="form-group">
    <label for="password">密码：</label>
    <input type="password" id="password" name="pwd" class="form-control" readonly>
</div>

集合控制

当想要对特定的一组标签设置相同的属性时，可以使用<fieldset>标签来设置属性并嵌套起来，举例：

<fieldset disabled>
    <!-- 全部禁用 -->
    <form>
        <div class="form-group">
            <label for="name">用户名：</label>
            <input type="text" class="form-control" name="name" id="name" placeholder="default name">
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="pwd" class="form-control">
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-success form-control" value="go">
            <input type="reset" class="btn btn-danger form-control" value="cancel">
        </div>
    </form>
</fieldset>

图片

图片形状

<img>下.img-rounded-方形、.img-circle-圆形、.img-thumbnail-方形（加相框）

响应式图片

.img-responsive-根据窗口大小自动调整图片大小

辅助类

即通用类，大部分标签都能使用的类属性

字体颜色：

.text-muted-灰色、.text-primary-蓝色、.text-success-绿色、.text-info-浅蓝、.text-warning-黄色、.text-danger-红色

背景颜色

.bg-primary-蓝色、.bg-success-绿色、.bg-info-浅蓝、.bg-warning-黄色、.bg-danger-红色

右上角标志

.close-标签内容会浮动到右上角，举例：

<div>点击右上角关闭
    <span class="close">×</span>
</div>

打开更多标志

.caret-就是一个向下的三角形，举例：

<div>点击查看更多
    <button class="btn btn-success">更多<span class="caret"></span></button>
</div>

浮动位置

.pull-right-浮动到最右边、.pull-left-浮动到最左边

清除浮动

.clearfix-清除浮动

内容块居中

.center-block-将块居中

显示/隐藏

.show/.hide

组件

官方提供的很多组件样式，包括字符图标、下拉菜单、导航、警告框、弹出框等

字符图标

对于官方提供的图标样式，只需引用其对应的类名即可，但注意的是其属于字符而不是图片，因此图标大小可以通过设置样式font-size来改变，颜色也可以通过color改变，即可以像操作字体那样来操作图标样式，举例：

<span class="glyphicon glyphicon-music" style="font-size: 50px; color: blue; ">音乐播放器</span>

官方提供图标参考：https://v3.bootcss.com/components/#glyphicons

下拉菜单

对于下拉菜单的按钮和对应的菜单数据都放在.dropdown类中，然后在按钮中设置data-toggle="dropdown"来绑定菜单数据，菜单数据列表则添加类.dropdown-menu，其中菜单数据列表里如果想要设置不可选的标题，可以添加类.dropdown-header，分割线则使用类divider，禁选框则使用类disabled，举例：

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">点击查看更多<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">a</li>
        <li><a href="">aaa</a></li>
        <li><a href="">aaa</a></li>
        <li class="disabled"><a href="">aaa</a></li>
        <li class="divider"></li>
    </ul>
</div>

若想要菜单数据列表显示在右边，可添加类dropdown-menu-right，若希望改成上拉菜单，则dropdown改成dropup即可

按钮组

即连续的一组按钮，使用类btn-group（默认横向，若要纵向则用btn-group-vertical）来嵌套多个<button class="btn">即可，并且可以通过btn-group-lg/btn-group-sm/btn-group-xs来设置样式大小，举例：

<div class="btn-group btn-group-lg">
    <button class="btn">fff</button>
    <button class="btn btn-default">ddd</button>
    <button class="btn btn-primary">aaa</button>
    <button class="btn btn-success">bbb</button>
    <button class="btn btn-warning">ccc</button>
    <button class="btn btn-danger">eee</button>
</div>

大按钮组

对于上面的btn-group是小组，如果要大组，即能再嵌套btn-group的按钮大组，则使用btn-toolbar，举例：

<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn">fff</button>
        <button class="btn btn-default">ddd</button>
        <button class="btn btn-primary">aaa</button>
        <button class="btn btn-success">bbb</button>
        <button class="btn btn-warning">ccc</button>
        <button class="btn btn-danger">eee</button>
    </div>
    <div class="btn-group">
        <button class="btn">fff</button>
        <button class="btn btn-default">ddd</button>
        <button class="btn btn-primary">aaa</button>
        <button class="btn btn-success">bbb</button>
        <button class="btn btn-warning">ccc</button>
        <button class="btn btn-danger">eee</button>
    </div>
    ...
</div>

两端对齐

原来按钮文字有多少就占多宽，设置两端对齐则会占满一行，使用类.btn-group .btn-group-justified，其和大按钮组一样需要嵌套在.btn-group外面，举例：

<div class="btn-group btn-group-justified">
    <div class="btn-group btn-group-lg">
        <button class="btn">fff</button>
    </div>
    <div class="btn-group btn-group-lg">
        <button class="btn btn-success">ddd</button>
        <!-- 一个btn-group里只包一个按钮，如果包多个，将会分行显示 -->
    </div>
</div>

标签页

使用类nav nav-tabs实现（如果要胶囊特效的标签页则使用类nav nav-pills，如果想要纵向堆叠则可以在前面的基础上再添加类nav-stacked），其中被选中的式样则添加类active，使用举例：

<ul class="nav nav-tabs">
    <li class="active">
        <a href="">aaa</a>
    </li>
    <li class="">
        <a href="">bbb</a>
    </li>
    <li class="">
        <a href="">ccc</a>
    </li>
</ul>

此时如果想要点击某一个标签显示内容，其他屏蔽则可以实现如下：

<style type="text/css">
    .row {
        display: none;
    }
</style>
...
<div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li class="active">
            <a href="">aaa</a>
        </li>
        <li class="">
            <a href="">bbb</a>
        </li>
        <li class="">
            <a href="">ccc</a>
        </li>
    </ul>
</div>
<div class="col-md-10">
    <div class="row">
        <p>aaaaaaaaaaaaaaaaaa</p>
    </div>
    <div class="row">
        <p>bbbbbbbbbbbbbbbbbb</p>
    </div>
    <div class="row">
        <p>cccccccccccccccccc</p>
    </div>
</div>
...
<script type="text/javascript">
    $('li').mouseenter(function(){
        $(this).addClass('active');
        $('li').not($(this)).removeClass('active');

        page = $(this).index('li');
        $('.row').eq(page).show();
        $('.row').not($('.row').eq(page)).hide();
    })

    $('.row').eq(0).show();
</script>

导航条

在<nav>标签中使用类navbar，并使用navbar-default代表使用默认灰色为背景色（navbar-inverse则为黑色），示例：

av class="navbar navbar-inverse">
    <!-- 黑色导航条 -->
    <div class="container-fluid">
        <div class="navbar-header">
            <!-- 标头 -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#aaa">
                <!-- data-target用于设置对应的ID，从该id列表当中获取下拉框内容 -->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <!-- icon-bar是一条横线，连续三个就会变成三条横线 -->
            </button>
            <a class="navbar-brand" href="#">Brand</a>
            <!-- 标头样式 -->
        </div>
        <div class="collapse navbar-collapse" id="aaa">
            <!-- id对应上面的data-target，为下拉框内容 -->
            <ul class="nav navbar-nav">
                <!-- 下拉框导航条 -->
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

参考课程：https://study.163.com/course/courseMain.htm?courseId=1003664020
参考文档：https://v3.bootcss.com/css/