Bootstrap3（1）8.15

最新推荐文章于 2024-04-24 15:41:29 发布

溜溜梅353

最新推荐文章于 2024-04-24 15:41:29 发布

阅读量354

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_68597796/article/details/132302217

版权

bootstrap3

bootstrap3简介

bootstrap3简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

移动设备优先自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持所有的主流浏览器都支持 Bootstrap。
容易上手只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机.

Bootstrap 包的内容

基本结构Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。
CSSBootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等
JavaScript 插件Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

Bootstrap 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
请添加图片描述

网格选项

超小设备手机（<768px）:.col-xs-
小型设备平板电脑（≥768px）:.col-sm-
中型设备台式电脑（≥992px):.col-md-
大型设备台式电脑（≥1200px）:.col-lg-

Bootstrap常用类

类名：container左右留白（指最外部的div）

类名：container-fluid不留白占满整个页面（指最外部的div）

row代表网格系统中的行

Bootstrap网格自动将网页宽度分为12格通过col-xs col-sm col-md col-lg可以设置这个标签占多大的地方标签，一行标签内不能超过十二行，否则会强制换行

Bootstrap使用

在需要使用Bootstrap的内容时可以官网内观看需要的组件和css，找到想要的内容后将其复制粘贴到合适的位置就可以，当然也可以进行适当的修改

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="./shangc.css">

</head>

<body>
    <div class="container">
        <nav class="navbar navbar-default daohang">
            <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>
                    <img src="../img/wswxtb-removebg-preview.png" alt="">
                    <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 class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <!-- 轮播图 -->
        <div id="carousel-example-generic" class="carousel slide lbt" 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 -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="../img/taobaolb1.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>

                <div class="item">
                    <img src="../img/taboabolb2.png" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>

                <div class="item">
                    <img src="../img/tblb3.jpg" alt="...">
                    <div class="carousel-caption">
                    </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 class="row rm">
            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
                <h2>热门商品</h2>
            </div>
            <div class="col-lg-9 col-md-6 col-sm-12 col-xs-12">
                <p>根据您的喜好精心为您推荐优质商品</p>
            </div>
        </div>
        <div class="row left">
            <div class="col-lg-3 hidden-md hidden-sm hidden-xs">
                <img src="../img/clo.PNG" alt="">
            </div>
            <div class="col-lg-9 right">
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"><img src="../img/nnz.PNG" alt=""></div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/cb44.jpg" alt=""></div>
                    <div class="col-lg-3 col-md-6  col-sm-6 col-xs-6"><img src="../img/fd4.jpg" alt=""></div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/ac2.jpg" alt=""></div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/q2.jpg" alt=""></div>
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"><img src="../img/nnn.PNG" alt=""></div>
                </div>
            </div>
        </div>
        <div class="cp">
            <div class="row">
                <p>潮牌来袭</p>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqq067.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqq1.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqq28ab.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqq3b2f.jpg" alt=""></div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqq6c35.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqq7f2.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqq880-1.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqq980c.jpg" alt=""></div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqqcd1.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqqcd8.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqqdd12.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqqdd55.jpg" alt=""></div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/qqqf06.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/comment-img-1.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/com-reply-1.jpg" alt=""></div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6"><img src="../img/com-reply-2.jpg" alt=""></div>
            </div>
        </div>
    </div>


    <script src="../lib/dist/js/jquery-3.1.1.min.js"></script>
    <script src="../lib/dist/js/bootstrap.min.js"></script>
</body>

</html>

* {
    padding: 0;
    margin: 0;
}

.daohang>div>div>img {
    width: 50px;
    height: 50px;
    float: left;
}

.lbt div img {
    width: 100%;
}

.rm>div:nth-child(2)>p {
    margin-top: 35px;
}

.left div img {
    height: 400px;
    width: 100%;
}

.right>div>div>img {
    width: 100%;
    height: 180px;

}

.right>div:nth-child(1) {
    margin-bottom: 40px;
}

.cp {
    margin-top: 30px;
}

.cp>div>p {
    text-align: center;
    font-size: 30px;
}

.cp div div img {
    width: 100%;
    height: 200px;
    margin: 10px;
}

溜溜梅353

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap3（1）8.15

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。类名：container左右留白（指最外部的div）类名：containe
复制链接

扫一扫