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>

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

  1. jQuery编写的一款兼容IE6的图片轮播幻灯片

    jQuery编写的一款兼容IE6的图片轮播幻灯片,很不错的一款jquery特效.大家可以下载下来研究研究. 每隔几秒就自动切换一波图片,此效果兼容性还做的不错,适合居多的浏览器. 适用浏览器:IE6. ...

  2. Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式

    Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...

  3. 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

    通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...

  4. 使用Bootstrap 3开发响应式网站实践02,轮播

    本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...

  5. 基于jQuery的轮播焦点图图

    轮播焦点图 ——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样. 本例来源:站长之家http://sc.chinaz.com/jiaobe ...

  6. jQuery入门——实现列表的显示隐藏与实现轮播图

    列表的显示与隐藏 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  7. 用jquery或js实现三个div自动循环轮播

    //3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){     index = (inde ...

  8. 使用 new XMLHttpRequest() 制作下载文件进度条

    mui 进度控件使用方法: 检查当前容器(container控件)自身是否包含.mui-progressbar类: 当前容器包含.mui-progressbar类,则以当前容器为目标控件,直接显示进度 ...

  9. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

随机推荐

  1. Android架构师吐槽腾讯王者荣耀的程序员，排位匹配算法怎么搞的，每次都输

    腾讯王者荣耀的开发来来来出来聊聊,真是日了狗了,多次离上王者还差两三颗星的时候队友就开始水的一塌糊涂,对面就牛逼的不行. 又连跪回去了,被对面把屎都打出来了,实在忍不住来吐槽,你们这个排位匹配算法到底 ...

  2. Wpf DataGrid动态添加列，行数据（二）

    这是第二中方法,可直接绑定,我这里只是做出了一种思路,并不是最完美. 这里注意一下,因为我里面引用了MVVMLight,所以可能代码不是复制过去就能用了的. 样式也是,所以复制过去看不是我贴出来的界面 ...

  3. win10锁屏壁纸文件夹位置

    Win10默认系统下载的壁纸怎么下载?在哪里找出来呢?首先我们要把系统的锁屏壁纸要设置为Windows聚焦才会自动从微软的服务器上去下载壁纸.这些都是随机下载的.每个人的都Win10 都有可能不一样. ...

  4. 08-人脸识别-FaceNet-classify.py代码阅读（说明见注释）

    """An example of how to use your own dataset to train a classifier that recognizes pe ...

  5. html--前端javascript初识

    一.JavaScript简介 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,有了JavaScript,可使网页变得生动.使用它的目的是与HTML超文本标识语言.Java 脚本语 ...

  6. LeetCode 691. Stickers to Spell Word

    原题链接在这里:https://leetcode.com/problems/stickers-to-spell-word/ 题目: We are given N different types of ...

  7. ESP8266 LUA脚本语言开发: 准备工作-官网获取LUA固件

    前言 这节咱去官网上获取lua开发的固件. 官网下载 下面是我以前写的,咱不使用官网下载的固件,咱使用自己编译的固件.. 填写好自己的的邮箱地址,然后选择好自己需要的功能,一会编译好的固件就会发到您的 ...

  8. Dijkstra单源点最短路径算法

    学习参考: Dijkstra算法(单源最短路径) 最短路径—Dijkstra算法和Floyd算法 使用的图结构: 邻接矩阵: -1 20 -1 25 80-1 -1 40 -1 -1-1 -1 -1 ...

  9. 4.28（TG模拟赛）总结

    1.挖地雷 题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N≤20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任 ...

  10. HTML基础知识---文本编辑练习

    飘柔兰花去油洗发水液露去屑止痒控油                                         阿道夫净屑舒爽清洁头皮去屑洗发水520ml                      ...