柏竹
柏竹
2020-02-18
目录

Bootstrap

# Bootstrap

Bootstrap用于快速开发Web应用程序和网站的框架. 支持多平台设备. 它基于 HTML、CSS、JavaScript 应用

# 引入

  1. 文件 引入bootstrap的支持, js、css、font文件
  2. JS 先引入JQ库，再引入bootstrap的js文件
  3. CSS 先引入bootstrap的css，在引入自己的css
  4. FONT 文件无需引入，但必须存在目录

点击在线教学文档 (opens new window)

# 按钮

主要 作用在 <a>/<button>/<input> 标签中

默认样式

<a class="btn btn-default" href="#" role="button">a</a>
<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">
类 说明
btn 按钮基本样式
btn-default 标准按钮
btn-primary 原始按钮
提示按钮 提示按钮说明
btn-success 成功提示按钮
btn-info 弹 信息按钮
btn-warning 谨慎 操作按钮
btn-danger 危险 操作按钮
btn-link 链接按钮
按钮大小 按钮大小说明
btn-lg 大按钮
btn-sm 小按钮
btn-xs 超小按钮
状态按钮 状态按钮说明
btn-block 块级按钮
active 按钮 被点击
disabled 禁用按钮
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
</head>
<body>
    <h1>按钮样式展示</h1>
    <h2>样式展示</h2>
    <button class="btn ">按钮</button>
    <button class="btn btn-default">标准按钮</button>
    <button class="btn btn-primary">原始按钮</button>
    <button class="btn btn-success">成功操作按钮</button>
    <button class="btn btn-info">弹出消息按钮</button>
    <button class="btn btn-warming">谨慎操作按钮</button>
    <button class="btn btn-danger">危险操作按钮</button>
    <button class="btn btn-link">链接按钮</button>
    <br>
    <h2>大小展示</h2>
    <button class="btn btn-lg">大按钮</button>
    <button class="btn btn-sm">小按钮</button>
    <button class="btn btn-xs">超小按钮</button>
    <button class="btn btn-block">块级按钮</button>
    <br>
    <h2>状态展示</h2>
    <p>
        <button class="btn btn-default">标准按钮</button>
        <button class="btn btn-default active">选中标准按钮</button>
        <button class="btn btn-default disabled">禁用标准按钮</button>
    </p>
    <p>
        <button class="btn btn-primary">原始按钮</button>
        <button class="btn btn-primary active">选中原始按钮</button>
        <button class="btn btn-primary disabled">禁用原始按钮</button>
    </p>
    <br>
    <h2>标签展示</h2>
    <p>
        <a class="btn btn-default" href="#">链接</a>
        <button class="btn btn-default" type="submit">按钮</button>
        <input class="btn btn-default" type="button" value="输入">
        <input class="btn btn-default" type="submit" value="提交">
    </p>
</body>
</html>

# 表格

table标签 说明
table 基本样式
table-striped 隔行添加斑马线
table-bordered 添加边框
table-hover 鼠标悬停状态
table-condensed 表格更紧凑
<tr>/<th> / <td> 标签 (状态) 说明
active 悬停鼠标
success 成功操作
info 变化操作
warning 警告操作
danger 危险操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
</head>
<body>
    <h1>表格样式展示</h1>
    <h2>table类样式联合使用</h2>
    <div>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <tr>
                <th>作用范围</th>
                <th>样式类</th>
                <th>说明</th>
            </tr>
            <tr>
                <td>table</td>
                <td>table</td>
                <td>添加基础样式</td>
            </tr>
            <tr>
                <td>table</td>
                <td>table-striped</td>
                <td>添加斑马线</td>
            </tr>
            <tr>
                <td>table</td>
                <td>table-bordered</td>
                <td>添加单元格边框</td>
            </tr>
            <tr>
                <td>table</td>
                <td>table-hover</td>
                <td>添加悬停变暗</td>
            </tr>
            <tr>
                <td>table</td>
                <td>table-condensed</td>
                <td>设置紧凑</td>
            </tr>
        </table>
    </div>
    <h2>tr、th、td类 样式联合使用</h2>
    <div>
        <table class="table table-striped table-bordered">
            <tr>
                <th>作用范围</th>
                <th>样式类</th>
                <th>说明</th>
            </tr>
            <tr class="active">
                <td>tr标签</td>
                <td>active</td>
                <td>悬停 样式应用</td>
            </tr>
            <tr class="success">
                <td>tr标签</td>
                <td>success</td>
                <td>成功 样式应用</td>
            </tr>
            <tr class="info">
                <td>tr标签</td>
                <td>info</td>
                <td>变化 样式应用</td>
            </tr>
            <tr class="warning">
                <td>tr标签</td>
                <td>warning</td>
                <td>警告 样式应用</td>
            </tr>
            <tr class="danger">
                <td>tr标签</td>
                <td>danger</td>
                <td>危险 样式应用</td>
            </tr>
        </table>
    </div>
</body>
</html>

# 网格系统

跟表格差不多，但网格系统可设置多设备，兼容性更好！

生成前系统会自动分配12列的个数

设备使用样式说明

手机 平板电脑 台式电脑 大型台式电脑
设备应用范围 <768px ≥768px ≥992px ≥1200px
Class 前缀 col-xs-* col-sm-* col-md-* col-lg-*
网格类 说明
container 表示网格整体
row 网格行
col-{设备}-{列数} 网格列
col-{设备}-{列数}-offset-{偏移数} 偏移列（指定开始位置）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <style>
        div {
            background: rgb(52, 223, 157);
            border: rgb(0, 0, 0) solid 1px;
        }
    </style>
</head>
<body>
    <h1>网格系统</h1>
    <h2>标准网格</h2>
    <p>支持手机 电脑端</p>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-xs-12">嵌套列测试</div>
        </div>
        <div class="row">
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-1 col-xs-1">列</div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-xs-6">六列</div>
            <div class="col-lg-6 col-xs-6">六列</div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-xs-3">三列</div>
            <div class="col-lg-9 col-xs-9">九列</div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-xs-12">偏移列测试</div>
        </div>
        <div class="row">
            <div class="col-lg-1 col-xs-1">列</div>
            <div class="col-lg-offset-4 col-xs-offset-4">偏移量四（偏移后该列后面独占一行，不能添加）</div>
        </div>
    </div>
</body>
</html>

# 图片

img类 说明
img-rounded 圆角
img-circle 圆形
img-thumbnail 缩略图功能
img-responsive 图片响应式 (图片扩展父类100%)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <script>
        $(function(){
            $("img").attr("src","http://sanscan12.gitee.io/blogimg/Cover/article%2002.jpg");
        });
    </script>
    <style>
        img {
            width: 400px;
            height: 300px;
        }
        div{
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1>图片样式展示</h1>
    <div>
        <span>无样式</span><br>
        <img>
    </div>
    <div>
        <span>圆角 (img-rounded 类样式)</span><br>
        <img class="img-rounded">
    </div>
    <div>
        <span>圆形 (img-circle 类样式)</span><br>
        <img class="img-circle">
    </div>
    <div>
        <span>内边距框 (img-thumbnail 类样式)</span><br>
        <img class="img-thumbnail">
    </div>
    <div>
        <span>响应式 (img-responsive 类样式)</span><br>
        <img class="img-responsive">
    </div>
</body>
</html>

# 表单

将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列

表单类 作用标签 说明
属性 role="form" <form> 标准表单
form-inline <form> 内联表单
form-horizontal <form> 水平表单
control-label 标签、控件 网格布局模式
col-{设备}-{列数} 标签、控件 网格设置
form-group 标签、控件 标准：适当行高间距
内联：内行元素
水平：适当行高间距
form-control <input> 、<textarea>、<select> 文本元素（设置输入框）
radio 标签 单选按钮
checkbox 标签 多选按钮
radio-inline 标签 内行单选按钮
checkbox-inline 标签 内行多选按钮
input-{设备} 控件 控件高度
help-block <span> 帮助文档 提示作用
属性 disabled 控件 禁止输入
has-success 标签 成功 提示
has-warning 标签 警告 提示
has-error 标签 错误 提示

应用实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
</head>

<body>
    <h1>表单</h1>
    <h2>基本表单</h2>
    <form action="#" role="form">
        <div class="form-group">
            <label for="name">名称：</label>
            <input type="text" class="form-control" name="name" placeholder="请输入用户名称">
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control" name="password">
        </div>
    </form>


    <h2>内联表单</h2>
    <form action="#" role="form" class="form-inline">
        <div class="form-group">
            <label for="name">名称：</label>
            <input type="text" class="form-control" name="name" placeholder="请输入用户名称">
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control " name="password">
        </div>
    </form>


    <h2>水平表单</h2>
    <form action="#" role="form" class="form-horizontal">
        <div class="form-group">
            <label for="name" class="col-xs-2 col-lg-2 control-label">名称：</label>
            <div class="col-xs-6 col-lg-6">
                <input type="text" class="form-control control-label" name="name" placeholder="请输入用户名称">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-xs-2 col-lg-2 control-label">密码：</label>
            <div class="col-xs-6 col-lg-6">
                <input type="password" class="form-control control-label" name="password" placeholder="密码不少六位">
            </div>
        </div>
        <div class="form-group">
            <label for="protocol" class="col-xs-2 col-lg-2 control-label">协议:</label>
            <div class="col-xs-6 col-lg-6">
                <textarea name="protocol" id="protocol" rows="3" class="form-control control-label"></textarea>
            </div>
        </div>
    </form>


    <h2>控件应用</h2>
    <form action="#" role="form">

        <div class="form-group">
            <label for="name">名称：（输入）</label>
            <input type="text" class="form-control" name="name" placeholder="请输入用户名称">
        </div>

        <div class="form-group">
            <label>性别：（单选）</label>
            <div class="radio">
                <label>
                    <input type="radio" value="男" name="sex">
                    男
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" value="女" name="sex">
                    女
                </label>
            </div>
        </div>

        <div class="form-group">
            <label>爱好：（多选）</label>
            <div class="checkbox-inline">
                <input type="checkbox" value="篮球" name="hobby">篮球
            </div>
            <div class="checkbox-inline">
                <input type="checkbox" value="足球" name="hobby">足球
            </div>
            <div class="checkbox-inline">
                <input type="checkbox" value="网球" name="hobby">网球
            </div>
        </div>


        <div class="form-group">
            <label for="age">年龄：（单选列表）</label>
            <select class="form-control">
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
            </select>
        </div>


        <div class="form-group">
            <label for="age">部门：（多项列表）</label>
            <select multiple class="form-control">

                <option value="1">编辑部</option>
                <option value="2">外联部</option>
                <option value="3">财务部</option>
                <option value="4">传媒部</option>
            </select>
        </div>

        <div class="form-group">
            <label for="protocol">协议：（文本）</label>
            <textarea name="protocol" id="protocol" cols="40" rows="3"></textarea>
        </div>
    </form>

    <h2>状态展示</h2>
    <form action="#" role="form">
        <div class="form-group">
            <label>禁用 输入框</label>
            <input type="text" class="form-control" disabled>
        </div>

        <div class="form-group">
            <label for="age">年龄：</label>
            <select class="form-control" disabled>
                <option value="-1">禁止选择</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
            </select>
        </div>

        <div class="form-group">
            <label>大型台式测试 输入框</label>
            <input type="text" class="form-control input-lg" placeholder="大小字体测试">
        </div>
        <div class="form-group">
            <label>台式测试 输入框</label>
            <input type="text" class="form-control input-md" placeholder="大小字体测试">
        </div>
        <div class="form-group">
            <label>平板测试 输入框</label>
            <input type="text" class="form-control input-sm" placeholder="大小字体测试">
        </div>
        <div class="form-group">
            <label>手机测试 输入框</label>
            <input type="text" class="form-control input-xs" placeholder="大小字体测试">
        </div>


        <div class="form-group has-success">
            <label>完成 输入框</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group has-warning">
            <label>警告 输入框</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group has-error">
            <label>错误 输入框</label>
            <input type="text" class="form-control">
        </div>
        
        <div class="form-group">
            <label>输入框（帮助文档）</label>
            <input type="text" class="form-control">
            <span class="help-block">
                一个较长的帮助文本块，超过一行，
            15. 需要扩展到下一行。本实例中的帮助文本总共有两行
            </span>
        </div>
    </form>
    
</body>
</html>

# 标题

<body>
    <h1>排版</h1>
    <h2>内联标题测试 <span class="small">内联子标题 测试</span></h2>
    <h3>内联标题测试 <span class="small">内联子标题 测试</span></h3>
    <h2>标题摘要</h2>
    <p class="lead">
        测试测试测试测试测试测试测试测试测
        试测试测试测试测试测试测试测试测试
        测试测试测试测试测试测试测试测试测
        试测试测试测试测试测试测试测试测试
    </p>
</body>

# 其他

# 文本

类 说明
text-muted 白灰色
text-primary 深蓝色
text-success 成功色（白绿色
text-info 信息色（浅蓝色
text-warning 警告色（白黄色
text-danger 错误色（桃红色
text-[left | rigth | center] 对齐方式

# 背景

类 说明
bg-primary 深蓝色 背景样式
bg-success 白绿色 背景样式
bg-info 浅蓝色 背景样式
bg-warning 白黄色 背景样式
bg-danger 桃红色 背景样式

# 提示

类 说明
alert-success 成功 提示
alert-info 注意 提示
alert-warning 警告 提示
alert-danger 错误 提示

提示框添加 关闭按钮：

  1. 添加带有 .alert、.alert-dismissable 两个类的 <div>
  2. <div> 内有 属性：class ="close" data-dismiss ="alert" 的<button>
  3. 显示点击控件 <button> 内容：&times;

提示框添加 链接：

提示标签 内添加 <a> 添加类：.alert-link (链接匹配标签颜色)

<div class="alert alert-danger alert-dismissable">
    <button class="close" data-dismiss="alert" >&times;</button>
    错误(添加右侧删除按钮)
</div>

<div class="alert alert-warning">
    <a href="#" class="alert-link">警告！请不要提交（链接点击查看填写详细）</a>
</div>

# 进度条

类 说明
progress 进度条框架
progress-bar 进度显示
属性 style="width: {百分比};" 进度进程
progress-bar-{success \| info \| warning \| danger} 进度样式
progress-striped 条纹进度条
active 动画进度条（配合条纹使用）

进度条 添加：

  1. 添加带有 .progress 的 <div> （框架类）
  2. <div> 内有 属性 .progress-bar （进度显示） style="width: 40%;" （目前进度）
<div class="container progress" style="padding: 0;">
    <div class="progress-bar" style="width: 40%;"></div>
</div>

# 更多

类 说明
pull-left 元素浮动到左边
pull-right 元素浮动到右边
center-block 设置元素 并居中显示
clearfix 清除浮动
show 强制元素显示
hidden 强制元素隐藏
close 显示关闭按钮
caret 显示下拉式功能
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
</head>

<body>
    <h1>辅助类测试</h1>

    <h2>文本</h2>
    <p class="text-muted">text-muted 文本测试</p>
    <p class="text-primary">text-primary 文本测试</p>
    <p class="text-success">text-success 文本测试</p>
    <p class="text-info">text-info 文本测试</p>
    <p class="text-warning">text-warning 文本测试</p>
    <p class="text-danger">text-danger 文本测试</p>

    <h2>背景</h2>
    <p class="bg-primary">bg-primary 背景测试</p>
    <p class="bg-success">bg-success 背景测试</p>
    <p class="bg-info">bg-info 背景测试</p>
    <p class="bg-warning">bg-warning 背景测试</p>
    <p class="bg-danger">bg-danger 背景测试</p>

    <h2>提示</h2>
    <div class="container">
        <div class="alert alert-success">alert-success 成功提示</div>
        <div class="alert alert-info">alert-info 信息提示</div>
        <div class="alert alert-warning">alert-warning 警告提示</div>
        <div class="alert alert-danger">alert-danger 错误提示</div>
    </div>
    <h3>其他提示操作</h3>
    <div class="container">

        <div class="alert alert-danger alert-dismissable">
            <button class="close" data-dismiss="alert" >&times;</button>
            错误(添加右侧删除按钮)
        </div>

        <div class="alert alert-warning">
            <a href="#" class="alert-link">警告！请不要提交（链接点击查看填写详细）</a>
        </div>

    </div>

    <h2>进度条</h2>
    <h3>默认进度条</h3>
    <div class="container progress" style="padding: 0;">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
            <span class="sr-only">40%</span>
        </div>
    </div>
    <div class="container progress" style="padding: 0;">
        <div class="progress-bar"style="width: 40%;"></div>
    </div>
    <h3>不同样式进度条 （progress-bar-*）</h3>
    <div class="container progress" style="padding: 0;">
        <div class="progress-bar progress-bar-success" style="width: 90%;"></div>
    </div>
    <div class="container progress" style="padding: 0;">
        <div class="progress-bar progress-bar-info" style="width: 70%;"></div>
    </div>
    <div class="container progress" style="padding: 0;">
        <div class="progress-bar progress-bar-warning"style="width: 50%;"></div>
    </div>
    <div class="container progress" style="padding: 0;">
        <div class="progress-bar progress-bar-danger" style="width: 30%;"></div>
    </div>
    <h3>条纹进度条 (progress-striped) </h3>
    <div class="container progress progress-striped" style="padding: 0;">
        <div class="progress-bar" style="width: 80%;"></div>
    </div>
    <h3>动画进度条 （progress-striped、active）</h3>
    <div class="container progress progress-striped active" style="padding: 0;">
        <div class="progress-bar"style="width: 60%;"></div>
    </div>
    <h3>堆叠进度条</h3>
    <div class="container progress" style="padding: 0;">
        <div class="progress-bar progress-bar-danger"  style="width: 30%;"></div>
        <div class="progress-bar progress-bar-warning" style="width: 30%;"></div>
        <div class="progress-bar progress-bar-success" style="width: 30%;"></div>
    </div>


    <h2>其他</h2>
    <h3>浮动 测试</h3>
    <div class="container bg-warning">
        <button class="pull-left">左浮动</span>
            <button class="pull-right">右浮动</button>
    </div>
    <h3>消除浮动 测试</h3>
    <div class="container bg-warning clearfix">
        <button class="pull-left">左浮动</span>
            <button class="pull-right">右浮动</button>
    </div>
    <h3>盒子居中 测试</h3>
    <div class="container bg-success center-block" style="width:80%; height: 100px;"></div>
    <h3>显示与隐藏 测试</h3>
    <div>
        <p class="hidden">隐藏测试</p>
        <p class="show">显示测试</p>
    </div>
    <h3>关闭按钮 测试</h3>
    <div class="container bg-info alert alert-dismissable">
        <button class="close" data-dismiss="alert">&times;</button>
    </div>
</body>
</html>

# 导航栏

作用范围 类 说明
<nav> navbar 设置导航栏
<nav> navbar-default 设置导航栏
<nav> 属性 role="navigation" 可访问
标签 navbar-header 第一个导航栏
<a> navbar-brand 文本大一号
<ul> nav 设置导航栏中的链接项
<ul> navbar-nav 设置导航栏中的链接项
li active 禁用链接选项
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">首页测试</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">ios</a></li>
            <li><a href="#">Python</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">JavaScript</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java<b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Test1</a></li>
                    <li><a href="#">Test2</a></li>
                    <li><a href="#">Test3</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Test4(分割测试)</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Test5(分割测试)</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

# 轮播图

轮播图应用：

  1. 添加带有 .carousel 、.slide 的 <div> ，并且给定一个id属性（轮播图框架）
  2. <div> 内有 .carousel-indicators 的 <ol> （轮播指标）
  3. <ol> 中的 data-slide-to={索引}、data-target="#{id值}" <li> （控制轮播属性）
  4. <div> 内的 .carousel-inner 用来（定义图片）
  5. 包含 .carousel-inner 的<div> 中的每个 .item 用于定义图片
  6. 添加有 .active 代表当前显示的图片
  7. 最后 <a> （用户手动轮播） <a href="#{id值}" class="carousel-control left" data-slide="prev">&lt;</a> <a href="#{id值}" class="carousel-control right" data-slide="next">&gt;</a>

其他功能

.item 内的 .carousel-caption 元素向添加标题

轮播图属性选项

// 一定是指定是轮播jq对象
$('.carousel').carousel({<选项>})
属性名 值 描述
interval number 自动轮播 指定 时间秒
pause string / null 停止轮播的时间 参数有 "hover","mouseenter","mouseleave","null"
wrap boolean 是否连续循环轮播
keyboard boolean 是否对应响应事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <style>
        .box {
            width: 500px;
            height: 300px;
            margin-top: 50px;
            padding: 0;
        }

        .carousel-control {
            width: 50px;
            line-height: 300px;
        }
    </style>
    <script>
        $(function () {
            var csel = $("#myCarousel");

            $("button:eq(0)").click(function(){
                csel.carousel({
                    interval:2000
                });
            });

            $("button:eq(1)").click(function(){
                //hover、 pause 
                csel.carousel('pause');
            });

            $("button:eq(2)").click(function () {
                csel.carousel('next');
            });
            $("button:eq(3)").click(function () {
                csel.carousel('prev');
            });
        });
    </script>
</head>

<body>
    <button>一秒轮播</button>
    <button>停止轮播</button>
    <button>往下轮播</button>
    <button>往上轮播</button>

    <div id="myCarousel" class="container carousel slide box">
        <!-- 轮播指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
            <li data-target="#myCarousel" data-slide-to="5"></li>
        </ol>
        <!-- 轮播图片 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://sanscan12.gitee.io/blogimg/Cover/article 03.jpg" alt="1">
                <div class="carousel-caption">
                    添加标签
                </div>
            </div>
            <div class="item">
                <img src="http://sanscan12.gitee.io/blogimg/Cover/article 02.jpg" alt="2">
                
            </div>
            <div class="item">
                <img src="http://sanscan12.gitee.io/blogimg/Cover/article 18.jpg" alt="3">
            </div>
            <div class="item">
                <img src="http://sanscan12.gitee.io/blogimg/Cover/article 14.jpg" alt="4">
            </div>
            <div class="item">
                <img src="http://sanscan12.gitee.io/blogimg/Cover/article 16.jpg" alt="5">
            </div>
        </div>
        <!-- 轮播滑动按钮 -->
        <a href="#myCarousel" class="carousel-control left" data-slide="prev">&lt;</a>
        <a href="#myCarousel" class="carousel-control right" data-slide="next">&gt;</a>
    </div>

</body>

</html>
#UI框架#Bootstrap
上次更新: 2023/03/12, 00:43:49

← JQuery→

最近更新
01
HTTPS自动续签
10-21
02
博客搭建-简化版(脚本)
10-20
03
ruoyi-vue-plus-部署篇
07-13
更多文章>
Theme by Vdoing | Copyright © 2019-2024 | 桂ICP备2022009417号-1