Bootstrap

  一、Bootstrap是什么

        1、www

        （1）、what：①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架

②.是一个用于快速开发Web应用程序和网站的前端框架

③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷

概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

（2）、why：①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机）

②.移动设备优先 ③.浏览器支持 ④.容易上手

(3)、where:企业网站、博客、网站后台之类的网站
————————————————
版权声明：本文为CSDN博主「iuiuhhh」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/iuiuhhh/article/details/123882063

 二、为什么要用Bootstrap

        能够及时响应可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架，而且移动设备优先；相对于自己编码框架，其自带的样式简单而且有高亮效果

 三、如何使用Bootstrap

        

1.下载Bootstrap库 https://v4.bootcss.com/(Bootstrap管网)

2.页面中引入库

jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】

bootstrap.css：Bootstrap核心样式【添加到head标签中】
————————————————
版权声明：本文为CSDN博主「m0_68756200」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_68756200/article/details/123881893

        四、案例

<!-- 支持手机端 -->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

这个必须写不然适应不了手机端

    <!-- 导航条组件 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- 固定容器 -->
            <div class="container">
                <a class="navbar-brand" href="#">你好，欢迎登陆本页面</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse float-right" id="navbarNavDropdown">
                  <ul class="navbar-nav">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">登录</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">注册</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
                       我的购物车
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </li>
                  </ul>
                </div>
            </div>
         
        </nav>

组件必须放到固定容器中

.navbar-collapse{
                flex-grow: 0;/* 在固定容器中 1代表弹性扩大占用父容器剩余空间 设置为0表示不占用*/
            }

这里确保右浮

所有组件都可以在官网下载： https://v4.bootcss.com/(Bootstrap管网)

效果