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. HDU6583:Typewriter（dp+后缀自动机）

    传送门 题意: 给出\(p,q\),现在要你生成一个字符串\(s\). 你可以进行两种操作:一种是花费\(p\)的代价随意在后面添加一个字符,另一种是花费\(q\)的代价可以随意赋值前面的一个子串. ...

  2. JS高阶---简介+数据类型

    首先看下大概流程 [一]基础 接下来看下数据类型分类和判断 (1)数据类型分类 基本类型/值类型5种 ---字符串String.数字Number.布尔值Boolean.未定义undefined.空nu ...

  3. LCD裸板编程_框架

    lcd程序框架: 为了让程序更好的扩展,介绍面向对象编程: 比如抽象出lcd_3.5和lcd_4.3的共同点: 当我想使用3.5寸的lcd时,只需让lo指向lcd_3.5_opr即可.同样,当我想使用 ...

  4. 前端(3)JavaScript

    前端(3)JavaScript JavaScript概述 1ECMAScript和JavaScript的关系: 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaS ...

  5. python 解决粘包问题的例子（ftp文件的上传与下载）简单版本

    服务端 ! /user/bin/env python3 -- coding:utf_8 -- """ Author:Markli # 2019/9/9,16:41 &qu ...

  6. 3DMax下载与安装(注册机为网上收集，仅供学习与研究,支持正版)

    3DS Max 全称3D Studio Max,是Autodesk公司开发的三维动画制作和渲染软件(Autodesk AutoCAD 2012也是Autodesk公司的软件产品) 3DS Max广泛应 ...

  7. unity texture贴图纹理

    文章内一些内容引用自作者:Aimar_Johnny http://blog.csdn.net/lzhq1982/article/details/75045358 导入png图片,默认显示如下 Text ...

  8. Kdevelop的安装-2种方法

    使用 Ubuntu 的自带的源: sudo apt-get update sudo apt-get install kdevelop 这就可以了.update这部,假如不换源,更新非常慢.换源方法很简 ...

  9. 移动端适配（rem & viewport）--移动端开发整理笔记（四）

    移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是 ...

  10. sharding-jdbc 分布式数据库中间件

    小编今天在做Sharding-jdbc时出现了一些问题,就上网百一百,发现网上的sharding-jdbc的参考是挺少的,唉还是要继续学习看文档. Sharding-jdbc介绍 Sharding-J ...