44 篇博文含有标签「前端」

在线免费制作LOGO并发送到指定邮箱

网址

https://hatchful.shopify.com/

2021年5月6日前端阅读需 1 分钟

一篇文章学会使用BootStrap

1：引入BootStrap的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>

2：基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 下面一句的作用是告诉IE浏览器以最新版本（edge)的方式渲染页面 -->
    <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 href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/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.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

3：流体容器（.container-fluid）

流体容器会随着页面窗口的大小变化而变化，其宽度始终占据整个屏幕的宽度。
流体容器相当于width=100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container-fluid {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        test
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>

4：固定容器（.container）

固定容器的宽度是固定的，不会随屏幕大小的变化而变化。
固定容器是有三个阈值的，如下图所示（当屏幕宽度大于等于1200px的时候，容器的宽度为1170px）

5：栅格系统

在栅格系统中一行被分为12列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container {
            background-color: aqua;
        }
        div[class |= col] {
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-10">col-lg-10</div>
            <div class="col-lg-2">col-lg-2</div>
        </div>
        <div class="row">
            <div class="col-lg-2">col-lg-2</div>
            <div class="col-lg-10">col-lg-10</div>
        </div>
        <div class="row">
            <div class="col-lg-6">col-lg-6</div>
            <div class="col-lg-6">col-lg-6</div>
        </div>
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>

5.1 效果

5.2 列的阈值划分（lg,md,sm,xs的含义）

5.3 被两个列控制

当屏幕处于lg的时候是10列，2列分布当屏幕处于md大小的时候，是6列，6列平分。

当屏幕处于sm的状态时，第一个占6列，第二个占6列，第二个之所以占6列，是因为第二个col-xs-6向上兼容。

5.4 列偏移

向右偏移一列。

6：标题标签

给类名添加.h1到.h6，实现下面的效果

7：常用标签

7.1 对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

7.2 改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

7.3 常用标签查询网址

https://v3.bootcss.com/css/#overview

8：表格（table)

模板代码

<div class="container table-responsive">
        <table class="table table-bordered table-striped table-hover ">
            <tr class="success">
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
        </table>
    </div>

使用方法网址：表格

8.1 把表格变成响应式表格

通过给container所在的div添加table-responsive

9：按钮

参考网址
添加类名 btn-block 会让按钮占一整行
通过类名active使得按钮处于激活状态（被按的情况）
添加类名 disabled 使得按钮处于禁用状态

9.1 按钮模板

<div class="container">
        <a class="btn btn-default" href="#" role="button">Link</a>
        <!-- 在导航和导航条上一般使用button -->
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">
        <button type="button" class="btn btn-success">（成功）Success</button>
        <button type="button" class="btn btn-primary btn-block btn-lg">（大按钮）Large button</button>
        <button type="button" class="btn btn-success btn-lg">（大按钮）Large button</button>

        <!-- 把按钮变为块元素 -->
        <button class="btn btn-success btn-block btn-md">充满容器</button>
        <!-- 使得按钮处于激活状态 -->
        <button class="btn btn-success btn-block btn-md active">充满容器</button>
        <!-- 使按钮处于不可用状态 -->
        <button class="btn btn-success btn-block btn-md disabled">充满容器</button>
    </div>

9.2 模板效果

10：图片

类名	作用
img-responsive	使图片支持响应式布局
center-block	让图片居中
img-rounded	使图片表现为圆角矩形
img-circle	使图片表现为圆形
img-thumbnail	让图片表现为带相册框的矩形

10.1 示例代码

<div class="container">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-rounded">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-circle">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-thumbnail">
    </div>

10.2 效果展示

11：辅助类

11.1 关闭符号

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

11.2 三角符号

<span class="caret"></span>

11.3 快速浮动

类名	作用
pull-left	快速左浮动
pull-right	快速右浮动

11.4 让内容块居中

类名	作用
center-block	内容块居中
text-center	让div中的文本居中

11.5 清除浮动

类名	作用
clearfix （这个类名是给父元素添加的）	清除浮动

12：响应式工具

12.1 隐藏或显示内容

通过添加如下类名，实现隐藏或显示内容（带星号的不要用）

13：缩略图

13.1 仿BootStrap官网缩略图源码

<!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>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .thumbnail h3 {
            color: #337ab7;
        }
        .thumbnail small {
            font-size: 65%;
            text-align: center;
            line-height: 1;
            font-weight: 400;
        }
        .thumbnail p {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/BootStrap网站实例.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/webpack.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/react.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/typescript.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/svelte.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nextjs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/babeljs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nodejs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>

</html>

13.2 实现效果

要想实现点击图片跳转到指定网页，给img标签添加一个a标签即可。

14：仿BootStrap项目推荐页

14.1 源代码

<!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>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .thumbnail h3 {
            color: #337ab7;
        }
        .thumbnail small {
            font-size: 65%;
            text-align: center;
            line-height: 1;
            font-weight: 400;
        }
        .thumbnail p {
            text-align: center;
        }
        .jumbotron {
            position: relative;
            color: #fff;
            text-align: center;
            background: linear-gradient(45deg, #020031, #6d3353);
            text-shadow: 0 1px 3px rgb(0 0 0 / 40%), 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: inset 0 3px 7px rgb(0 0 0 / 20%), inset 0 -3px 7px rgb(0 0 0 / 20%);
        }

        .jumbotron h1 {
            font-size: 90px;
            font-weight: 700;
            line-height: 1;
        }

        .jumbotron h2 {
            font-size: 24px;
            font-weight: 200;
            line-height: 1.25;
        }

        .jumbotron:after {
            content: '';
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            background: url(./images/bootstrap-bgc.png) repeat 50%;
            position: absolute;
            opacity: .4;
            background-size: 150px 150px;
        }

        .masthead {
            padding: 90px 0 110px;
        }

        .projects-header {
            width: 60%;
            text-align: center;
            font-weight: 200;
            display: block;
            margin: 60px auto 40px;
        }

        .page-header {
            padding-bottom: 9px;
            /* margin: 40px 0 20px; */
            border-bottom: 1px solid #eee;
        }

        .page-header h2 {
            display: block;
            font-size: 42px;
            letter-spacing: -1px;
            margin-block-start: 0.83em;
            /* margin-block-end: 0.83em; */
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            /* font-weight: bold; */
        }

        .page-header p {
            margin: 0 0 10px;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
    </style>
</head>

<body>
    <div class="jumbotron masthead">
        <div class="container">
            <h1>Bootstrap</h1>
            <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
        </div>
    </div>
    <div class="container projects">
        <div class="projects-header page-header">
            <h2>Bootstrap相关优质项目推荐</h2>
            <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <a href="http://google.com" target="_blank"><img src="images/BootStrap网站实例.png" alt="..." ></a>
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/webpack.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/react.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/typescript.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/svelte.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nextjs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/babeljs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/nodejs.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

14.2 实现效果

15：表单

15.1 基本模板

<div class="container">
    <div class="col-md-5">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="username" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</div>

15.2 基本模板呈现的效果

其余表单样式参阅表单

16：字体图标

16.1 示例代码

<button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

16.2 示例效果

基础类 glyphicon 是一定要加的。
改图标只用从库中选择类名然后添加上即可。
通过给span单独加样式，可以在字体图标的基础上继续进行修改

17：下拉菜单

引入时要先引入jquery和bootstrap.js才可以使用

17.1 模板代码

<!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>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              Dropdown
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

17.2 模板效果

18：按钮组

18.1 示例代码

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

18.2 呈现效果

19：输入框组

19.1 示例代码

<div class="input-group">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2">@example.com</span>
    </div>

    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <span class="input-group-addon">.00</span>
    </div>

    <label for="basic-url">Your vanity URL</label>
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
        <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>

19.2 实现效果

20：导航

20.1 基本案例

<!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>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages</a></li>
        </ul>
    </div>



    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $('.nav-tabs a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
    </script>
</body>

</html>

注意：除了js要引入外，还要单加一个scripts标签，然后里面填上下面的代码,别忘了将类名修改为自己的导航的类名
$('.nav-tabs a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
20.2 案例实现效果
21：导航条
21.1 示例代码

21.2 实现效果

22：分页与翻页

22.1 模板代码

<div class="container">
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-lg">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li class="active"><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li class="disabled"><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

22.2 实现效果

23：标签

23.1 模板代码

<h1>Example heading <span class="label label-default">New</span></h1>
<h1>Example heading <span class="label label-success">New</span></h1>

23.2 模板效果

24：徽章

24.1 模板代码

<div class="container">
    <a href="#">Inbox <span class="badge">42</span></a>

    <button class="btn btn-primary" type="button">
        Messages <span class="badge">4</span>
    </button>
    <ul class="nav nav-pills" role="tablist">
        <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
      </ul>
</div>

24.2 模板效果

25：巨幕

25.1 模板代码

<div class="container">
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>- dolor sit amet consectetur adipisicing elit. Dicta, sapiente amet tempora veritatis voluptas
            quis temporibus repudiandae ex nam similique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</div>

25.2 模板效果

26：页头

26.1 模板代码

<div class="page-header">
    <h1>Example page header <small>Subtext for header</small></h1>
</div>

26.2 模板效果

27：警告框

27.1 模板代码

<div class="container">
    <div class="alert alert-success" role="alert">- dolor sit amet.</div>
    <div class="alert alert-info" role="alert">- dolor sit amet.</div>
    <div class="alert alert-warning" role="alert">- dolor sit amet.</div>
    <div class="alert alert-danger" role="alert">- dolor sit amet.</div>
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
    <div class="alert alert-info" role="alert">
        <a href="http://www.baidu.com" class="alert-link">http://www.baidu.com</a>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

27.2 模板效果

28：进度条

28.1 模板代码

<div class="container">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
            style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
            style="width: 60%;">
            60%
        </div>
    </div>
</div>

28.2 模板效果

29：媒体对象

29.1 模板代码

<div class="container">
    <ul class="media-list">
        <li class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="images/02_64x64.jpg" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, itaque!
          </div>
        </li>
        <li class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="images/02_64x64.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Media heading</h4>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, itaque!
            </div>
          </li>
          <li class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="images/02_64x64.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Media heading</h4>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, itaque!
            </div>
          </li>
          <li class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="images/02_64x64.jpg" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Media heading</h4>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, itaque!
            </div>
          </li>
      </ul>
</div>
<div class="container">
    <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="images/02_64x64.jpg" alt="...">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          ...
        </div>
      </div>
</div>

29.2 模板效果

30：列表组

30.1 模板代码

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <ul class="list-group">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div>
        <div class="col-md-4">
            <ul class="list-group">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div>
        <div class="col-md-4">
            <ul class="list-group">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div>
    </div>
</div>

30.2 模板效果

31：面板

31.1 模板代码

<div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
          - dolor sit amet consectetur adipisicing elit. Itaque, voluptatum.
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Panel heading without title</div>
        <div class="panel-body">
          - dolor sit amet consectetur adipisicing elit. Natus, eligendi.
        </div>
      </div>
      
      <div class="panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            - dolor sit amet, consectetur adipisicing elit. Iusto facere, eveniet nulla voluptatem qui debitis libero officia error dolor labore quod illum, perferendis quibusdam voluptatum accusamus beatae cumque. Deserunt, laborum! Eum, inventore laudantium soluta voluptatibus, voluptas mollitia facere sint harum ad iste, ex eius ea atque porro iusto rem nostrum.
        </div>
      </div>
      
</div>
<div class="container">
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">Panel heading</div>
        <div class="panel-body">
          <p>- dolor sit amet consectetur, adipisicing elit. Ullam quas et quaerat dolorem doloremque maxime sequi sunt optio nam quisquam!</p>
        </div>
      
        <!-- Table -->
        <table class="table table-bordered table-striped table-hover ">
            <tr class="success">
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
        </table>
      </div>
</div>

31.2 模板效果

32：轮播图

32.1 模板代码

<div class="container" style="width: 50%;">
    <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>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="images/轮播图.jpg" style="width: 100%; height: 100%;">
                <div class="carousel-caption">
                    <h3>第三张轮播图</h3>
                    <p>这里是对轮播图的介绍</p>
                </div>
            </div>
            <div class="item">
                <img src="images/轮播图.jpg" style="width: 100%; height: 100%;">
                <div class="carousel-caption">
                    <h3>第三张轮播图</h3>
                    <p>这里是对轮播图的介绍</p>
                </div>
            </div>
            <div class="item">
                <img src="images/轮播图.jpg" style="width: 100%; height: 100%;">
                <div class="carousel-caption">
                    <h3>第三张轮播图</h3>
                    <p>这里是对轮播图的介绍</p>
                </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>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

32.2 模板效果

2021年2月16日BootStrap 前端阅读需 15 分钟

前端知识学习41——CSS3新特性

1：属性选择器

权重不一样的时候，听权重大的。
权重一样的时候，谁在后面听谁的。
类选择器，属性选择器和伪类选择器权重都是10。

2：结构伪类选择器

在使用结构伪类选择器的时候一定要注意前面有空格。

示例代码

3：nth-child与nth-of-type的区别

nth-of-type会将熊大给选出来，这就是二者的主要区别，因为nth-of-type会先选类型，然后进行定位。

总结

nth-of-type先选类型
nth-child 先选序号

4：伪元素

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

::before   # 在元素内部的前面插入内容
::after    # 在元素内部的后面插入内容

为什么叫伪元素？

答：因为这个元素在文档树中是找不到的，所以我们称之为伪元素。

注意事项

before和after创建的是行内元素，不能给宽高。
before和after必须有content属性

准确理解什么是内容的前面和后面

代码

效果图

伪元素选择器使用场景1：伪元素字体图标

实现目标

伪元素选择器使用阿里字体图标库使用步骤

1：下载字体图标相关代码
2：使用link进行引入
3：在伪元素选择器里修改两个位置，一个是content改成图标的代号，另一个是加上font-family

伪元素也是父元素的子元素

伪元素选择器使用场景2：仿土豆效果

实现目标

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: aqua;
            margin: 30px auto;

        }
        .tudou img {
            width: 100%;
            height: 100%;
        }
        .tudou::before {
            content: '';
            visibility: hidden;
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3) url(images/arr.png) center no-repeat
        }
        .tudou:hover::before {
            visibility: visible;    
        }
    </style>
</head>
<body>
    <div class="tudou">
        <!-- <div class="mask"></div> -->
        <img src="images/tudou.jpg" alt="">
    </div>
</body>
</html>

伪元素使用场景3：伪元素清除浮动

四种清除浮动的方法

5：CSS3盒子模型：border-box

box-sizing:border-box;

上面这行代码会使得padding和border不会撑开盒子。

6：图片模糊处理

filter:blur(5px);  # 数值越大，图片越模糊

7：calc函数

这里的100%指的是父盒子的宽度。

8：过渡属性

transition:height 1s,width 1s;
transition:all 1s;

上面的两种写法都会使得宽和高同时发生变化。

过渡练习（进度条）

代码

实现效果图

2020年10月16日前端阅读需 3 分钟

前端知识学习32——精灵图

1：为什么需要精灵图技术？

当网页中的图像，过多的时候，服务器就会频繁的接收和发送请求图片，造成服务器请求压力过大，大大降低页面的加载速度。为了有效的减少服务器发送请求和接收的次数，提高页面的加载速度，出现了CSS精灵技术。

2：精灵图的核心原理

将网页中的一些小的背景图片，整合到一张大图中，这样服务器只需要一次请求就可以了。

3: 精灵技术的目的

有效的减少服务器接收和发送请求的次数，提高页面的加载速度。

4：使用精灵图的注意事项

5：精灵图核心总结

6：精灵图的使用

使用FireWorks软件测出需要的小图片的大小和X,Y值然后使用background :url添加。
使用background: position填上坐标即可。

FireWorks使用步骤

打开图片
锁定图层

使用切片工具，圈出你想要的精灵图

查看宽高与X,Y

王者荣耀精灵图示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 58px;
            height: 58px;
            /* background-color: aqua; */
            margin: 100px auto;
            background: url(images/sprites.png);
            /* X轴 与 Y轴 */
            background-position: -184px 0;
        }
        .box2 {
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background: url(images/sprites.png);
            /* X轴 与 Y轴 */
            background-position: -156px -106px;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2"></div>
</body>
</html>

效果展示

使用精灵图拼出自己的名字

精灵图展示

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .name {
            width: 660px;
            margin: 100px auto;
        }
        span {
            display: inline-block;
            width: 106px;
            height: 111px;
            background: url(images/abcd.jpg);
        }
        .j {
            /* margin-left: 50%; */
            background-position: -389px -139px;
        }
        .u {
            background-position: -475px -419px;
        }
        .s {
            background-position: -254px -413px;
        }
        .t {
            background-position: -368px -408px;
        }
        .i {
            width: 63px;
            height: 108px;
            background-position: -325px -140px;
        }
        .n {
            background-position: -252px -271px;
        }

    </style>
</head>
<body>
    <div class="name">
        <span class="j"></span>
        <span class="u"></span>
        <span class="s"></span>
        <span class="t"></span>
        <span class="i"></span>
        <span class="n"></span>
    </div>
</body>
</html>

效果展示

2020年10月5日前端阅读需 2 分钟

前端知识学习33——字体图标

1：字体图标的产生

2：字体图标的优点

轻量级
灵活性
兼容性

3：字体图标的使用步骤

1：字体图标的下载
2：字体图标的引入
3：字体图标的追加

4：字体图标的下载

推荐第二个

5：字体图标的引入

以阿里iconfont库为例

首先选中图标，所有图标库

选中你想要的图标，然后下载代码

将压缩包解压，然后改个名字（这个无所谓的），放到和我们html文档的同一级目录，在html页面中引入。

从iconfont.css文件中将类名进行导入，即可实现可视化。

参考视频

2020年10月5日前端阅读需 1 分钟

前端知识学习34——CSS三角

1：设置盒子的宽高为0

2：设置border的上下左右颜色为透明

3：想要箭头向右的三角形

boder-left: 10px sloid red

代码

实际效果图

京东CSS三角实现

2020年10月5日前端阅读需 1 分钟

前端知识学习35——用户界面样式

1：鼠标样式

设置在对象上移动的鼠标指针采用何种系统预定义的样式。

2：表单轮廓

取消表单轮廓

input {
    /* 取消表单轮廓 */
    outline: none;
}

3：防止拖拽文本域

textarea {
    resize: none;
}

2020年10月5日前端阅读需 1 分钟

前端知识学习36——Vertical-align属性应用

1：应用场景

认识底线，基线，中线，和顶线。（图片和文字默认的是基线对齐）

2：主要使用场景

让文字和图片对齐

代码

vertical-align: middle;

3：图片底侧有空白区域的解决方案

问题描述：给img标签加上父盒子，并且给这个父盒子边框，我们发现图片底侧是有一部分空白的区域。

解决方案1：给img标签加上vertical-align: bottom
解决方案2：给img标签加上vertical-align: middle
解决方案3：将img标签转换为块级元素 display: block

2020年10月5日前端阅读需 1 分钟

前端知识学习37——溢出的文字省略号显示

1：需求描述

2：单行文本溢出显示省略号

必须满足三个条件

1：强制在一行内显示文本: white-space :nowrap;
2：超出的部分隐藏: overflow: hidden
3：文字用省略号替代超出的部分：text-overflow:ellipsis;

3：多行文本溢出显示省略号

2020年10月5日前端阅读需 1 分钟

前端知识学习38——常见的布局技巧

1：margin负值的巧妙运用

1.1 为了防止两个盒子都加上边框，此时颜色变粗的情况

可以给每一个盒子加上margin-left:-1px;

1.2 让每一个鼠标经过的盒子的边框都显示出边框的颜色

盒子没有定位的情况下：加上相对定位，因为相对定位提高了一个层级，会压住其他盒子。
盒子有定位的情况下：使用层叠顺序z-index: 1

2：文字环绕浮动巧妙运用

浮动的元素不会压住下面的文字

需求图：

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 70px;
            background-color: #fff;
            margin: 0 auto;
            padding: 5px;
        }
        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }
        .pic img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="images/img.png" alt="">
        </div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
</body>
</html>

3：行内块巧妙运用

需求图：

注意事项：
行内块元素之间本身就有一定的距离。
1：首先将a标签转换为行内块元素
2：设置水平居中和垂直居中
3：对“上一页”和“下一页”单独设置宽度

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-decoration: none;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 36px;
            color: #333;
            font-size: 14px;

        }
        .box .prev,
        .box .next {
            width: 63px;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="next">&gt;&gt;下一页</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#" class="prev">&lt;&lt;上一页</a>
    </div>
</body>
</html>

实现效果

2020年10月5日前端阅读需 2 分钟

网址​

1：引入BootStrap的结构​

2：基本模板​

3：流体容器（.container-fluid）​

4：固定容器（.container）​

5：栅格系统​

5.1 效果​

5.2 列的阈值划分（lg,md,sm,xs的含义）​

5.3 被两个列控制​

5.4 列偏移​

6：标题标签​

7：常用标签​

7.1 对齐​

7.2 改变大小写​

7.3 常用标签查询网址​

8：表格（table)​

8.1 把表格变成响应式表格​

9：按钮​

9.1 按钮模板​

9.2 模板效果​

10：图片​

10.1 示例代码​

10.2 效果展示​

11：辅助类​

11.1 关闭符号​

11.2 三角符号​

11.3 快速浮动​

11.4 让内容块居中​

11.5 清除浮动​

12：响应式工具​

12.1 隐藏或显示内容​

13：缩略图​

13.1 仿BootStrap官网缩略图源码​

13.2 实现效果​

14：仿BootStrap项目推荐页​

14.1 源代码​

14.2 实现效果​

15：表单​

15.1 基本模板​

15.2 基本模板呈现的效果​

16：字体图标​

16.1 示例代码​

16.2 示例效果​

17：下拉菜单​

17.1 模板代码​

17.2 模板效果​

18：按钮组​

18.1 示例代码​

18.2 呈现效果​

19：输入框组​

19.1 示例代码​

19.2 实现效果​

20：导航​

20.1 基本案例​

20.2 案例实现效果​

21：导航条​

21.1 示例代码​

21.2 实现效果​

22：分页与翻页​

22.1 模板代码​

22.2 实现效果​

23：标签​

23.1 模板代码​

23.2 模板效果​

24：徽章​

24.1 模板代码​

24.2 模板效果​

25：巨幕​

25.1 模板代码​

25.2 模板效果​

26：页头​

26.1 模板代码​

26.2 模板效果​

27：警告框​

27.1 模板代码​

27.2 模板效果​

28：进度条​

28.1 模板代码​

28.2 模板效果​

29：媒体对象​

网址

1：引入BootStrap的结构

2：基本模板

3：流体容器（.container-fluid）

4：固定容器（.container）

5：栅格系统

5.1 效果

5.2 列的阈值划分（lg,md,sm,xs的含义）

5.3 被两个列控制

5.4 列偏移

6：标题标签

7：常用标签

7.1 对齐

7.2 改变大小写

7.3 常用标签查询网址

8：表格（table)

8.1 把表格变成响应式表格

9：按钮

9.1 按钮模板

9.2 模板效果

10：图片

10.1 示例代码

10.2 效果展示

11：辅助类

11.1 关闭符号

11.2 三角符号

11.3 快速浮动

11.4 让内容块居中

11.5 清除浮动

12：响应式工具

12.1 隐藏或显示内容

13：缩略图

13.1 仿BootStrap官网缩略图源码

13.2 实现效果

14：仿BootStrap项目推荐页

14.1 源代码

14.2 实现效果

15：表单

15.1 基本模板

15.2 基本模板呈现的效果

16：字体图标

16.1 示例代码

16.2 示例效果

17：下拉菜单

17.1 模板代码

17.2 模板效果

18：按钮组

18.1 示例代码

18.2 呈现效果

19：输入框组

19.1 示例代码

19.2 实现效果

20：导航

20.1 基本案例

20.2 案例实现效果

21：导航条

21.1 示例代码

21.2 实现效果

22：分页与翻页

22.1 模板代码

22.2 实现效果

23：标签

23.1 模板代码

23.2 模板效果

24：徽章

24.1 模板代码

24.2 模板效果

25：巨幕

25.1 模板代码

25.2 模板效果

26：页头

26.1 模板代码

26.2 模板效果

27：警告框

27.1 模板代码

27.2 模板效果

28：进度条

28.1 模板代码

28.2 模板效果

29：媒体对象