二，响应式栅格

5835ef41ae1afb287d9a49f2356614a6_6619ba2b2e5a4d93bd0da43b1eea65ba.png

2.1，响应式栅格的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板</title>
    <!-- bootstrap的CSS文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
</style>
<body>
    <div class="container">
        <div class="col-md-8 col-xs-12">
            <h3>献给父亲身后默默支持的英雄</h3>
            <div class="row">
                <ul class="col-md-6 col-xs-12">
                    <li>这是一首由董玉方作词，许飞作曲、演唱的歌曲</li>
                </ul>
                <ul class="col-md-6 col-xs-12">
                    省略部分HTML代码
            </div>
        </div>
    </div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>

页面方法缩小自适应

994fa079349acdc02e4d4d084a13517e_c2d55158c324491f8cd4d29081e87284.png

6e049b911d9f1a6f7bdf7466eb8aabab_9edc1b174c3c49a4a64f30505f28e34d.png

三，CSS全局样式

又称为CSS布局，是Bootstrap三大核心内容的基础
包括

排版（Typography）

标题、页面主体、对齐方式、列表

表单（Forms）

基本实例、内联表单、水平排列的表单、校验状态、控件尺寸

按钮（Buttons）

预定义样式、按钮尺寸

图片（Images）

响应式图片、图片形状

3.1，排版——标题

在Bootstrap框架中，HTML的<'h1> 到 <'h6>均重新定义了标准样式，即提供了 .h1 到 .h6 类，目的是为内联属性的文本赋予标题的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板</title>
    <!-- bootstrap的CSS文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
</style>
<body>
    <div class="container">
        <h1>我是h1</h1>
        <h2>我是h2</h2>
        <h3>我是h3</h3>
        <h4>我是h4</h4>
        <h5>我是h5</h5>
        <h6>我是h6</h6>
    </div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>

平常使用标题标签的方式

78e2f1e2232e6945280ebc5c17939b19_248d432bc14841f384d7995cc26fafae.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板</title>
    <!-- bootstrap的CSS文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
</style>
<body>
    <div class="container">
        <span class="h1">我是h1</span><br/>
        <span class="h2">我是h2</span><br/>
        <span class="h3">我是h3</span><br/>
        <span class="h4">我是h4</span><br/>
        <span class="h5">我是h5</span><br/>
        <span class="h6">我是h6</span><br/>
    </div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>

在非标题标签下使用 .h1 到 .h6 类的方式

a11405f5d51f6a2f93ca9d589722f1e9_d2b6fa7982a14ba98368feae77b12d2b.png

3.2，排版——对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板</title>
    <!-- bootstrap的CSS文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
</style>
<body>
    <div class="container">
        <div class="duiqi text-center">
            居中
        </div><br>
        <div class="duiqi text-left">
            左对齐
        </div><br>
        <div class="duiqi text-right">
            右对齐
        </div><br>
        <div class="duiqi text-justify">
            两端对齐
        </div><br>
    </div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>

通过文本对齐类，可以简单方便的将文字重新对齐

54bdef81da0da8fed149494766892287_4bffc525855748ac8b792a0249789b46.png

3.3，排版——列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板</title>
    <!-- bootstrap的CSS文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
</style>
<body>
    <div class="container">
        <dl class="dileibiao dl-horizontal">
            <dt>水果</dt>
            <dd>苹果、香蕉、橙子、西瓜、火龙果、猕猴桃</dd>
            <dt>咖啡</dt>
            <dd>速溶咖啡、拿铁、美式、摩卡</dd>
            <dt>茶叶</dt>
            <dd>红茶、绿茶、乌龙茶、黄茶、白茶、黑茶</dd>
        </dl><br>
    </div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>

水平定义列表

41ae4a5cb3af86a9be0669d326f27a7d_e2da9a7cb7674439b4fd3a6d989f941b.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板</title>
    <!-- bootstrap的CSS文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
</style>
<body>
    <div class="container">
        <ul class="lileibiao list-inline text-center">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Bootstrap</li>
        </ul>
    </div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>

内联列表

b906d6ada7484189429e125d3ea4afb9_283f201efa054beca00f2c5caa3b9f08.png

3.4，表单——基本实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板</title>
    <!-- bootstrap的CSS文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
</style>
<body>
    <div class="container">
        <form class="form-inline" action="#">
            <div class="form-group">
                <label for="user">用户名:</label>
                <input type="text" class="form-control" id="user" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="pwd">密码:</label>
                <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
            </div>
            <input type="submit" class="form-control" value="登录">
        </form>
    </div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>

在表单的默认样式基础上给表单添加 .form-control 和.form-group

cf0b97aebf9db047d90cac804fe12e20_0cdb9c5cc66846f7823b08fcb559239e.png

3.5，表单——水平排列的表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap基础模板</title>
    <!-- bootstrap的CSS文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
    /* .row{
        border: 1px solid cadetblue;
    }
    .row>div{
        border: 1px solid darkblue;
    } */
</style>
<body>
    <div class="container">
        <form class="form-horizontal" action="#">
            <div class="form-group">
                <label for="user" class="col-md-1">用户名:</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="user" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="pwd" class="col-md-1">密码:</label>
                <div class="col-md-8">
                    <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-3 col-md-2">
                    <input type="submit" class="form-control" value="登录">
                </div>
            </div>
        </form>
    </div>
</body>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</html>

可以通过为表单添加 .form-horizontal ，并联合使用Bootstrap预置的栅格类，可以将文字和表单控件水平排列布局

f31617ffc291997965a2b1d004202f00_6ada41a4dfef4cdb9c27ba805d91a346.png

教你快速上手Bootstrap框架（二）

二，响应式栅格

三，CSS全局样式

热门文章

最新文章

相关课程

相关电子书

相关实验场景