Bootstrap【前端框架】

最新推荐文章于 2024-05-10 09:39:23 发布

可乐386

最新推荐文章于 2024-05-10 09:39:23 发布

阅读量1.3k

点赞数

文章标签： bootstrap 前端框架前端

本文链接：https://blog.csdn.net/qq_63662531/article/details/124511875

版权

一、环境安装

1、下载Bootstrap库

网址：http://www.bootstrap.com

二·引入

用它的时候记得引入：

bootstrap.min.css：Bootstrap核心样式【添加到head标签中】
jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】
bootstrap.min.js：Bootstrap核心库

三、 Bootstrap CSS
         1、 概览
                1)、H5文档类型：<!DOCTYPE html>
                2)、移动设备优先，在head中添加：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
            width=device-width：呈现在不同设备上
            initial-scale=1.0：以1:1比例呈现，不会有任何缩放
            user-scalable=no：禁用网页缩放功能
            maximum-scale=1.0：页面放大程序，1.0将禁止用户放大实际尺寸
        
                3)、布局容器
                    固定容器【class="container"】
                大屏幕（大桌面显示器，大于等于 1200px）
                    @media (min-width: @screen-lg-min) { ... }
                中等屏幕（桌面显示器，大于等于 992px）
                    @media (min-width: @screen-md-min) { ... }
                小屏幕（平板，大于等于 768px）
                    @media (min-width: @screen-sm-min) { ... }
                超小屏幕（手机，小于 768px）
            流体容器【class="container-fluid"】

一般直接用固定容器

接下来来看我用栅格实现的功能

代码送上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .navbar-collapse{ 
            flex-grow: 0;
            float: right;
        }
        .form-group{
            width:300px;
            margin-left : auto;
            margin-right : auto;
            margin-top: 30px;
        }
        .ss{
            height: 100px;
            margin-top: 30px;
          

        }

    </style>
    <!-- 引入Bootstrap样式 -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"></link>
</head>
<body>
    <!-- 导航区域 -->
    <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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse float-right" id="navbarNav">
              <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">
                  <a class="nav-link " href="#">我的购物车</a>
                </li>
              </ul>
            </div>

        </div>
       
      </nav>
      <div class="container">
          <!-- 第一行 -->
        <div class="row ss" style="background-color: red;">
          <div class="col">
            <!-- 搜索区域 -->

            <form>
                <div class="form-group">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="请输入书籍关键字" aria-label="Recipient's username" aria-describedby="button-addon2">
                        <div class="input-group-append">
                          <button class="btn btn-primary" type="button" id="button-addon2">查询</button>
                        </div>
                      </div>
                </div>
              </form>

          </div>
        </div>
         <!-- 第二行 -->
         <div class="row" >
            <!-- 左三 -->
            <div class="col-3" style="background-color:pink;">
              书籍分类
            </div>
            <!-- 右9 -->
            <div class="col-9" >
                <div class="row" style="background-color: blue;">
                轮播图
                 </div>
                <div class="row" style="background-color:greenyellow">
                    <div class="col">
                    ① 新书上架
                    </div>
                    <div class="col">
                    ②新书上架
                    </div>
                    <div class="col">
                    ③ 新书上架
                    </div>
                    <div class="col">
                    ④ 新书上架
                    </div>
                    <div class="col">
                    ⑤ 新书上架
                    </div>
                </div>
                <div class="row" style="background-color: aqua;"> 
                    <div class="col">
                    ①热门书籍
                    </div>
                    <div class="col">
                    ②热门书籍
                    </div>
                    <div class="col">
                    ③热门书籍
                    </div>
                    <div class="col">
                    ④热门书籍
                    </div>
                    <div class="col">
                    ⑤热门书籍
                    </div>
                </div>

              </div>
              
              
         </div>
        </div>
      

    <!-- 分别引入jquery和Bootstrap的类库 -->
    <!-- 引入JQuery类库 -->
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入Bootstrap类库 -->
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

可乐386

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap【前端框架】

一、环境安装1、下载Bootstrap库网址：http://www.bootstrap.com二·引入用它的时候记得引入： bootstrap.min.css：Bootstrap核心样式【添加到head标签中】 jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】 bootstrap.min.js：Bootstrap核心库三、 Bootstrap CSS 1、概览 ...
复制链接

扫一扫