微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Bootstrap框架 学习记录

分类：Bootstrap作者：编程之家原文地址

Bootstrap

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

引入

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

点击在线教学文档

按钮

类说明
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>

表单

作用标签表单类说明
<form>属性 role=“form”标准表单
<form>form-inline内联表单
<form>form-horizontal水平表单
标签、控件control-label网格布局模式
标签、控件col-{设备}-{列数}网格设置
标签、控件form-group标准：适当行高间距
内联：内行元素
水平：适当行高间距
<input> 、<textarea>、<select>form-control文本元素（设置输入框）
标签radio单选按钮
标签checkBox多选按钮
标签radio-inline内行单选按钮
标签checkBox-inline内行多选按钮
控件input-{设备}控件高度
<span>help-block帮助文档 提示作用
控件属性 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桃红色 文本样式

背景

类说明
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设置导航栏中的链接项
liactive禁用链接选项
<!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 元素向幻灯片添加标题

  • JavaScript控制
    interval 控制循环 (int)
    pause 鼠标悬停停止轮播 (String)
    wrap 是否连续循环 (bool)

    $('.carousel').carousel(
    //参数示范
    interval: 2000,
    pause: pause,
    wrap: true
);

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Bootstrip HTML 查询搜索常用格式模版
Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&quot;form-inline my-3 d-flex align-items-center justify-content-start&quot; method=&quot;get&quot; action=&q
如何在按钮上加红色数字
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在按钮上显示红色数字。以下是一个例子： &lt;button class=&quot;btn btn-primary&quot;&gt; My Button &lt;span class=&quot;badge badge-dan
让两个按钮左右排列
要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它们放置在同一行中。你可以将按钮放置在两个 col 中，分别占据一定的列宽。以下是你的模板代码做出的修改： {% extends &#39;base.html&#39; %} {% block content %} &lt;div c
status能否设置为布尔值类型，前端采用复选框形式
是的，可以将status设置为布尔类型，这样可以在前端使用复选框形式展示。在模型中的定义可以如下： class Acceptance(models.Model): # ... status = models.BooleanField(default=False) 然后在前端模板中使用{{ form.
Bootstrap 按钮总结
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自己重新定义class类即可，主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
Python学习-day52-bootstrap
起步导入：<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
bootstrap 模态框
（1）modal声明一个模态框（2）modal-dialog定义模态框尺寸（3）modal-lg定义大尺寸模态框（4）modal-sm定义小尺寸模态框（5）modal-header（6）modal-body（7）modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
BootStrap图片样式
图片在Bootstrap版本3中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
bootstrap日期选择
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
bootstrap-treeview 使用小记
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native