Bootstrap

目录:

1.Bootstrap是什么?

            2.为什么要使用Bootstrap?

     3.Bootstrap用在哪里?

4.Bootstrap的官网

5.Bootstrap如何用

Bootstrap是什么?
        ①.诞生于2011年,来自Twitter公司,是目前最受欢迎的前端框架

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

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

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

为什么要使用 Bootstrap?
        ①.响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)

        ②.移动设备优先

        ③.浏览器支持

        ④.容易上手

Bootstrap用在哪里?
        企业网站、博客、网站后台之类的网站

        不适合电商(因为电商网站分类太多)

Bootstrap官网
Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

一、如何在项目中使用Bootstrap
        1、首先在官网中下载Bootstrap库   https://v4.bootcss.com/

        2、下载好库之后将Bootstrap的核心样式和核心库引入到项目对应的文件夹中(在引入                          Bootstrap核心库之前要先引入jQuery库)  

<!-- 引入Bootstrap的CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!-- 引入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>

案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首页导航&搜索区域Bootstrap实现&搭首页框架</title>
        <!-- 引入Bootstrap的CSS -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <!-- 支持手机端 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <style>
            .navbar-collapse {
                flex-grow: 0;
                /*1代表弹性扩大占用父容器剩余空间 设置为0表示不占用  在固定容器中*/
            }
 
            .ss {
                background-color: #DBDBDA;
                height: 100px;
                margin-top: 20px;
            }
 
            .form-group {
                width: 300px;
                margin-top: 31px;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </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" 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">我的购物车</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- 大致思路:
         第一行为搜索区域
         第二行
            左3 为书籍分类
            右9 
                上为轮播图
                下为新书上架-热门书籍
         -->
        <!-- 固定容器 -->
        <div class="container">
            <!-- 第一行 -->
            <div class="row ss">
                <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" style="background-color: skyblue;">
                <div class="col-3">
                    书籍分类
                </div>
 
                <div class="col-9" style="background-color: greenyellow;">
                    <div class="row">
                        <div class="col">
                            上轮播图
                        </div>
                    </div>
 
                    <div class="row" style="background-color: deeppink;">
                        <div class="col">
                            下新书上架-热门书籍
                        </div>
                    </div>
                </div>
            </div>
        </div>
 
        <!-- 引入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>

页面效果图:

案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>案例1:查询按钮原生态实现对比Bootstrap方式实现</title>
        <style type="text/css">
            .aa{
                background-color: #007BFF;/* 背景颜色 */
                color: white;/* 字体颜色 */
                border:0px; /* 无边框*/
                width: 60PX;/* 宽度 */
                height: 40PX;/* 高度 */
                font-size: 18px;/* 字体大小 */
                border-radius: 4px;/* 设置外边框圆角 */
            }
        </style>
        <!-- 引入Bootstrap的css(层叠样式表) -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <!-- 支持手机端 -->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
            &nbsp;&nbsp;  <button class="aa">查询</button>

            <hr color="red">

             &nbsp;&nbsp;<button class="btn btn-primary">查询</button>


            <!-- 引入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>

页面效果图:

案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>案例2:首页导航&搜索区域原生态实现(div+css)</title>
    </head>
    <style type="text/css">
        .dh{
            background-color: #F8F9FA;/* 背景颜色 */
            width: 100%;/* 宽度 */
            height: 50px;/* 高度 */
        }
        .bt{
            float: left;/* 左飘 */
            font-size: 18px;/* 字体大小 */
            line-height: 50px;/* 行高 */
            margin-left: 50px;/* 左间距 */
        }
        .lj{
            float: right;/* 右飘 */
            margin-right: 50px;/* 右间距 */
            line-height: 50px;/* 行高 */
        }
        .lj a{
            margin-left: 10px;/* 让a标签隔开 */
        }
        .ss{
            background-color: #DCDCDC;/* 背景颜色 */
            height: 100px;/* 高度 */
            margin: 20px 50px 0px 50px;/* 上右下左 */
            text-align: center;/* 水平居住 */
            line-height: 100px;/* 让行高跟高度保持一致 */
        }
        .ss input{/* 文本框的样式 */
            border: 0px;/* 无边框 */
            width: 200px;/* 宽度 */
            height: 25px;/* 高度 */
        }
        .ss button{
            background-color: #007BFF;/* 背景颜色 */
            color: white;/* 字体颜色 */
            border:0px; /* 无边框*/
            width: 55PX;/* 宽度 */
            height: 30PX;/* 高度 */
            font-size: 1.125rem;/* 字体大小 */
            border-radius: 4px;/* 设置外边框圆角 */
        }
    </style>
    <body>
        <!-- 导航条区域 -->
        <div class="dh">
            <div class="bt">你好,欢迎来到网上书店</div>
            <div class="lj">
                <a>首页</a>
                <a>登录</a>
                <a>注册</a>
                <a>我的购物车</a>
            </div>
        </div>
        <!-- 搜索区域 -->
        <div class="ss">
            <input type="text" />
            <button type="button">查询</button>
        </div>
    </body>
</html>

页面效果图:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值