Bootstrap——Bootstrap学习笔记以及案例分享

Bonsoir777

已于 2022-09-21 14:41:36 修改

阅读量1.6k

点赞数 3

分类专栏： bootstrap 文章标签：学习前端 bootstrap CSS css3

于 2022-09-20 19:22:00 首次发布

本文链接：https://blog.csdn.net/Bonsoir777/article/details/126950434

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、关于Bootstrap
二、如何下载、使用
- 1.下载（以版本 v3.4.1为例）
- 2.使用以及基本模板
三、案例分享
总结

一、关于Bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

二、如何下载、使用

1.下载（以版本 v3.4.1为例）

官网——https://v3.bootcss.com/

1.1 用于生产环境的 Bootstrap

编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。

1.2 Bootstrap 源码

Less、JavaScript 和字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作

2.使用以及基本模板

拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。你可以对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

——不要忘记引入jQuery bootstrap.js 以及 bootstrap.css 哦！！（bootstrap3依赖jQuery）

<!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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

三、案例分享

1. 示例图

已经初步了解Bootstrap，接下来就让我们通过下面这个案例进一步学习关于Bootstrap 的使用吧！——由于文章篇幅的关系，在这里就以一个页面的实现为例吧

2.导航条的实现

bootstrap组件的使用

Bootstrap 自带了大量可复用的组件，如下图所示，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。以导航条的制作为例，bootstrap中的组件(在组件页面中)只需要直接复制保留需要的结构即可使用。（下文较为复杂的页面结构在Bootstrap中都可找到并直接使用。）

2.1 HTML结构

 <!-- 导航栏区域 -->
    <nav class="navbar navbar-default">
        <div class="container">
            <!-- 导航栏左侧区域 -->
            <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="#">
                    <img src="../img/logo.png" alt="logo">
                </a>
            </div>

            <!-- 导航栏右侧区域 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="../html/index.html">
                            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                            首页
                        </a>
                    </li>
                    <li class="active">
                        <a href="#">
                            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                            资讯
                        </a>
                    </li>
                    <li>
                        <a href="案例.html">
                            <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
                            案例
                        </a>
                    </li>
                    <li>
                        <a href="关于.html">
                            <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
                            关于
                        </a>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

2.2 CSS样式

/* 导航栏区域样式设置 */
.navbar {
    margin-bottom: 0px;
}

.navbar-brand {
    padding: 0;
}

3. 新闻列表以及底部区域的实现

3.1 HTML 结构

 <!--主体——新闻列表区域 -->
    <main>
        <div class="container">
            <div class="row">
                <!-- 左侧新闻列表 -->

                <div class="col-md-8 col-xs-12">
                    <div class="media">
                        <div class="media-left ">
                            <a href="#">
                                <img class="media-object" src="../img/info1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body left">
                            <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <p class="hidden-xs">
                                TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
                            </p>
                            <span>admin 15 / 10 / 11</span>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left ">
                            <a href="#">
                                <img class="media-object" src="../img/info1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body left">
                            <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <p class="hidden-xs">
                                TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
                            </p>
                            <span>admin 15 / 10 / 11</span>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left ">
                            <a href="#">
                                <img class="media-object" src="../img/info1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body left">
                            <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <p class="hidden-xs">
                                TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
                            </p>
                            <span>admin 15 / 10 / 11</span>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left ">
                            <a href="#">
                                <img class="media-object" src="../img/info1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body left">
                            <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <p class="hidden-xs">
                                TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
                            </p>
                            <span>admin 15 / 10 / 11</span>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left ">
                            <a href="#">
                                <img class="media-object" src="../img/info1.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body left">
                            <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <p class="hidden-xs">
                                TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
                            </p>
                            <span>admin 15 / 10 / 11</span>
                        </div>
                    </div>
                </div>
                <!-- 右侧新闻列表 -->
                <div class="col-md-4 hidden-xs" style="background: #fff;">
                    <div class="hot">热门资讯</div>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="../img/info1.jpg" id="special">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <span>admin 15 / 10 / 11</span>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="../img/info1.jpg" id="special">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <span>admin 15 / 10 / 11</span>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="../img/info1.jpg" id="special">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <span>admin 15 / 10 / 11</span>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="../img/info1.jpg" id="special">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发</h4>
                            <span>admin 15 / 10 / 11</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

 <!-- 底部区域 -->
    <div class="footer">
        <div class="footer-inner main">
            <p class="text-center"><a href="#">企业培训</a> | <a href="#">合作事宜</a> | <a href="#">版权投诉</a></p>
            <p class="text-center">皖ICP 备12345678. © 2009-2016 艾特企训网. Powered by Bootstrap.</p>
        </div>
    </div>

3.2 CSS样式

* 主体——新闻列表区域样式设置 */
main {
    background: rgb(238, 238, 238);
}

.row {
    margin: 40px 0px;
}

.media {
    padding: 15px;
    background: #fff;
}

.media img {
    height: 70px;
}

.media-body>h4 {
    margin-bottom: 5px;
    color: #333;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 14px;
}

.media-body>p {
    line-height: 26px;
    padding-top: 10px;
}

.hot {
    font-size: 18px;
    padding-bottom: 0px;
    border-left: 5px solid #000;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    margin-left: 15px;
    margin-top: 15px;
}

.row .hidden-xs {
    padding-left: 0;
}

.row .hidden-xs .media-body {
    padding-left: 0px;
}

.row .hidden-xs h4 {
    font-size: 16px;
    line-height: 26px;
}

#special {
    height: 85px;
}

/* 底部区域样式设置 */
.footer {
    background: #666666;
    color: #eee;
    padding: 25px 0 10px 0;
}

.footer a {
    color: #eee;
}

.footer p {
    margin-bottom: 10px;
}
@media (max-width: 1000px){
    .hidden-xs{
        display: none;
    }
}
@media (min-width: 1200px) {
    .container{
        width: 1700px;
    }

    .media img {
        height: 170px;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .left {
        padding-left: 15px;
    }

    .media-body>h4 {
        font-size: 20px;
    }

    .container {
        width: 1170px;
    }

    .outer {
        padding: 50px 0px;
    }

    ;

    .container {
        width: 1170px;
    }

    .eight {
        width: 66.66666667%;
    }

    .four {
        width: 33.33333333%;
    }

    .news>.news-right {
        width: 58%;

        padding-left: 15px;

    }

    .news-left img {
        height: 170px;
    }

    .news-right h4 {
        font-size: 20px;
    }

    .news-right p {
        line-height: 26px;
        padding-top: 10px;
    }

    .news-right span {
        font-size: 14px;
    }
}