CSS框架——Bootstrap4

最新推荐文章于 2026-06-08 09:05:39 发布

原创最新推荐文章于 2026-06-08 09:05:39 发布 · 1.8k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

WEB

一、Bootstrap介绍

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统。

二、Bootstrap的使用

1、在使用时需要引入下面四行代码

<!-- 新 Bootstrap4 核心 CSS 文件 --> 

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> 

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> 

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --> 

<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> 

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> 

<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

2、Bootstrap可以适应手机和电脑大小，为确保适当的绘制和触屏缩放，需要如下在网页的 head 之中添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

3、Bootstrap可以用下面两个容器：

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

4、Bootstrap4 网格系统

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

Bootstrap 4 网格系统有以下 5 个类:

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

想分成三个相等的列，可以使用.col-md-4，以此类推。

其他更多细节问题可以去菜鸟教程：https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html

下面是两个小例子：

一、个人主页：

实现：

<!DOCTYPE html>
<html>
    <head>
        <title>个人主页</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

        <style>
            #h {
                background-image: url("image/head.jpg");
                background-size: cover;
                text-align: center;
                
            }

            a:hover {
                text-decoration: none;

            }

            #end {
                font-size: 18px;
                text-align: center;
                background-image: url("image/end.jpg");
               /* background-size: cover;*/
            }

            .carousel-inner img {   /*设置轮播图片的属性*/
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>

        <div id="h" class="jumbotron jumbotron-fluid">   <!--创建一个没有圆角的全屏幕-->
            <div class="container">
                <a href="https://baike.baidu.com/item/G-DRAGON/8796920?fromtitle=%E6%9D%83%E5%BF%97%E9%BE%99&fromid=4119624&fr=aladdin"><h1 class="text-white">G-DRAGON</h1></a>
            </div>
        </div>

        <div class="container">
            <h2>个人简介</h2>
            <hr>
            <div class="row">
                <div class="col-md-3">
                    <img src="image/p.jpg" class="rounded img-fluid">
                </div>
                <div class="col-md-9">
                    <ul class="list-group">    <!--创建列表组-->
                        <li class="list-group-item active">姓名：权志龙</li>
                        <li class="list-group-item">星座：狮子座</li>
                        <li class="list-group-item">爱好：作词</li>
                        <li class="list-group-item">就读院校：庆熙大学</li>
                        <li class="list-group-item">专业：艺术类</li>
                        <li class="list-group-item">发展方向：歌手</li>
                        <li class="list-group-item">国籍：韩国</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="container">
            <h2>行程</h2>
            <hr>
            <table class="table table-bordered table-striped">  <!--设置右边框的表格-->
                <thead>
                    <tr>
                        <th></th>
                        <th>周一</th>
                        <th>周二</th>
                        <th>周三</th>
                        <th>周四</th>
                        <th>周五</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1-2节</td>
                        <td>珠海演唱会</td>
                        <td>昆明演唱会</td>
                        <td>泰州演唱会</td>
                        <td>杭州演唱会</td>
                        <td>上海演唱会</td>
                    </tr>
                    <tr>
                            <td>3-4节</td>
                            <td>北京演唱会</td>
                            <td>洛阳演唱会</td>
                            <td>首尔演唱会</td>
                            <td>广州演唱会</td>
                            <td>湖南演唱会</td>
                    </tr>
                    <tr>
                            <td>1-2节</td>
                            <td>福州演唱会</td>
                            <td>厦门演唱会</td>
                            <td>十周年演唱会</td>
                            <td>澳门演唱会</td>
                            <td>长沙演唱会</td>
                        </tr>
                </tbody>
            </table>
        </div>

        <div>
            <div class="container mt-3">   <!--上边距为3-->
                <h2>学习园地</h2>
                <hr>
                <div class="row">
                    <div class="col-md-4">
                        <h3 class="panel-title">
                            专长
                        </h3>
                        <ul class="list-group">
                            <li class="list-group-item">唱</li>
                            <li class="list-group-item">跳</li>
                            <li class="list-group-item">rap</li>
                            <li class="list-group-item">篮球</li>
                            <li class="list-group-item">作词</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h3 class="panel-title">
                            成员
                        </h3>
                        <ul class="list-group">
                            <li class="list-group-item">G-DRAGON</li>
                            <li class="list-group-item">T.O.P</li>
                            <li class="list-group-item">TAEYANG</li>
                            <li class="list-group-item">DAESUNG</li>
                            <li class="list-group-item">SEUNGRI</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                            <h3 class="panel-title">
                                作品
                            </h3>
                            <div class="list-group">
                                <a href="https://baike.baidu.com/item/LOSER/17515753" class="list-group-item list-group-item-action">《LOSER》</a>   <!--链接列表项-->
                                <a href="https://baike.baidu.com/item/WE%20LIKE%202%20PARTY" class="list-group-item list-group-item-action">《WE LIKE 2 PARTY》</a>
                                <a href="https://baike.baidu.com/item/IF%20YOU/19920632" class="list-group-item list-group-item-action">《IF YOU》</a>
                                <a href="https://baike.baidu.com/item/LET%27S%20NOT%20FALL%20IN%20LOVE" class="list-group-item list-group-item-action">《LET'S NOT FALL IN LOVE》</a>
                                <a href="https://baike.baidu.com/item/SOBER/17954588" class="list-group-item list-group-item-action">《SOBER》</a>
                            </ul>
                        </div>
                </div>
            </div>
        </div>

        <div class="container mt-3">
            <h2>活动</h2>
            <hr>
            <div class="row">
                <div class="col-sm-6 col-md-3">
                    <div class="card">
                        <img class="card-img-top" src="image/y1.jpg" style="height: 200px;" alt="bb">
                        <div class="card-body">
                            <h4 class="card-title">开演唱会辣</h4>
                            <p class="card-text">快来，墨迹呢</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card">
                        <img class="card-img-top" src="image/y2.jpg" style="height: 200px;" alt="bb">
                        <div class="card-body">
                            <h4 class="card-title">开演唱会辣</h4>
                            <p class="card-text">快来，墨迹呢</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card">
                        <img class="card-img-top" src="image/y3.jpg" style="height: 200px;" alt="bb">
                        <div class="card-body">
                            <h4 class="card-title">开演唱会辣</h4>
                            <p class="card-text">快来，墨迹呢</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card">
                        <img class="card-img-top" src="image/y4.jpg" style="height: 200px;" alt="bb">
                        <div class="card-body">
                            <h4 class="card-title">开演唱会辣</h4>
                            <p class="card-text">快来，墨迹呢</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container mt-3">
            <h3>最最最最后</h3>
            <hr>
            <div class="row">
                <div class="col-md-7">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <!--轮播指标-->
                        <ul class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                            <li data-target="#myCarousel" data-slide-to="3"></li>
                        </ul>
                        <!--轮播项目-->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="image/l1.jpg" alt="First slide">
                            </div>
                            <div class="carousel-item">
                                <img src="image/l2.jpg" alt="Second slide">
                            </div>
                            <div class="carousel-item">
                                <img src="image/l3.jpg" alt="Third slide">
                            </div>
                            <div class="carousel-item">
                                <img src="image/l4.jpg" alt="Forth slide">
                            </div>
                        </div>
                        <!--左右切换按钮-->
                        <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#myCarousel" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>
                    </div>
                </div>
                <div class="col-md-5">
                    <h2 class="panel-title">
                        团队介绍
                    </h2>
                    <p style="text-indent:2em">
                            2015年，BIGBANG回归韩国歌坛，同年5月至8月发行数字专辑《MADE》  ，四张MINI专辑总销量超过340万。  2016年8月20日，BIGBANG在韩国首尔举办出道十周年纪念演唱会，当晚将近三个小时的演出中，BIGBANG共演绎了19首作品，与粉丝度过了一个精彩、难忘的音乐狂欢夜。   2016年12月8日  ，BIGBANG全新正规数字专辑《MADE FULL ALBUM》零点登陆QQ音乐   重磅开启预售  ，12月12日音频正式上线。2019年3月，组合成员SEUNGRI因一系列丑闻解约，并宣布退出演艺圈  
                    </p>
                </div>
            </div>
        </div>
        
        <footer id="end" class="mt-3 p-3">
            <p class="text-white"><span>我的大学生活</span>联系我1234567</p>
        </footer>
    </body>
</html>

购物商城页面:

实现：

<!DOCTYPE html>
<html>
    <head>
        <title>手机商城</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width initial-scale=1 shrink-to-fit=no">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="container-fluid text-white" >
            <nav class=" navbar-expend-sm bg-dark fixed-top">    <!--固定上导航栏-->
                <p class="text-center">
                    商品列表
                    <span class="float-right">
                        <a href="#" class="text-white">登录</a>
                    </span>
                </p>
            </nav>
        </div>

        <div class="container" style="margin-top: 40px">     <!--margin-top: 40px 是为了让导航栏不遮住下面的层-->
            <div class="row">
                <div class="card col-6" >
                    <img class="card-img-top" src="sk2.jpg" alt="商品图片" style="width: 100%">
                    <div class="card-body" style="margin:0 auto;">
                        <h4 id="hh" class="card-title">爽肤水</h4>
                        <a href="#" class="btn btn-dark ">$109.9</a>
                    </div>
                </div>

                <div class="card col-6">
                    <img class="card-img-top" src="dk.jpg" alt="商品图片" style="width: 100%">
                    <div class="card-body" style="margin: 0 auto;">
                        <h4 class="card-title">乳 液</h4>
                        <a href="#" class="btn btn-dark">$99.99</a>
                    </div>
                </div>

                <div class="card col-6">
                    <img class="card-img-top" src="el1.jpg" alt="商品图片" style="width: 100%">
                    <div class="card-body " style="margin: 0 auto;">
                        <h4 class="card-title">精华</h4>
                        <a href="#" class="btn btn-dark">$109.9</a>
                    </div>
                </div>

                <div class="card col-6">
                    <img class="card-img-top" src="el2.jpg" alt="商品图片" style="width: 100%">
                    <div class="card-body " style="margin: 0 auto;">
                        <h4 class="card-title">眼霜</h4>
                        <a href="#" class="btn btn-dark">$59.9</a>
                    </div>
                </div>

                <div class="card col-6">
                    <img class="card-img-top" src="dior.jpg" alt="商品图片" style="width: 100%;">
                    <div class="card-body" style="margin: 0 auto;">
                        <h4 class="card-title">口红</h4>
                        <a href="#" class="btn btn-dark">29.99</a>
                    </div>
                </div>

                <div class="card col-6" style="margin-bottom: 40px">   <!--为了让导航栏不遮住最下面商品的内容-->
                    <img class="card-img-top" src="mac.jpg" alt="商品图片" style="width: 100%;">
                    <div class="card-body" style="margin: 0 auto;">
                        <h4 class="card-title">高光</h4>
                        <a href="#" class="btn btn-dark">39.99</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid text-white"> 
            <nav class="navbar-expend-sm bg-dark fixed-bottom">   <!--固定下导航栏-->
                <p class="text-center">
                    <span class="float-left">
                        <a href="#" class="text-white">首页</a>
                    </span>
                    
                    <span>
                       <a href="#" class="text-white">购物车</a>
                    </span>

                    <span class="float-right">
                        <a href="#" class="text-white">我的订单</a>
                    </span>
                </p>
            </nav>
        </div>

    </body>
</html>