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

2023-08-24 71

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 教你快速上手Bootstrap框架

二，响应式栅格

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全局样式

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

二，响应式栅格

三，CSS全局样式

热门文章

最新文章

相关课程

相关电子书

相关实验场景