Bootstrap

  • Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架，是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷
  • 优点：
    • 开源、兼容性强，支持所有主流浏览器，响应式设计
    • 自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式，为开发人员创建接口提供简洁解决方案，包含了功能强大和基于web的内置组件，易于定制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
    
</head>
<body style="padding:100px;">
    <h1>hello, bootstrap</h1>
    <button class="btn btn-primary">欢迎进入</button>
</body>
</html>

1.表格

标签含义

  • <table> 为表格添加基础样式<thead> 表格标题行的容器元素（<tr>）
  • <tbody> 表格主体中的表格行的容器元素（<tr>）
  • <tr> 表格行
  • <td> 默认的表格单元格。
  • <th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用。
  • <caption> 关于表格存储内容的描述或总结。

样式

  • table 为任意 <table> 添加基本样式 (只有横向分隔线).
  • table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色
  • table-bordered 为所有表格的单元格添加边框
  • .table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
  • .table-condensed 让表格更加紧凑

情景样式

  • 适合应用在<th>、<tr>，<td>
  • .active 激活效果（悬停颜色）
  • .success 表示成功或积极的动作
  • .info 表示普通的提示信息或动作
  • .warning 表示警告或需要用户注意
  • .danger 表示危险或潜在的带来的负面影响的动作
  • .table-responsive 响应式边框

　

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding:50px;">
    <!--<table class="table table-hover table-striped table-bordered table-condensed">-->
        <table class="table table-responsive">
            <caption style="text-align:center">三国人物信息</caption>
            <!--描述-->
            <thead>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </thead>
            <!--表头-->

            <tbody>
                <tr class="active">
                    <td>1</td>
                    <td>吕布</td>
                    <td>24</td>
                    <td>男</td>
                </tr>
                <tr class="success">
                    <td>2</td>
                    <td>董卓</td>
                    <td>54</td>
                    <td>男</td>
                </tr>
                <tr class="info">
                    <td>3</td>
                    <td>貂蝉</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
                <tr class="warning">
                    <td>4</td>
                    <td>袁绍</td>
                    <td>44</td>
                    <td>男</td>
                </tr>
                <tr class="danger">
                    <td>5</td>
                    <td>贾诩</td>
                    <td>26</td>
                    <td>男</td>
                </tr>
            </tbody>
        </table>

</body>

</html>　　

2.表单

  • 内联布局，小于768px时,会自动还原成移动端样式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding: 100px;">
    <form class="form-inline">
        <div class="form-group">
            <p>邮箱</p>
            <input type="email" placeholder="请输入邮箱" class="form-control">
        </div>
        <div class="form-group">
            <p>密码</p>
            <input type="password" placeholder="请输入邮箱" class="form-control">
        </div>
        <div class="form-group">
            <button class="btn btn-primary">提交</button>
        </div>
    </form>

</body>

</html>
  • 表单控件：输入框，文本框，复选框，复选按钮，单选，单选按钮　　　
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding:100px;">
    <!--输入框，文本框，复选框，复选按钮，单选，单选按钮-->
    <form>
        <!--输入框-->
        <div class="form-group">
            <label for="">输入框</label>
            <input type="text" class="form-control" placeholder="文本输入">
        </div>
        <hr>
        <!--文本框-->
        <div class="form-group">
            <label for="">文本框</label>
            <textarea class="form-control" cols="30" rows="5"></textarea>
        </div>
        <hr>
        <!--复选框-->
        <div class="checkbox-inline">
            <label for="">
               <input type="checkbox">选项1
           </label>
        </div>
        <div class="checkbox-inline">
            <label for="">
            <input type="checkbox">选项2
        </label>
        </div>
        <div class="checkbox-inline">
            <label for="">
            <input type="checkbox">选项3
        </label>
        </div>
        <hr>
        <!--复选按钮-->
        <form>
            <div class="btn-group" data-toggle='buttons'>
                <label class="btn btn-primary">
                <input type="checkbox" >体育
            </label>
                <label class="btn btn-primary">
                <input type="checkbox" >美术
            </label>
                <label class="btn btn-primary">
                <input type="checkbox" >音乐
            </label>
                <label class="btn btn-primary">
                <input type="checkbox" >舞蹈
            </label>
            </div>
        </form>
        <!--单选-->
        <form>
            <div class="radio-group">
                <label class="radio">
                    <input type="radio" name="sex">男
                </label>
                <label class="radio">
                    <input type="radio" name="sex">女
                </label>
            </div>
        </form>
        <!--单选按钮-->
        <form>
            <div>
                <label class="radio-inline">
                    <input type="radio" name="gender">男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="gender">女
                </label>
            </div>
        </form>
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</html>

3.按钮

  • 按钮类型：默认，主要，信息，成功，警告，危险，连接
  • 按钮大小：超大（台式机）、大（笔记本）、小（平板）、超小（手机）
  • 按钮状态：默认、激活、禁用　　
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding: 100px;">
    <!--按钮类型-->
    <button class="btn btn-default">默认按钮</button>
    <button class="btn btn-primary">主要按钮</button>
    <button class="btn btn-info">信息按钮</button>
    <button class="btn btn-success">成功按钮</button>
    <button class="btn btn-warning">警告按钮</button>
    <button class="btn btn-danger">危险按钮</button>
    <button class="btn btn-link">连接按钮</button>
    <hr>
    <!--按钮大小-->
    <button class="btn btn-default btn-lg">默认按钮</button>
    <button class="btn btn-default">默认按钮</button>
    <button class="btn btn-default btn-sm">默认按钮</button>
    <button class="btn btn-default btn-xs">默认按钮</button>
    <hr>
    <!--按钮状态-->
    <button class="btn btn-default">默认按钮</button>
    <button class="btn btn-default active">默认按钮</button>
    <button class="btn btn-default" disabled>默认按钮</button>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</html>

4.图片

  • 图片形状
    • img-rounded：添加 border-radius:6px 来获得图片圆角。
    • .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
    • .img-thumbnail：添加一些内边距（padding）和一个灰色的边框
    • .img-responsive 响应式图片随屏幕大小改变
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding: 100px;">
    <!--图片类型-->
    <img src="img/1.jpg" class="img-rounded" width="33%">
    <img src="img/1.jpg" class="img-circle" width="33%">
    <img src="img/1.jpg" class="img-thumbnail" width="33%">
    <hr>
    <img src="img/1.jpg" class="img-responsive">

</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</html>

5.下拉菜单组件 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding: 100px;">
    <div class="dropdown">
        <button class="btn btn-primary" data-toggle="dropdown">教育 <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">前沿技术</a></li>
            <li><a href="#">名师制作</a></li>
            <li><a href="#">24小时导师</a></li>
        </ul>
    </div>

</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</html>

6. 分页组件


 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding: 100px;">

    <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>
    <hr>
    <ul class="pager">
        <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>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</html>

7.栅格系统

  • bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子
  • 当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果 

　　

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>
<style>
    .x {
        height: 50px;
        border: 1px solid black;
        background-color: #eeeeee;
    }
</style>

<body style="padding: 100px;">
    <!-- col-lg-3 当大屏幕时，一个div占3份，一行显示4个div -->
    <!-- col-md-4 当中屏幕时，一个div占4份，一行显示3个div -->
    <!-- col-sm-6 当小屏幕时，一个div占6份，一行显示2个div -->
    <!-- 超小屏幕时，一个div占12份，一行显示1个div，默认 -->
    <div class="container">
        <div class="rows">
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 x">x</div>
        </div>
    </div>

</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</html>

8.缩略图

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>
<style>

</style>

<body style="padding: 100px;">
    <!-- col-lg-3 当大屏幕时，一个div占3份，一行显示4个div -->
    <!-- col-md-4 当中屏幕时，一个div占4份，一行显示3个div -->
    <!-- col-sm-6 当小屏幕时，一个div占6份，一行显示2个div -->
    <!-- 超小屏幕时，一个div占12份，一行显示1个div，默认 -->
    <div class="container">
        <div class="rows">

            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                    <div class="caption">
                        <h3>图文并茂</h3>
                        <p>这是一个图片结合文字的缩略图</p>
                        <a href="#" class="btn btn-primary">观看</a>
                        <a href="#" class="btn btn-warning">购买</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                    <div class="caption">
                        <h3>图文并茂</h3>
                        <p>这是一个图片结合文字的缩略图</p>
                        <a href="#" class="btn btn-primary">观看</a>
                        <a href="#" class="btn btn-warning">购买</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                    <div class="caption">
                        <h3>图文并茂</h3>
                        <p>这是一个图片结合文字的缩略图</p>
                        <a href="#" class="btn btn-primary">观看</a>
                        <a href="#" class="btn btn-warning">购买</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                    <img src="img/2.jpg">
                    <div class="caption">
                        <h3>图文并茂</h3>
                        <p>这是一个图片结合文字的缩略图</p>
                        <a href="#" class="btn btn-primary">观看</a>
                        <a href="#" class="btn btn-warning">购买</a>
                    </div>
                </div>
            </div>
        </div>

</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</html>

9.模态框

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding: 100px;">
    <button class="btn btn-warning" data-toggle="modal" data-target="#modal">弹框</button>

    <!-- 声明定义模态框组件-->
    <div class="modal" id='modal' data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                <span>&times;</span></button>
                    <h3 class="modal-title">友情提示</h3>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">
                    服务器错误，请稍后再试！
                    <hr>
                    <img src="img/2.jpg" width="200px">
                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info">确定</button>
                    <button class="btn btn-info" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</html>
  • data-toggle="modal" 触发类型:模态框modal
  • data-target="#modal" 触发的节点
  • data-backdrop="static" 点击黑灰色背景，不会关闭模态框
  • data-dismiss="modal" 关闭模态框

10.案例

  • 首页轮播大图
    •  大小屏幕自动适应,扩大缩小浏览器
    •  滚动数字区点击左右切换图片
    •  左右区域点击切换
    •  默认5秒钟自动切换下一张
    • 最后一张,回到第一张
  • data 属性解释
    •  data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
    •  data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to="2" 将把滑动块移动到一个特定的索引，索引从 0 开始计数。
    • data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放　　　
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding: 100px;">
    <div class="carousel slide" id="carousel" data-ride="carousel">
        <!--圆点-->
        <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li data-slide-to="1" data-target="#carousel"></li>
            <li data-slide-to="2" data-target="#carousel"></li>
            <li data-slide-to="3" data-target="#carousel"></li>
            <li data-slide-to="4" data-target="#carousel"></li>
        </ol>
        <!--图片-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/1.jpg">
            </div>
            <div class="item">
                <img src="img/2.jpg">
            </div>
            <div class="item">
                <img src="img/3.jpg">
            </div>
            <div class="item">
                <img src="img/4.jpg">
            </div>
            <div class="item">
                <img src="img/5.jpg">
            </div>
        </div>

        <!--左右切换图标-->
        <a href="#carousel" class="carousel-control left" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#carousel" class="carousel-control right" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</html>
  • 响应式导航栏
    • data-toggle="collapse" 数据切换的事件，特效是折叠
    • data-target="#nav" 折叠效果的目标是下面的#nav容器
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body>
    <!-- 默认的导航条样式 -->
    <div class="nav navbar-default">
        <!-- 响应式的容器 -->
        <div class="container">
            <!-- 导航条的头部 -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">rf科技有限公司</a>
                <!-- data-toggle="collapse" 数据切换的事件，特效是折叠-->
                <!-- data-target="#nav" 折叠效果的目标是下面的#nav容器-->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#nav">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- 导航项 -->
            <div id="nav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="#">
                            <span class="glyphicon glyphicon-home">主页</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"> <span class="glyphicon glyphicon-camera">
                    </span> 产品</a>
                    </li>
                    <li>
                        <a href="#"> <span class="glyphicon glyphicon-tint"></span> 竞争
                        </a>
                    </li>
                    <li>
                        <a href="#"> <span class="glyphicon glyphicon-earphone">
                    </span> 联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</html>

 

posted @ 2021-01-13 21:26  forever_fate  阅读(138)  评论(0)    收藏  举报