jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验

时间：2023-03-09 20:23:31
jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验

jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验

一丶bootstrap的使用

下载资源文件:

bootstrap官网

导入

// 1.导入样式

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

// 2.导入bootstrap的js,依赖jquery,先导入jquer

	<script src="bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>

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

// 3.导入网络资源

	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery的导入-->

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

​

二丶栅格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>栅格系统</title>

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

    <style>

        .col-md-1, .col-md-3, .col-md-5, .col-md-7, .col-md-9, .col-md-11 {

            height: 50px;

            line-height: 50px;

            border: 1px solid mediumaquamarine;

        }

        .col-md-2, .col-md-4, .col-md-6, .col-md-8, .col-md-10, .col-md-12 {

            height: 50px;

            line-height: 50px;

            border: 1px solid red;

        }

        .col-xs-6 {

            height: 50px;

            line-height: 50px;

            border: 1px solid chartreuse;

        }

    </style>

</head>

<body>

<!--

    栅格参数:

        一共占12个格子,

        居中显示

-->

<div class="container">

    <div class="row">

        <div class="col-md-1 text-center">1</div>

        <div class="col-md-1 text-center">2</div>

        <div class="col-md-1 text-center">3</div>

        <div class="col-md-1 text-center">4</div>

        <div class="col-md-1 text-center">5</div>

        <div class="col-md-1 text-center">6</div>

        <div class="col-md-1 text-center">7</div>

        <div class="col-md-1 text-center">8</div>

        <div class="col-md-1 text-center">9</div>

        <div class="col-md-1 text-center">10</div>

        <div class="col-md-1 text-center">11</div>

        <div class="col-md-1 text-center">12</div>

    </div>

    <div class="row">

        <div class="col-md-2 text-center">1</div>

        <div class="col-md-2 text-center">2</div>

        <div class="col-md-2 text-center">3</div>

        <div class="col-md-2 text-center">4</div>

        <div class="col-md-2 text-center">5</div>

        <div class="col-md-2 text-center">6</div>

    </div>

    <div class="row">

        <div class="col-md-3 text-center">1</div>

        <div class="col-md-3 text-center">2</div>

        <div class="col-md-3 text-center">3</div>

        <div class="col-md-3 text-center">4</div>

    </div>

    <!--从堆叠到水平排列-->

    <div class="row">

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

        <div class="col-md-1">.col-md-1</div>

    </div>

    <div class="row">

        <div class="col-md-8">.col-md-8</div>

        <div class="col-md-4">.col-md-4</div>

    </div>

    <div class="row">

        <div class="col-md-4">.col-md-4</div>

        <div class="col-md-4">.col-md-4</div>

        <div class="col-md-4">.col-md-4</div>

    </div>

    <div class="row">

        <div class="col-md-6">.col-md-6</div>

        <div class="col-md-6">.col-md-6</div>

    </div>

    <!--    流式布局容器 -->

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-6">流式布局容器</div>

            <div class="col-md-6">流式布局容器</div>

        </div>

    </div>

</div>

<!--移动设备和桌面屏幕: 响应式-->

<div class="row">

    <div class="col-xs-12 col-md-8">响应式</div>

    <div class="col-xs-6 col-md-4">响应式</div>

</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->

<div class="row">

    <div class="col-xs-6 col-md-4">响应式</div>

    <div class="col-xs-6 col-md-4">响应式</div>

    <div class="col-xs-6 col-md-4">响应式</div>

</div>

<!-- Columns are always 50% wide, on mobile and desktop -->

<div class="row">

    <div class="col-xs-6">响应式</div>

    <div class="col-xs-6">响应式</div>

</div>

<!--手机、平板、桌面-->

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>

    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

<div class="row">

    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

    <!-- Optional: clear the XS cols if their content doesn't match in height -->

    <div class="clearfix visible-xs-block"></div>

    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

</div>

<!--  多余的 列 -->

<div class="row">

    <div class="col-xs-9">.col-xs-9</div>

    <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as

        one contiguous unit.

    </div>

    <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>

</div>

<!-- 列偏移 -->

<div class="row">

    <div class="col-md-12">列偏移</div>

    <div class="col-md-4">.col-md-4</div>

    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

</div>

<div class="row">

    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

</div>

<div class="row">

    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>

</div>

</body>

<script src="bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>

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

</html>

三丶轮播图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-12">

            <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="http://www.xiaohuar.com/images/banner/2.jpg" alt="...">

                        <div class="carousel-caption">

                            笑话网

                        </div>

                    </div>

                    <div class="item">

                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566317544663&di=556c109264dff8e21a6a6a7154cfa16b&imgtype=0&src=http%3A%2F%2Fpic65.nipic.com%2Ffile%2F20150429%2F20318013_105209450000_2.jpg"

                             alt="时光旅行">

                        <div class="carousel-caption">

                            时光旅行

                        </div>

                    </div>

                    <div class="item">

                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566317544670&di=1e2e67d8453e9ec67893e8f13ee5f710&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F54%2F93%2F16pic_5493004_b.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>

    </div>

</div>

</body>

<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>

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

</html>

四丶矢量字体图标

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">

    <link rel="stylesheet" href="font_dxgohix8u0r/iconfont.css">

    <style>

        .glyphicon,.iconfont , .fa{

            font-size: 50px;

            color: pink;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-12">

            <!--    bootStrap 矢量字体图        -->

            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

            <!--    阿里矢量库 矢量字体图        -->

            <span class="iconfont icon-fangshai"></span>

            <!--    awesome 矢量字体图        -->

            <span class="fa fa-id-card"></span>

        </div>

    </div>

</div>

</body>

<script src="bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>

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

</html>

五丶进度条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-12">

            <!--默认样式的进度条-->

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

        <div class="col-md-12">

            <!--            带有提示标签的进度条-->

            <!--将设置了 .sr-only 类的 <span> 标签从进度条组件中移除 类，从而让当前进度显示出来。-->

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

        <div class="col-md-12">

            <!--            在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性。-->

            <div class="progress">

                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"

                     style="min-width: 2em;">

                    0%

                </div>

            </div>

            <div class="progress">

                <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"

                     style="min-width: 2em; width: 2%;">

                    2%

                </div>

            </div>

        </div>

        <div class="col-md-12">

            <div class="progress">

                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"

                     style="min-width: 2em;">

                    0%

                </div>

            </div>

            <div class="progress">

                <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"

                     style="min-width: 2em; width: 2%;">

                    2%

                </div>

            </div>

            <!--            根据情境变化效果-->

            <!--            进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。-->

            <div class="progress">

                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0"

                     aria-valuemax="100" style="width: 40%">

                    <span class="sr-only">40% Complete (success)</span>

                </div>

            </div>

            <div class="progress">

                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"

                     aria-valuemax="100" style="width: 20%">

                    <span class="sr-only">20% Complete</span>

                </div>

            </div>

            <div class="progress">

                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0"

                     aria-valuemax="100" style="width: 60%">

                    <span class="sr-only">60% Complete (warning)</span>

                </div>

            </div>

            <div class="progress">

                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0"

                     aria-valuemax="100" style="width: 80%">

                    <span class="sr-only">80% Complete (danger)</span>

                </div>

            </div>

        </div>

        <div class="col-md-12">

            <!--            条纹效果:-->

            <div class="progress">

                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"

                     aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

                    <span class="sr-only">40% Complete (success)</span>

                </div>

            </div>

            <div class="progress">

                <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20"

                     aria-valuemin="0" aria-valuemax="100" style="width: 20%">

                    <span class="sr-only">20% Complete</span>

                </div>

            </div>

            <div class="progress">

                <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"

                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">

                    <span class="sr-only">60% Complete (warning)</span>

                </div>

            </div>

            <div class="progress">

                <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80"

                     aria-valuemin="0" aria-valuemax="100" style="width: 80%">

                    <span class="sr-only">80% Complete (danger)</span>

                </div>

            </div>

        </div>

        <div class="col-md-12">

            <!-- 动画效果 :.progress-bar-striped 添加 .active 类-->

            <div class="progress">

                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"

                     aria-valuemin="0" aria-valuemax="100" style="width: 45%">

                    <span class="sr-only">45% Complete</span>

                </div>

            </div>

        </div>

        <div class="col-md-12">

            <!--堆叠效果: .progress 中-->

            <div class="progress">

                <div class="progress-bar progress-bar-success" style="width: 35%">

                    <span class="sr-only">35% Complete (success)</span>

                </div>

                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">

                    <span class="sr-only">20% Complete (warning)</span>

                </div>

                <div class="progress-bar progress-bar-danger" style="width: 10%">

                    <span class="sr-only">10% Complete (danger)</span>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>

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

</html>

六丶选项卡

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <style>

        .col-md-12 {

            margin-top: 100px;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-12">

            <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"

                    data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">

                Popover on 左侧

            </button>

            <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"

                    data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">

                Popover on 顶部

            </button>

            <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"

                    data-placement="bottom" data-content="Vivamus

sagittis lacus vel augue laoreet rutrum faucibus.">

                Popover on 底部

            </button>

            <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"

                    data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">

                Popover on 右侧

            </button>

        </div>

        <div class="col-md-12">

            <div style="padding:100px">

                <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="hover"

                   title="Dismissible popover"

                   data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>

                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left"

                        title="Tooltip on left" data-trigger="click">Tooltip on left

                </button>

                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top"

                        title="Tooltip on top">Tooltip on top

                </button>

                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"

                        title="Tooltip on bottom">Tooltip on bottom

                </button>

                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"

                        title="Tooltip on right">Tooltip on right

                </button>

            </div>

        </div>

    </div>

</div>

</body>

<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>

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

<script>

    $(function () {

        $('[data-toggle="popover"]').popover()

        $('[data-toggle="tooltip"]').popover()

    })

</script>

</html>

七丶标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-12">

            <div>

                <!-- Nav tabs -->

                <ul class="nav nav-tabs" role="tablist">

                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"

                                                              data-toggle="tab">Home</a></li>

                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>

                    </li>

                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>

                    </li>

                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>

                    </li>

                </ul>

                <!-- Tab panes -->

                <div class="tab-content">

                    <div role="tabpanel" class="tab-pane active" id="home">111</div>

                    <div role="tabpanel" class="tab-pane " id="profile">222</div>

                    <div role="tabpanel" class="tab-pane" id="messages">333</div>

                    <div role="tabpanel" class="tab-pane" id="settings">444</div>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>

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

<script>

    $('#myTabs a').click(function (e) {

        e.preventDefault()

        $(this).tab('show')

    })

</script>

</html>

八丶表单校验

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-12">

            <form>

                <div class="form-group  has-feedback">

                    <label for="exampleInputEmail1">Email address</label>

                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

                    <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>

                </div>

                <div class="form-group  has-feedback">

                    <label for="exampleInputPassword1">Password</label>

                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

                    <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>

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

</div>

</body>

<script src="../bootstrap-3.3.7-dist/js/jquery3.4.1.js"></script>

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

<script>

    $(function () {

        var flag = false

        $('#exampleInputEmail1').blur(function () {

            var val = $(this).val()

            var res = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(val)

            if (res) {

                //校验成功

                $(this).parent().removeClass('has-error')

                $(this).next().removeClass('glyphicon-remove')

                $(this).parent().addClass('has-success')

                $(this).next().addClass('glyphicon-ok')

                flag = true

            } else {

                //校验失败

                $(this).parent().removeClass('has-success')

                $(this).next().removeClass('glyphicon-ok')

                $(this).parent().addClass('has-error')

                $(this).next().addClass('glyphicon-remove')

            }

        }).focus(function () {

            $(this).triggerHandler('blur')

        }).keyup(function () {

            $(this).triggerHandler('blur')

        });

        $(':submit').click(function () {

            if (flag) {

                alert('登录成功')

                return true

            } else {

                alert('登录失败')

            }

            return false

        })

    })

</script>

</html>