使用Bootstrap完成响应式页面设计

nefelibate￡

已于 2023-12-29 11:15:50 修改

阅读量2k

点赞数 2

于 2023-11-13 17:48:53 首次发布

本文链接：https://blog.csdn.net/m0_62676426/article/details/134289069

版权

Bootstrap5是目前Bootstrap的最新版本，但考虑到浏览器的兼容性，建议使用 Bootstrap4 或 Bootstrap3。目前Bootstrap5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera），但不支持 IE11 及以下版本。在这篇文章中我使用的是Bootstrap4。如果需要支持 IE9 以下以及 iOS 7 以下版本的浏览器，那么请使用Bootstrap3。

一、引入Bootstrap的相关文件

首先我们需要引用关于Bootstrap的相关文件，可以选择从官网（getbootstrap.com）下载也可以采用cdn的方式，在这里我们采用cdn的方式：（注意：由于Bootstrap中还需要使用到jQuery，所以我们在引用Bootstrap的js文件之前一定要先引入jQuery文件）

<!-- 新 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>

在响应式开发中，需要遵从“移动端优先”原则。为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

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

引入之后我们可以放一张图片测试一下：默认图片在浏览器宽度变小时会出现显示不全的情况：

我们给图片加上一个类名：class="img-fluid"，就会发现无论浏览的宽度是多少图片都是完整的：

这就证明我们引入成功了，接下来就可以使用Bootstrap进行响应式网页开发了。

二、网格系统

在进行响应式网页开发之前，我觉得我们最应该了解的就是网格系统，Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的变换，系统会自动平均分为最多 12 列。我们可以根据自己的需要定义内容在不同尺寸的屏幕和视口在所占据的列数。

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

.col- 针对所有尺寸的设备
.col-sm- 平板 - 屏幕或视口（viewport）尺寸大于或等于 576px
.col-md- 桌面显示器 - 屏幕或视口（viewport）尺寸大于或等于 768px
.col-lg- 大桌面显示器 - 屏幕或视口（viewport）尺寸大于或等于 992px
.col-xl- 超大桌面显示器 - 屏幕或视口（viewport）尺寸大于或等于 1200px

我们只需要根据需求添加相应的类名即可，比如我们希望一个内容在屏幕或视口（viewport）尺寸大于或等于 992px的时候占据8列，其余尺寸的时候都占据十二列，那么我们就可以添加类名：class="col-12 col-lg-8"。

三、简单进行响应式页面设计

1.导航

<ul class="nav nav-justified justify-content-center">
                <li class="nav-item"><a href="">首页</a></li>
                <li class="nav-item"><a href="">同城美食</a></li>
                <li class="nav-item"><a href="">商城</a></li>
                </li>
            </ul>

给导航添加nav类名就相当于添加了display:flex属性，nav-justified是将li设置成齐行等宽显示，justify-content-center相当于样式justify-content: center !important;这样一个响应式导航就完成了，我们还可以根据自己的需求设置成其他的效果，详见官网。

2.banner

 <div class="banner">
            <img class="img-fluid" src="./images/banner.jpg" alt="">
        </div>

banner板块我只放了一张图片，所以只需要给图片做成响应式的就可以，当然大家也可以使用swiper实现轮播图。

3.文字和图片展示部分

<div class="content row">
            <!-- 文字部分 -->
            <div class="text-justify mx-auto col-xl-8">
                <p>在中国传统文化教育中的阴阳五行哲学思想、儒家伦理道德观念、中医营养养生学说，还有文化艺术成就、饮食审美风尚、民族性格特征等诸多因素的影响下，劳动人民创造出彪炳史册的中国烹饪技艺，形成博大精深的中国饮食文化。
                    从历史沿革看，最早可追溯到商朝末年太公望时期“别名：姜子牙”，中国饮食文化绵延3100多年，分为生食、熟食、药膳养生、自然烹饪、科学烹饪5个发展阶段，推出6万多种传统菜点、2万多种工业食品、五光十色的筵宴和流光溢彩的风味流派，获得“烹饪王国”的美誉。
                    从内涵上看，中国饮食文化涉及到食源的开发与利用、食具的运用与创新、食品的生产与消费、餐饮的服务与接待、餐饮业与食品业的经营与管理，以及饮食与国泰民安、饮食与文学艺术、饮食与人生境界的关系等，深厚广博！
                    从外延看，中国饮食文化可以从时代与技法、地域与经济、民族与宗教、食品与食具、消费与层次、民俗与功能等多种角度进行分类，展示出不同的文化品味，体现出不同的使用价值，异彩纷呈。
                    从特质看，中国饮食文化突出养助益充的营卫论（素食为主，重视药膳和进补），五味调和的境界说（风味鲜明，适口者珍，有“舌头菜”之誉），奇正互变的烹调法（厨规为本，灵活变通），畅神怡情的美食观（文质彬彬，寓教于食）等4大属性，有着不同于海外各国饮食文化的天生丽质。
                    中国饮食文化直接影响到朝鲜、韩国、泰国、新加坡、日本、蒙古等国家，是东方饮食文化圈的中心。与此同时，它还间接影响到欧洲、美洲、非洲和大洋洲，像中国的素食文化、茶文化、酱醋、面食、药膳、陶瓷餐具和大豆等，惠及全世界数十亿人。
                    中国的烹饪，不仅技术精湛，而且有讲究菜肴美感的传统，注意食物的色、香、味、形、器的协调一致。对菜肴美感的表现是多方面的，无论是个红萝卜，还是一个白菜心，都可以雕出各种造型，独树一帜，达到色、香、味、形、美的和谐统一，给人以精神和物质高度统一的特殊享受。
                    总之，中国饮食文化是一种广视野、深层次、多角度、高品位的悠久区域文化，是中国劳动人民在长久的生产和生活实践中，在食源开发、食具研制、食品调理、营养保健和饮食审美等方面创造、积累并影响周边国家和世界的物质财富及精神财富。
                </p>
            </div>
            <!-- 图片展示 图片宽度利用百分比-->
            <div class="imgshow mx-auto col-xl-8">
                <img src="./images/1.jpg" alt="">
                <img src="./images/2.jpg" alt="">
                <img src="./images/3.jpg" alt="">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>

这部分的内容使用了栅格系统，图片的尺寸为百分比。

四、完整代码展示

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 新 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>
    <link rel="stylesheet" href="./css/public.css">
    <!-- <link rel="stylesheet" href="./css/style.css"> -->
</head>
<style>
    a:hover {
        text-decoration: none;
    }

    .row {
        margin: 0;
    }

    .banner img {
        width: 100%;
    }

    .nav {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
        background: rgba(0, 0, 0, .45);
        height: 50px;
    }

    ul.nav {
        width: 100%;
    }

    ul.nav li a {
        font-size: 20px;
        color: #fff;
        line-height: 50px;
        padding: 0 1%;
    }

    .content {
        margin-top: 50px;
        text-indent: 2em;
    }

    .imgshow {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .imgshow img {
        margin: 1%;
        width: 48%;
    }

    .footer {
        text-align: center;
        line-height: 36px;
    }

    .footer a {
        color: #333;
    }
</style>

<body>
    <div class="layout mx-auto">
        <div class="banner">
            <img class="img-fluid" src="./images/banner.jpg" alt="">
        </div>
        <div class="block1">
            <ul class="nav nav-justified justify-content-center">
                <li class="nav-item"><a href="">首页</a></li>
                <li class="nav-item"><a href="">同城美食</a></li>
                <li class="nav-item"><a href="">商城</a></li>
                </li>
            </ul>
        </div>
        <div class="content row">
            <!-- 文字部分 -->
            <div class="text-justify mx-auto col-xl-8">
                <p>在中国传统文化教育中的阴阳五行哲学思想、儒家伦理道德观念、中医营养养生学说，还有文化艺术成就、饮食审美风尚、民族性格特征等诸多因素的影响下，劳动人民创造出彪炳史册的中国烹饪技艺，形成博大精深的中国饮食文化。
                    从历史沿革看，最早可追溯到商朝末年太公望时期“别名：姜子牙”，中国饮食文化绵延3100多年，分为生食、熟食、药膳养生、自然烹饪、科学烹饪5个发展阶段，推出6万多种传统菜点、2万多种工业食品、五光十色的筵宴和流光溢彩的风味流派，获得“烹饪王国”的美誉。
                    从内涵上看，中国饮食文化涉及到食源的开发与利用、食具的运用与创新、食品的生产与消费、餐饮的服务与接待、餐饮业与食品业的经营与管理，以及饮食与国泰民安、饮食与文学艺术、饮食与人生境界的关系等，深厚广博！
                    从外延看，中国饮食文化可以从时代与技法、地域与经济、民族与宗教、食品与食具、消费与层次、民俗与功能等多种角度进行分类，展示出不同的文化品味，体现出不同的使用价值，异彩纷呈。
                    从特质看，中国饮食文化突出养助益充的营卫论（素食为主，重视药膳和进补），五味调和的境界说（风味鲜明，适口者珍，有“舌头菜”之誉），奇正互变的烹调法（厨规为本，灵活变通），畅神怡情的美食观（文质彬彬，寓教于食）等4大属性，有着不同于海外各国饮食文化的天生丽质。
                    中国饮食文化直接影响到朝鲜、韩国、泰国、新加坡、日本、蒙古等国家，是东方饮食文化圈的中心。与此同时，它还间接影响到欧洲、美洲、非洲和大洋洲，像中国的素食文化、茶文化、酱醋、面食、药膳、陶瓷餐具和大豆等，惠及全世界数十亿人。
                    中国的烹饪，不仅技术精湛，而且有讲究菜肴美感的传统，注意食物的色、香、味、形、器的协调一致。对菜肴美感的表现是多方面的，无论是个红萝卜，还是一个白菜心，都可以雕出各种造型，独树一帜，达到色、香、味、形、美的和谐统一，给人以精神和物质高度统一的特殊享受。
                    总之，中国饮食文化是一种广视野、深层次、多角度、高品位的悠久区域文化，是中国劳动人民在长久的生产和生活实践中，在食源开发、食具研制、食品调理、营养保健和饮食审美等方面创造、积累并影响周边国家和世界的物质财富及精神财富。
                </p>
            </div>
            <!-- 图片展示 图片宽度利用百分比-->
            <div class="imgshow mx-auto col-xl-8">
                <img src="./images/1.jpg" alt="">
                <img src="./images/2.jpg" alt="">
                <img src="./images/3.jpg" alt="">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>
        <div class="footer">
            <a href="">nefelibate￡©版权所有</a>
        </div>
    </div>
    <script>

    </script>
</body>

</html>

五、总结

Bootstrap提供了大量的响应式组件和类名，对我们创建响应式网站具有很大的帮助性，详细教程可以学习菜鸟教程。

nefelibate￡

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
使用Bootstrap完成响应式页面设计

Bootstrap5是目前Bootstrap的最新版本，但考虑到浏览器的兼容性，建议使用 Bootstrap4 或 Bootstrap3。目前Bootstrap5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera），但不支持 IE11 及以下版本。在这篇文章中我使用的是Bootstrap4。
复制链接

扫一扫