响应式布局——Bootstrap

二、BootStrap1.1 BootStrap简介目标：使用BootStrap框架快速开发响应式网页Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及Javascript，快速编写功能完善网页及常见交互效果中文官网：https://www.bootcss.com/1.2 BootStrap使用步骤目标：使用Bootst

一条咸鱼ovo

8560人浏览 · 2022-04-06 20:28:38

一条咸鱼o*v*o · 2022-04-06 20:28:38 发布

二、BootStrap

1.1 BootStrap简介

目标：使用BootStrap框架快速开发响应式网页

Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及Javascript，快速编写功能完善网页及常见交互效果
中文官网：https://www.bootcss.com/

1.2 BootStrap使用步骤

目标：使用Bootstrap框架快速布局响应式网页

1、下载： https://www.bootcss.com/

首页 ->BootStrap3中文文档 ->下载Bootstrap

写项目的时候用的是生产环境的

2、使用

引入：Bootstrap提供的CSS代码

<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

引用的要么是bootstrap.css要么是bootstrap.min.css(格式化压缩到同一行的，压缩好的，体积小，用户打开速度快，写项目的时候因为不用修改这个css所以直接就引用min.css)

调用类：使用Bootstrap提供的样式
- container：响应式布局版心类

1.3 BootStrap栅格系统

目标：使用BootStrap栅格系统布局响应式网页

栅格系统：把网页的整个宽度在BootStrap3中默认等分成12等份，每个内容在这12份中占的份数

栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份

BootStrap3将所有屏幕分成四种

	超小屏幕	小屏幕	中等屏幕	大屏幕
响应断点	<768px	>=768px	>=992px	>=1200px
别名	xs	sm	md	lg
容器宽度	100%	750px	970px	1170px
类前缀	col-xs-* *(代表元素占的份数数字)**	col-sm-*	col-md-*	col-lg-*
列数	12	12	12	12
列间隙	30px	30px	30px	30px

.container是BootStrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中

如果设置版心的时候不想要它自带的15px的内边距呢?可以自己单独设置css,也可以使用.row .col

分别使用.row类名和.col类名定义栅格布局的行或列
- container类自带间距15px
- row类自带间距-15px 把带有row这个类的标签放在带有container类的标签里面

.container-fluid也是BootStrap中专门提供的类名,所有应用该类名的盒子,宽度均为100%

1.4 全局样式

目标:掌握BootStrap手册用法,使用全局CSS样式美化标签

作用:控制单独标签的样式

手册用法:

BootStrap预定义了大量类用来美化页面,掌握手册的查找方法是学习全局样式的重点

网站首页 ->BootStrap3中文文档 ->全局CSS样式 ->按分类导航查找目标类

1.4.1 表格

1.4.2 按钮

1.5 组件

目标:使用BootStrap组件快速布局网页

什么是组件?就是BootStrap团队在框架内部封装好的各种各样网页常见的区域

组件
- BootStrap提供的常见功能,包含了HTML结构和CSS样式
使用方法
- 引入BootStrap样式
- 复制结构,修改内容

1.5.1 Glyphicons字体图标

目标：使用Glyphicons字体图标实现网页中的图标效果

Glyphicons字体图标的使用步骤
- HTML页面引入BootStrap样式文件
- 空标签调用对应类名
  - glyphicon
  - 图标类

1.6 插件

目标：使用BootStrap插件实现常见的交互效果

插件
- Bootstrap提供的常见效果，包含了HTML结构，CSS样式还有Javascript

插件的使用步骤
- 引入BootStrap样式
- 引入js文件：jQuery.js+BootStrap.min.js
- 复制HTML结构，并释放调整结构或内容

<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

注意：

必须先引jQuery再引框架的
界面有js才有交互效果

案例——Alloy Team

注意点：

由于要引两个CSS，一个自己写的CSS，一个BootStrap的CSS，要先写框架的CSS，自己写的CSS在后面，因为如果框架的CSS我们不满意，可以通过自己写的CSS层叠掉，而且BootStrap的CSS已经包含了base.css(初始化的样式)

可以定制框架，比如这个项目，想让视口宽度小于992px的时候，导航栏就变成小图标，但是目前的框架不能实现，可以定制，然后把定制完的BootStrap重新下载，引入到自己的代码中

像这样的栅格系统，它每一份的宽度都是占父元素的百分之多少，如果要呈现这样的有间距的效果，根本没有空再加margin了，所以它看起来有间距，是因为内容之间有间距

<!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>腾讯全端</title>
    <link rel="stylesheet" href="./lib/bootstrap1/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- header组件 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- 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>
                <a class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></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 navbar-right">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">GitHub</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>

                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!-- header组件 -->
    <!-- 轮播图 -->
    <div id="carousel-example-generic" class="carousel slide" 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>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="./uploads/banner_1.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="./uploads/banner_2.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="./uploads/banner_3.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="./uploads/banner_4.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="project">
        <h3 class="h2">OpenSource/开源项目</h3>
        <p>种类众多的开源项目，让你爱不释手</p>
        <div class="container">
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
        </div>
    </div>
    <!-- 开源项目部分 -->

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

</html>

//banner
.carousel {
    // 视口宽度>992px 图500px min-width
    // 视口宽度<992px 图400px max-width
    // 视口宽度<768px 图250px max-width
    img {
        height: 100%!important;
    }

    @media (max-width: 992px) {
        .item {
            height: 400px;
        }
    }

    @media (max-width: 768px) {
        .item {
            height: 250px;
        }
    }
    @media (min-width: 992px) {
        .item {
            height: 500px;
        }
    }
}

//header
.navbar-default {
    background-color: transparent;
    border: 0;
}
//header

// 开源项目
    .project {
        margin-top: 30px;
        text-align: center;
        .container {
            div {
                // background-color: pink;
                a {
                    display: block;
                    height: 200px;
                    background-color: skyblue;
                }
            }
        }
    }

// 开源项目

注意：

什么样的网站适合做成腾讯全端这样的响应式？企业站，或是内容非常少的网站

淘宝京东那样的电商站，内容太多，做不了响应式效果，解决方法：PC端做一个网站，移动端做一个网站