前端使用bootstrap实现一个简单的小案例，重点是关注响应式布局

最新推荐文章于 2022-04-03 20:30:00 发布

508小怪兽

最新推荐文章于 2022-04-03 20:30:00 发布

阅读量5.1k

点赞数 2

分类专栏： JavaScript 文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/qq_43064077/article/details/121525070

版权

JavaScript 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

1.案例的效果展示

我们使用的是响应式布局，所谓的响应式布局就是可以使得同一套页面可以兼容不同分辨率的设备。可以看到苹果的官网当你将浏览器的串口放的很小的时候网站的布局也会随这页面大小发生变化，当我们在手机或者pad上面去访问网站的时候还是会有一个不错的体验的。

在这里插入图片描述

当浏览器的页面变小以后首先可以看到的就是，导航栏进行了折叠，还有就是这些图片也还是可以完全显示出来的，这就是响应式布局一个明显的效果

2 主要的知识点

之前我做这个网页的时候使用的是table里面嵌套table，虽然可以实现效果但是，没有使用到响应式布局，当浏览器页面的大小发生变化的时候体验是特别差的，
而且做出来的样式什么的都特别差劲，这里我使用格栅来代替table进行一个整体的布局，这也就是响应式布局的一个重要技术，所以这个用到的知识点就有：
1.bootstrap里面的格栅
2.bootstrap的使用
3.bootstrap怎样实现案例的布局
4.bootstrap里面的导航栏
5bootstrap里面的轮播图

2.1格栅（响应式布局）

格栅就是将当前的浏览器的页面不管是pc的浏览器还是手机端的浏览器都分为12份，我们可以规定一个控件或者div占用了几个格栅
我们在使用格栅的时候可以指定div在不同的设备上所占用的格栅数
* 设备代号：
1. xs：超小屏幕手机 (<768px)：col-xs-12
2. sm：小屏幕平板 (≥768px)
3. md：中等屏幕桌面显示器 (≥992px)
4. lg：大屏幕大桌面显示器 (≥1200px)

2.2 我们怎么使用bootstrap这个框架

首先就是要去官网下载一下bootstrap的几个文件夹，将js ，css，fonts文件夹放到你的web项目下面，还有就是bootstrap需要依赖于一个jQuery的文件，所以我们也要把一个jquery的文件放到js的文件夹下面
bootstrap网站：https://v3.bootcss.com/

我的项目的目录结构
在这里插入图片描述
我们下载完毕文件以后将三个文件夹放到项目里面，我们还要在自己的前端的xml文件里面去引用bootstrap的样式，要在自己的想，xml文件里面去引入，
代码如下
我是吧引用的代码放到了前端代码的head里面了
代码：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>按钮</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" >
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js" ></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>

    <![endif]-->
    </head>

2.3 小的案例实现的整体思想

1.第一个就是我们要使用容器，将div的类名class=“container”或者clas=“container-fluid”来自动使用bootstrap里面的类选择器， 1. container：两边留白 2. container-fluid：每一种设备都是100%宽度

2.我们要使用容器去代替之前使用的表格思想

**可以说在bootstrap框架里面我们最重要的就是要使用这个格栅来进行布局

使用格栅来代替我们之前使用的table
之前的table就被一个div来代替了，div的类名就是class=“container-fluid”或者class=“container”

table里面就是的tr 也是用一个div来代替了，但是div类名是class=“row”
table里面的td也是用div来代替的，但是这个元素的div类名里面要指出元素所占的栅格数，是class=“col-md-x”或者class=“col-sm-x”或者class=“col-lg-x” x的范围都是1-12**

2.4 在小的案例里面我使用到了一个标题栏，

这个标题栏里面的标签当浏览器的窗口缩小了以后就会自动折叠，折叠到一个汉堡按钮里面，
，当然这个标题栏可以在bootstrap的网站上面直接粘贴过来，自己修改一下就可以了

2.5 在案例里面还有一个轮播图

轮播图也是直接在bootstrap的官网里面粘贴过来的修修改改就可以用了

完整的一个代码

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>按钮</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" >
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js" ></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>

    <![endif]-->

    <style>
        .row1{
            margin-top: 10px;
        }

        /*输入框的颜色*/
        .seach{
            border: 3px solid #ffc900;
            width: 400px;
            height: 40px;
            float: left;
            /*让输入框和搜索按钮都是用向左浮动可以让两者紧密的连接在一起*/
            margin-top: 15px;
            margin-left: 170px;
        }
        /*按钮的大小*/
        .bt_search{
            width: 100px;
            background-color: #ffc900;
            height: 40px;
            border: 2px solid #ffc900;
            float: left;
            margin-top: 15px;
            font-size: 15px;

        }

        .img1{
            margin-left: 150px;
        }
        .img2{
            margin-left: 150px;
        }
        .jx{
        /*   给黑马精选设置一个下边框*/
            border-bottom: 2px solid #ffc900;
            margin-top: 20px;

        }

        span{
            font-size: 18px;
        }

        .jximg{
            padding-top: 15px;
        }
        .gn{
            padding-top: 15px;
        }
        .text{
            height: 50px;
            background-color: #ffc900;
            font-size: 16px;
            text-align: center;
            line-height: 50px;  /*让line-height等于height就可以实现文字垂直居中了*/
        }
    </style>
</head>
<body>

<!--页眉 为了增加可读性我们使用一个header来标识一下  header标签也是没有样式的-->
<!--页眉这个部分我们分为 四行 所以我们就在header里面写四个div-->
<header class="container-fluid">
<!--    这个 container-fluid 就已经实现了响应式布局 -->
    <div class="row">
        <img width="100%" src="../img/top_banner.jpg" alt="">
    </div>
<!--    搜索框  图片 搜索框 图片 -->
    <div class="row row1" >
<!--            元素 注意我们在设置元素的时候使用的也是div标签 每个元素我们设置格栅的大小-->
        <div class="col-md-3">
            <img src="../img/logo.jpg" alt="" class="img1">
        </div>
        <div class="col-md-5 " >
            <input type="text" width="350px" height="20px" class="seach">
            <input type="button" value="搜索" class="bt_search">
        </div>
        <div class="col-md-4">
            <img src="../img/hotel_tel.png" alt="" class="img2">
        </div>
    </div>
<!--    导航栏-->
    <div class="row">
        <nav class="navbar navbar-default">
            <!--    <nav class="navbar navbar-inverse">-->
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <!--            这个按钮是定义一个汉堡按钮的  页面过小的时候导航栏会折叠到一个汉堡按钮里面去-->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">河南</a></li>
                        <li><a href="#">郏县</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">最右边的一个link</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
<!--    这一行是一个轮播图-->
    <div class="row">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img width="100%" src="../img/banner_1.jpg" alt="...">
                    <div class="carousel-caption">
                        图片1
                    </div>
                </div>
                <div class="item">
                    <img width="100%" src="../img/banner_2.jpg" alt="...">
                    <div class="carousel-caption">
                        图片1
                    </div>
                </div>

                <div class="item">
                    <img width="100%" src="../img/banner_3.jpg" alt="...">
                    <div class="carousel-caption">
                        图片1
                    </div>
                </div>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

</header>



<!--    主题部分-->
<div class="container">
    <div class="row jx">
        <img src="../img/icon_5.jpg" alt="">
        <span>黑马精选</span>
    </div>
    <div class="row jximg">
        <div class="col-md-3 thumbnail">
            <img src="../img/jiangxuan_3.jpg" alt="">
            <span>上海直飞三亚五天四晚自由行(春节预售+亲自/蜜月/休闲游首选+豪华酒店任意住+接送机)</span><br>
            <font size="5px" color="red">&yen;699</font>
        </div>
        <div class="col-md-3 thumbnail">
            <img src="../img/jiangxuan_3.jpg" alt="">
            <span>上海直飞三亚五天四晚自由行(春节预售+亲自/蜜月/休闲游首选+豪华酒店任意住+接送机)</span><br>
            <font size="5px" color="red">&yen;699</font>
        </div>
        <div class="col-md-3 thumbnail">
            <img src="../img/jiangxuan_3.jpg" alt="">
            <span>上海直飞三亚五天四晚自由行(春节预售+亲自/蜜月/休闲游首选+豪华酒店任意住+接送机)</span><br>
            <font size="5px" color="red">&yen;699</font>
        </div>
        <div class="col-md-3 thumbnail">
            <img src="../img/jiangxuan_3.jpg" alt="">
            <span>上海直飞三亚五天四晚自由行(春节预售+亲自/蜜月/休闲游首选+豪华酒店任意住+接送机)</span><br>
            <font size="5px" color="red">&yen;699</font>
        </div>
    </div>


</div>

<!--主体的第二部分 分为两行 一行是icon加一个文字  另一个行 分为两个元素-->
<div class="container">
<!--    第一行-->
    <div class="row jx">
        <img src="../img/icon_6.jpg" alt="">
        <span>出国游</span>
    </div>
    
<!--    第二行 分为两个元素-->
    <div class="row">
<!--        第一个元素-->
       <div class="col-md-4 gn">
           <img src="../img/guonei_1.jpg" alt="">
       </div>
<!--        第二个元素 第二个元素里面有分为两行-->
        <div class="col-md-8 gn">
            <div class="row">
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>上海直飞三亚五天四晚自由行(春节预售+亲自/蜜月/休闲游首选+豪华酒店任意住+接送机)</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>上海直飞三亚五天四晚自由行(春节预售+亲自/蜜月/休闲游首选+豪华酒店任意住+接送机)</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>上海直飞三亚五天四晚自由行(春节预售+亲自/蜜月/休闲游首选+豪华酒店任意住+接送机)</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
            </div>
<!--            第二行-->
            <div class="row">
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>上海直飞三亚五天四晚自由行(春节预售+亲自/蜜月/休闲游首选+豪华酒店任意住+接送机)</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>上海直飞三亚五天四晚自由行(春节预售+亲自/蜜月/休闲游首选+豪华酒店任意住+接送机)</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
                <div class="col-md-4 thumbnail">
                    <img src="../img/jiangxuan_4.jpg" alt="">
                    <span>上海直飞三亚五天四晚自由行(春节预售+亲自/蜜月/休闲游首选+豪华酒店任意住+接送机)</span><br>
                    <font size="5px" color="red">&yen;699</font>
                </div>
            </div>

        </div>
    </div>

</div>

<footer>
<!--    分为两行-->
    <div class="row">
        <img src="../img/footer_service.png" alt="" width="100%">
    </div>
    <div class="row text">
        江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
    </div>
</footer>



</body>
</html>