首页 > 其他分享> 文章详细

BootStrap

2021-10-15 10:31:47 阅读：177 来源： 互联网

标签：源站 img BootStrap 转存防盗链外链图片

BootStrap

1、Bootstrap介绍

什么是bootstrap?

简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。
Bootstrap是基于HTML,CSS,Javascript的

特点

移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式
响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局）
偏UI，综合框架，包含一些常用的UI组件以及一些JS组件

Bootstrap的适用场景？

bootstrap适用于偏展示类的网站或者项目

Bootstrap的使用方法？

资源网站：bootstrap中文网站：http://www.bootcss.com/
使用方法： ①环境搭建（依赖文件的引入）② 静态结构的满足③功能初始化
注意：bootstrap是基于jquery的！！！

2、引入BootStrap文件

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<!--引入js文件-->
<script src="js/jquery-1.12.4.js"/>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>

3、Bootstrap栅格系统

1.容器

流体布局：container-fluid (百分百平铺整个页面)
固定布局：container

固定布局根据浏览器不同分辨率，固定尺寸不同，不同阈值对应的宽度如下：

>=1200       width为1170px

>=992         width为970px

>=768         width为750px

<768            为自适应宽度auto

    <div class="container-fluid" style="background-color: skyblue">流体布局容器</div>
    <hr>
    <div class="container" style="background-color: pink">固体布局容器</div>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mNgcf621-1634264813838)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803092539371.png)]

2、什么是bootstrap栅格系统？

Bootstrap包含了一个响应式的，移动设备优先的，不固定的网格系统，可以随着设备或者视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的强大的混合类
表示行的class: row
表示列的class：注：("*"可选：1-12之间的任意数字，其它无效)
- col-lg-*:大型设备台式电脑(>=1200)
- col-md-*:中型设备台式电脑(>=992)
- col-sm-*:小型设备平板电脑(>=768)
- col-xs-*:超小设备手机(<768)

列偏移

col-[*]-offset-*

含义：表示在对应的屏幕分辨率下偏移多少个栅格

说明：[*]可选：lg/md/sm/xs

*可选：1-12之间的任意数字(其它数字无效)

<!--列偏移-->
<div class="container">
    <div class="row">
         <div class="col-md-4" style="background-color: #4cae4c">四列</div>
        <div class="col-md-4 col-md-offset-4" style="background-color: #adadad">四列</div>
    </div>
</div>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XYe9Vfgw-1634264813841)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803094327720.png)]

列嵌套

规则：嵌套的一行会按照它的父级重新分配网格(即按照其父级宽度进行12个网格平均分配)

    <!--列嵌套-->
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color: #4cae4c">4</div>
            <div class="col-md-8" style="background-color: #2aabd2">
                <!--在8个栅格里嵌套-->
                <div class="row">
                    <div class="col-md-3" style="background-color: #adadad">3</div>
                    <div class="col-md-3" style="background-color: palevioletred">3</div>
                    <div class="col-md-3" style="background-color: aquamarine">3</div>
                    <div class="col-md-3" style="background-color: coral">3</div>
                </div>
            </div>
        </div>
    </div>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RCQyTzQk-1634264813843)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803100144272.png)]

列排序

col-[*]-push-*:往后排多少个网格

col-[*]-pull-*: 往前排多少个网格

说明：[*]可选：lg/md/sm/xs

*可选：1-12之间的任意数字(其它数字无效)

<!--列排序-->
<div class="row">
    <div class="col-md-4" style="background-color: #b9def0">图片</div>
    <div class="col-md-8" style="background-color: #d9534f">文字</div>
</div>
<hr>
<div class="row">
    <!--向后偏移8个栅格-->
    <div class="col-md-4 col-md-push-8" style="background-color: #b9def0">图片</div>
    <!--向前偏移4个栅格-->
    <div class="col-md-8 col-md-pull-4" style="background-color: #d9534f">文字</div>
</div>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eR3KU95y-1634264813845)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803101049686.png)]

4、CSS全局样式

1、标题

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IMLlOC3q-1634264813847)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803104910518.png)]

2、排版—页面主题

为了凸显某些文本

<p class="lead"></p>

    <p>这是第一段内容</p>
    <p class="lead">这是第二段内容</p>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A8nFeasJ-1634264813848)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803102729881.png)]

3、排版—对齐方式

<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>

效果：

4、排版—列表

内联列表

    <!--内联列表-->
    <ul class="list-inline">
        <li>苹果</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>西瓜</li>
    </ul>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yteuq4Ag-1634264813849)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803103132946.png)]

水平定义列表

<!--水平定义列表-->
<dl class="dl-horizontal">
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
    <dd>西瓜</dd>
</dl>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P3Uj7Adc-1634264813850)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803103523548.png)]

5、表单

<form action="">
    <div class="from-group">
        <lable>userName：</lable>
        <input type="text" class="form-control" placeholder="Enter one user name">
    </div>
    <div class="from-group">
        <lable>passWord</lable>
        <input type="password" class="form-control" placeholder="Please input password">
    </div>
</form>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lAkiPPBy-1634264813850)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803110219105.png)]

内联表单

<form action="" class="form-inline">

<form action="" class="form-inline">
    <div class="from-group">
        <lable>userName：</lable>
        <input type="text" class="form-control" placeholder="Enter one user name">
    </div><br/>
    <div class="from-group">
        <lable>passWord：</lable>
        <input type="password" class="form-control" placeholder="Please input password">
    </div>
</form>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0KPjJwoX-1634264813851)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803110412715.png)]

空间尺寸

大文本框：input-lg

小文本框：input-sm

    <form action="" class="form-inline">
        <div class="from-group">
            <lable>userName：</lable>
            <input type="text" class="form-control input-lg" placeholder="大文本框">
        </div><br/>
        <div class="from-group">
            <lable>passWord：</lable>
            <input type="password" class="form-control input-sm" placeholder="小文本框">
        </div>
    </form>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHcWvoBv-1634264813852)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803110713055.png)]

水平表单

<form action="" class="form-horizontal">

    <form action="" class="form-horizontal">
        <div class="from-group">
            <lable>userName：</lable>
            <input type="text" class="form-control input-lg" placeholder="大文本框">
        </div><br/>
        <div class="from-group">
            <lable>passWord：</lable>
            <input type="password" class="form-control input-sm" placeholder="小文本框">
        </div>
    </form>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bTxZqaR9-1634264813852)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803110949928.png)]

6、按钮

BootStrap框架提供了七种样式的按钮风格

        <form action="#">
            <!-- 标准的按钮 -->
            <button type="button" class="btn btn-default">默认按钮</button>
            <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
            <button type="button" class="btn btn-primary">原始按钮</button>
            <!-- 表示一个成功的或积极的动作 -->
            <button type="button" class="btn btn-success">成功按钮</button>
            <!-- 信息警告消息的上下文按钮 -->
            <button type="button" class="btn btn-info">信息按钮</button>
            <!-- 表示应谨慎采取的动作 -->
            <button type="button" class="btn btn-warning">警告按钮</button>
            <!-- 表示一个危险的或潜在的负面动作 -->
            <button type="button" class="btn btn-danger">危险按钮</button>
            <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
            <button type="button" class="btn btn-link">链接按钮</button>
        </form>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4O0CRXZT-1634264813853)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803111957632.png)]

按钮尺寸

大按钮： btn-lg

小按钮：btn-sm

超小按钮：btn-xs

        <form action="#">
            <button type="button" class="btn btn-default btn-lg">大按钮</button>
            <button type="button" class="btn btn-default btn-sm">小按钮</button>
            <button type="button" class="btn btn-default btn-xs">超小按钮</button>
        </form>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vi3c896a-1634264813853)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803112601433.png)]

7、图片

响应式图片

img-responsive

    <!--响应式图片-->
    <img src="../images/h.jpg" class="img-responsive">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BX8bMNr4-1634264813854)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803113357482.png)]

圆型图片

img-circle

    <!--圆型图片-->
    <img src="../images/sh.png" class="img-circle">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MlWgTigu-1634264813855)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803113633370.png)]

圆角图片

img-rounded

    <!--圆角图片-->
    <img src="../images/R-C.jpg" class="img-rounded" width="500" height="600">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o74zl49W-1634264813856)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210803113842731.png)]

圆角边框

img-thumbnail

    <!--圆角边框-->
    <img src="../images/h.jpg" class="img-thumbnail" width="500" height="600">

8、字体图标

Bootstrap提供了250多个来自Glyphicon Halfings的字体图标，其作用在内联元素上

<span class="glyphicon glyphicon-search"></span>

<div class="container">
    <div class="row text-center">
        <div class="col-xs-3">
            <!--微信-->
            <span class="glyphicon glyphicon-comment"></span>
        </div>
        <div class="col-xs-3">
            <!--通讯录-->
            <span class="glyphicon glyphicon-list-alt"></span>
        </div>
        <div class="col-xs-3">
            <!--搜索-->
            <span class="glyphicon glyphicon-search"></span>
        </div>
        <div class="col-xs-3">
            <!--用户-->
            <span class="glyphicon glyphicon-user"></span>
        </div>
    </div>
</div>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J8RtVG9r-1634264813856)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805091554550.png)]

9、基本下拉菜单

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">
        请选择 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="active"><a href="#">咖啡</a></li>
        <li class="divider"><a href="#"></a></li>
        <li><a href="">冰红茶</a></li>
        <li class="divider"><a href="#"></a></li>
        <li><a href="">绿茶</a></li>
        <li class="divider"><a href="#"></a></li>
        <li><a href="">奶茶</a></li>
    </ul>
</div>

10、分离式下拉菜单

<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-success">个人中心</button>
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="">我的淘宝</a></li>
            <li class="divider"><a href=""></a></li>
            <li><a href="">我的京东</a></li>
        </ul>
    </div>
</div>

11、输入框组件

文本

<div class="container">
    <div class="input-group">
        <input type="search" class="form-control" placeholder="请输入您要搜索的内容">
        <span class="input-group-addon">百度一下</span>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QDbVYW7E-1634264813857)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805102456304.png)]

按钮

<!--按钮-->
<div class="input-group">
    <input type="search" class="form-control" placeholder="请输入您要搜索的内容">
    <span class="input-group-btn">
        <button class="btn btn-primary">百度一下</button>
    </span>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TUuLkbo5-1634264813858)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805102834557.png)]

12、导航组件

选项卡导航

<!--选项卡导航-->
<div class="container">
    <ul class="nav nav-tabs">
        <li><a href="">首页</a></li>
        <li><a href="">淘宝</a></li>
        <li><a href="">京东</a></li>
        <li><a href="">天猫</a></li>
    </ul>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jOwyoWEH-1634264813859)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805105457472.png)]

胶囊导航

<!--胶囊导航-->
<div class="container">
    <ul class="nav nav-pills">
        <li><a href="">首页</a></li>
        <li><a href="">淘宝</a></li>
        <li><a href="">京东</a></li>
        <li><a href="">天猫</a></li>
    </ul>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mivIdY8c-1634264813860)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805105731596.png)]

自适应导航

<div class="container">
    <ul class="nav nav-pills nav-justified">
        <li><a href="">首页</a></li>
        <li><a href="">淘宝</a></li>
        <li><a href="">京东</a></li>
        <li><a href="">天猫</a></li>
    </ul>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Drn5td4-1634264813860)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805110056109.png)]

下拉菜单导航

<!--下拉菜单导航-->
<div class="container">
    <ul class="nav nav-pills nav-justified">
        <li><a href="">首页</a></li>
        <li><a href="">淘宝</a></li>
        <li><a href="">京东</a></li>
        <li class="dropdown">
            <a href="" class="dropdown-toggle" data-toggle="dropdown">个人中心
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="">地址管理</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">联系卖家</a></li>
                <li><a href="">退换货</a></li>
            </ul>
        </li>
    </ul>
</div>

导航条

<!--导航条-->
<nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li><a href="">淘宝</a></li>
        <li><a href="">天猫</a></li>
        <li><a href="">京东</a></li>
        <li><a href="">智联</a></li>
    </ul>
</nav>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n9z83BPg-1634264813861)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210805115243999.png)]

13、分页组件

默认分页

<!-- 默认分页 -->
<div class="container">
    <ul class="pagination">
        <li><a href="">&laquo;</a></li>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">&raquo;</a></li>
    </ul>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-toOKUaID-1634264813862)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210807090845385.png)]

翻页效果

<!-- 翻页效果 -->
<div class="container">
    <ul class="pager">
        <li><a href="">首页</a></li>
        <li><a href="">上一页</a></li>
        <li><a href="">下一页</a></li>
        <li><a href="">尾页</a></li>
    </ul>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MTLH02Kx-1634264813862)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210807091344974.png)]

14、缩略图组件

<!-- 缩略图 -->
<div class="container">
    <div class="row">
        <div class="col-md-3 col-xs-6">
            <a href="" class="thumbnail">
                <img src="images/b.png" alt="">
                <div class="caption">
                    <h3>春天来了</h3>
                    <p>此处省略一万字</p>
                    <p><a href="" class="btn btn-primary" role="button">查看</a></p>
                </div>
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="" class="thumbnail">
                <img src="images/a.png" alt="">
                <div class="caption">
                    <h3>夏天来了</h3>
                    <p>此处省略一万字</p>
                    <p><a href="" class="btn btn-primary" role="button">查看</a></p>
                </div>
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="" class="thumbnail">
                <img src="images/c.png" alt="">
                <div class="caption">
                    <h3>秋天来了</h3>
                    <p>此处省略一万字</p>
                    <p><a href="" class="btn btn-primary" role="button">查看</a></p>
                </div>
            </a>
        </div>
        <div class="col-md-3 col-xs-6">
            <a href="" class="thumbnail">
                <img src="images/d.png" alt="">
                <div class="caption">
                    <h3>冬天来了</h3>
                    <p>此处省略一万字</p>
                    <p><a href="" class="btn btn-primary" role="button">查看</a></p>
                </div>
            </a>
        </div>												   
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qZoSEUNu-1634264813863)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210807095820791.png)]

15、媒体对象

<!-- 媒体对象 -->
<div class="media">
    <div class="media-left">
        <img class="media-object" src="images/a.png" width="180" height="100">
    </div>
    <div class="media-body">
        <h4 class="media-heading">《改变的力量：六力理论助你成功》</h4>
        <p>"六力理论"，是作者......</p>
        <small>5分钟前/股市</small>
        <small style="margin-left: 70%; color: gold;">评论|分享</small>
    </div>
</div>

<div class="media">
    <div class="media-left">
        <img class="media-object" src="images/b.png" width="180" height="100">
    </div>
    <div class="media-body">
        <h4 class="media-heading">《改变的力量：六力理论助你成功》</h4>
        <p>"六力理论"，是作者......</p>
        <small>5分钟前/股市</small>
        <small style="margin-left: 70%; color: gold;">评论|分享</small>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-67Ka6CJP-1634264813863)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210807102148354.png)]

16、列表组组件

<!-- 列表组 -->
<div class="container">
    <ul class="list-group">
        <li class="list-group-item">
            郭晶晶跳水夺冠了！
            <span class="badge">99+</span>
        </li>
        <li class="list-group-item">
            姚明带领男篮进入八强！
            <span class="badge">99+</span>
        </li>
        <li class="list-group-item">
            苏炳添9.83破亚洲纪录！
            <span class="badge">99+</span>
        </li>
        <li class="list-group-item">
            杨倩获得首金！
            <span class="badge">99+</span>
        </li>
    </ul>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tou6CESh-1634264813864)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210807102604911.png)]

JavaScript插件

模态框

<div class="modal fade" id="myModal"><!-- fade 关闭和隐藏的样式 -->
    <div class="modal-dialog"><!-- 背景色 灰色 -->
        <div class="modal-content"><!-- 内容放在 modal-content -->
            <div class="modal-header">
                <h4 class="modal-title">模态框的标题</h4>
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>这是主题内容区域</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RyHjtStr-1634264813864)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210809142942867.png)]

通过按钮触发模态框

<!-- 淡入淡出
模态框需要激活才能生效
data-dismiss理解为click事件

-->
<div class="modal fade" id="myModal"><!-- fade 关闭和隐藏的样式 -->
    <div class="modal-dialog"><!-- 背景色 灰色 -->
        <div class="modal-content"><!-- 内容放在 modal-content -->
            <div class="modal-header">
                <h4 class="modal-title">模态框的标题</h4>
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>这是主题内容区域</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 
data-toggle="modal" 触发的插件为模态框
-->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    点击此处切换模态框
</button>
<a href="#myModal" class="btn btn-warning" role="button" data-toggle="modal">
    点击链接切换模态框
</a>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-THJx8lXk-1634264813865)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210809144829222.png)]

轮播图

<div id="aaa" class="carousel slide" data-ride="carousel">
    <!-- 圆圈指示符 -->
    <ol class="carousel-indicators">
        <li class="active" data-targer="#aaa" data-slide-to="0"></li>
        <li data-target="#aaa" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/banner1.jpg" width="100%">
        </div>

        <div class="item">
            <img src="img/banner2.jpg" width="100%">
        </div>
    </div>
    <a href="#aaa" data-slide="prev" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#aaa" data-slide="next" class="right carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>			
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fMBnhIGk-1634264813865)(C:\Users\23578\AppData\Roaming\Typora\typora-user-images\image-20210809161133059.png)]

[外链图片转存中…(img-THJx8lXk-1634264813865)]

轮播图

<div id="aaa" class="carousel slide" data-ride="carousel">
    <!-- 圆圈指示符 -->
    <ol class="carousel-indicators">
        <li class="active" data-targer="#aaa" data-slide-to="0"></li>
        <li data-target="#aaa" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/banner1.jpg" width="100%">
        </div>

        <div class="item">
            <img src="img/banner2.jpg" width="100%">
        </div>
    </div>
    <a href="#aaa" data-slide="prev" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#aaa" data-slide="next" class="right carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>			
</div>

[外链图片转存中…(img-fMBnhIGk-1634264813865)]

标签：源站,img,BootStrap,转存,防盗链,外链,图片
来源： https://blog.csdn.net/Skf_0004010/article/details/120778538

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

BootStrap

BootStrap

1、Bootstrap介绍

2、引入BootStrap文件

3、Bootstrap栅格系统

1.容器

2、什么是bootstrap栅格系统？

4、CSS全局样式

1、标题

2、排版—页面主题

3、排版—对齐方式

4、排版—列表

内联列表

水平定义列表

5、表单

内联表单

空间尺寸

水平表单

6、按钮

按钮尺寸

7、图片

响应式图片

圆型图片

圆角图片

圆角边框

8、字体图标

9、基本下拉菜单

10、分离式下拉菜单

11、输入框组件

12、导航组件

选项卡导航

胶囊导航

自适应导航

下拉菜单导航

导航条

13、分页组件

默认分页

翻页效果

14、缩略图组件

15、媒体对象

16、列表组组件

JavaScript插件

模态框

通过按钮触发模态框

轮播图

轮播图