Bootstrap开发

天地沙

已于 2022-06-22 23:07:14 修改

阅读量281

点赞数

分类专栏：前端 Bootstrap 文章标签：前端 servlet html

于 2022-06-22 23:03:48 首次发布

本文链接：https://blog.csdn.net/legendsASD/article/details/125418346

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Bootstrap

1 篇文章 0 订阅

订阅专栏

1.响应式开发

1.1 响应式开发原理

使用媒体查询对不同宽度的设备进行对应布局和样式的设置，从而适配不同设备的目的。

设备划分	（宽度）尺寸区间
超小屏幕（手机）	<768px
小屏设备（平板）	768~992px
中等屏幕（桌面显示器）	992~1200px
宽屏设备（大桌面显示器）	>1200px

1.2 响应式布局容器

需要一个父级作为布局容器，配合子级元素实现变化。

常见的响应式尺寸划分

设备划分	常见尺寸设置
超小屏幕（手机）	宽度100%
小屏设备（平板）	宽度750px
中等屏幕（桌面显示器）	宽度970px
宽屏设备（大桌面显示器）	宽度1170px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原理介绍</title>
    <style>
      .container{
        height: 100px;
        background: hotpink;
      }
      /*屏幕宽度 小于768px*/
      @media screen and (max-width: 767px){
        .container{
          width: 100%;
        }
      }
      /*如果同时满足，后面的样式会覆盖前面的样式*/
      /*屏幕宽度 768~992px*/
      @media screen and (min-width: 768px){
        .container{
          width: 750px;
        }
      }
      /*屏幕宽度 992~1200px*/
      @media screen and (min-width: 992px){
        .container{
          width: 970px;
        }
      }
      /*屏幕宽度 >1200px*/
      @media screen and (min-width: 1200px){
        .container{
          width: 1170px;
        }
      }
    </style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

1.3 响应式案例：响应式导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式导航栏</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .container{
        width: 750px;
        margin: 0 auto;
      }
      ul{
        list-style: none; 
      }
      .container ul li{
        float: left;
        width: 93.75px;
        height: 30px;
        background: hotpink;
        line-height: 30px;
        text-align: center;
      }
      @media screen and (max-width: 767px){
        .container{
          width: 100%;
        }
        .container ul li{
          width: 33.3%;
        }
      }
    </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>导航栏</li>
      <li>导航栏</li>
      <li>导航栏</li>
      <li>导航栏</li>
      <li>导航栏</li>
      <li>导航栏</li>
      <li>导航栏</li>
      <li>导航栏</li>
    </ul>
  </div>
</body>
</html>

2.Bootstrap前端开发框架

2.1 Bootstrap简介

Bootstrap来自Twitter，是目前最受欢迎的前端框架，是基于HTML、CSS和JS的，简单灵活，是的Web开发更加快捷。

中文官网：Bootstrap中文网

官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.

2.2 Bootstrap使用

按照框架规范使用，使用四步曲如下：

创建文件夹结构（ps:没写后缀标示文件夹）

-bootstrap

-css

-fonts

-js

-css

-img

-index.html
创建html骨架机构
引入相关样式文件

书写内容

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

2.3 布局容器

Bootstrap为页面内容和栅格系统报过来一个.container容器，Bootstrap预先定义好了这个类，叫.container，它提供了两个作此用处的类

container类

响应式布局容器，宽度固定，如下：

设备划分宽度设置
超小屏(<768px) 100%
小屏(>=768px) 750px
中屏(>=992px) 970px
大屏(>=1200px) 1170px
container-fluid类
- 流式布局容器百分百宽度
- 占据全部视口（viewport）的容器
- 适合于单独做移动端开发

设备划分	宽度设置
超小屏(<768px)	100%
小屏(>=768px)	750px
中屏(>=992px)	970px
大屏(>=1200px)	1170px

3.Bootstrap栅格系统

3.1 栅格系统简介

栅格系统（grid systems），是指将网页布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着时评或视口尺寸的增加，系统会自动分为最多12列。

Bootstrap里面宽度是固定的，但是在不同屏幕下，container的宽度不同，再把container划分为12等份。

3.2 栅格系统参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，我们再将自己的内容放入已经创建好的布局中。

	超小屏	小屏	中屏	大屏
.container最大宽度	自动（100%）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数	12	12	12	12

值得注意的是，每一列都有一个15px的padding。

如果要覆盖原有类的样式，直接重新写样式再添加上去即可（直接覆盖）。

参考代码如下：

<!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">
    <title>Bootstrap Exercise</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!--[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]-->
    <style>
        /*属性选择器 以col开头的类 */
        [class^="col"]{
            border: 1px solid hotpink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <!-- col-lg-3 表示大屏下每个盒子占3份 col-md-4 表示中屏下每个盒子占4份-->
        <div class="col-lg-3 col-md-4">1</div>
        <div class="col-lg-3 col-md-4">2</div>
        <div class="col-lg-3 col-md-4">3</div>
        <div class="col-lg-3 col-md-4">4</div>
    </div>
<!--少于12列就空位-->
    <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-1">4</div>
    </div>
<!--多于12份 多余的另起一行显示-->
    <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
    </div>
</div>


</body>
</html>

3.3 列嵌套

栅格系统内置的栅格系统将内容再次嵌套，简单来讲就是将一个列再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-元素到已经存在的.col-sm-元素内。

例如，将大屏下col-lg-2再划分12份。

注意，12份与份之间不能有margin，否则会被挤到下一行。

如果想实现元素之间有空白，则可以让大盒子划分12份，大盒子设置空白padding，里面小盒子放内容。

参考代码如下：

<!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">
    <title>Bootstrap Exercise</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!--[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]-->
    <style>
        /*属性选择器 以col开头的类 */
        [class^="col"]{
            border: 1px solid hotpink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <!-- col-lg-3 表示大屏下每个盒子占3份 col-md-4 表示中屏下每个盒子占4份-->
        <div class="col-lg-3">
            <!-- 列嵌套最好添加一个行row,这样可以取消父元素的padding值 而且高度自动和父级一样-->
            <div class="row">
                <div class="col-lg-6">a</div>
                <div class="col-lg-6">b</div>
            </div>
        </div>
        <!--直接嵌套-->
        <div class="col-lg-3">
            <div class="col-lg-6">a</div>
            <div class="col-lg-6">b</div>
        </div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
</div>
</body>
</html>

3.4 列偏移

使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距margin。

使用场景：希望左右分布（或居中对齐），中间空着，比如左边四份，右边四份，中间四份空着，可以给右边四份加个右偏移。（也可以通过加空盒子实现）

参考代码如下：

<!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">
    <title>Bootstrap Exercise</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        /*属性选择器 以col开头的类 */
        [class^="col"]{
            border: 1px solid hotpink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3 col-lg-offset-6">2</div>
    </div>
</div>
</body>
</html>

3.5 列排序

通过使用.col-md-push-*（往右推）和.col-md-pull-*（往左拉）可以很容易的改变列（column）的顺序。(例如：A8 B4 -> B4 A8)

参考代码如下：

<!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">
    <title>Bootstrap Exercise</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        /*属性选择器 以col开头的类 */
        [class^="col"]{
            border: 1px solid hotpink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">左侧</div>
        <div class="col-md-8 col-md-pull-4">右侧</div>
    </div>
</div>
</body>
</html>

3.6 响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能时，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

使用场景举例：淘宝有四列内容，但第三列不重要，缩小之后直接隐藏第三列。

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

代码示例如下：

<!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">
    <title>Bootstrap Exercise</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        /*属性选择器 以col开头的类 */
        [class^="col"]{
            border: 1px solid hotpink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3">1<span class="visible-lg">我只在大屏中显示</span></div>
        <div class="col-md-3">2</div>
        <div class="col-md-3 hidden-sm">隐藏</div>
        <div class="col-md-3">4</div>
    </div>
</div>
</body>
</html>

附表：Bootstrap组件 https://v3.bootcss.com/componengts/