bootstrap例子笔记

简介: bootstrap例子笔记
<!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">
    <title>Document</title>
    <script src="./plunge/jquery.min.js"></script>
    <link href="./plunge/bootstrap.min.css" rel="stylesheet">
    <script str="./Popper.js"></script>
    <script src="./plunge/bootstrap.min.js"></script>
    <style>
        img {
            width: 20px;
            height: 20px;
        }
        table tr th {
            width: 40px;
        }
        .inputSty {
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li role="presentation"><a href="#">导航一</a></li>
            <li role="presentation"><a href="#">导航二</a></li>
            <li role="presentation"><a href="#">导航三</a></li>
        </ul>
        <br><br>
        <ul class="breadcrumb">
            <li role="presentation" class="active"><a href="#">JAVA</a></li>
            <li role="presentation"><a href="#">IOS</a></li>
            <li role="presentation" class="disabled"><a href="#">C++</a></li>
        </ul>
        <br><br>
        <table class="table table-bordered table-hover">
            <tr>
                <th>头像</th>
                <th>名字</th>
                <th>HP</th>
            </tr>
            <tr class="active">
                <td><img src="./img/gareen.png" class="img-rounded"></td>
                <td>盖伦</td>
                <td>616</td>
            </tr>
            <tr>
                <td><img src="./img/teemo.png" class="img-circle"></td>
                <td>提莫</td>
                <td>383</td>
            </tr>
            <tr>
                <td><img src="./img/akali.png" class="img-thumbnail"></td>
                <td>阿卡丽</td>
                <td>448</td>
            </tr>
        </table>
        <div class="pull-centeral">文字浮动到左边</div>
        <div class="row">
            <div class="col-sm-6" style="border: 1px solid black;">一半</div>
            <div class="col-sm-6" style="border: 1px solid black;">另一半</div>
        </div>
        <br><br>
        <div class="row">
            <div class="col-xs-8" style="border: 1px solid red;">一半</div>
            <div class="col-xs-4" style="border: 1px solid red;">另一半</div>
        </div>
        <br><br>
        <div class="dropdown">
            <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">http://192.168.1.189
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li><a href="#">HTML</a></li>
                <li role="presentation"><a href="#">CSS</a></li>
                <li role="presentation"><a href="#">jQuery</a></li>
                <li role="presentation"><a href="#">AJAX</a></li>
            </ul>      
        </div>     
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">@@@</span>
            <input type="text" class="inputSty form-control" placeholder="用户名" aria-describedby="basic-addon1">
            <span class="input-group-addon" id="basic-addon200">$$$</span>
        </div>
        <nav>        
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden>&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        <br><br>
        <nav>
            <ul class="pager">
                    <li><a href="#">上一页</a></li>
                    <li><a href="#">下一页</a></li>
            </ul>
        </nav>
        <nav>
            <ul class="pager">
                <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
            </ul>
        </nav>
        <button class="label label-default">label-default</button>
        <button class="label label-primary">label-primary</button>
        <button class="label label-success">label-success</button>
        <button class="label label-info">label-info</button>
        <button class="label label-warning">label-warning</button>
        <button class="label label-dangerous">label-dangerous</button>
        <br><br>
        <a href="#">新的邮件信息<span class="badge">199</span></a>
        <button class="btn btn-primary">新消息<span class="badge">123</span></button>
        <br><br><br>
    </div>
    <div class="container" align="center">
        <h2 class="text-info" style="font-family:宋体;font-weight: bold;font-size: 49px">知乎</h2>
        <br>
        <div class="text-muted">与世界分享你的知乎</div>
        <br><br>
        <p><a href="#" class="btn btn-success">注册</a></p>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" style="width: 60%; min-width: 2em">60%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 70%;">70%</div>   
    </div>
    <div class="form">
        <ul class="list-group">
            <li class="list-group-item"><a href="#">回锅肉</a><span class="badge">13</span></li>
            <li class="list-group-item">烧烤<span class="badge">15</span></li>
            <li class="list-group-item">鱼香肉丝<span class="badge">21</span></li>
            <li class="list-group-item">夫妻肺片<span class="badge">22</span></li>
            <li class="list-group-item">麻婆豆腐<span class="badge">55</span></li>
        </ul>
        <br><br><br>
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-success">烤鱼</a>
            <a href="#" class="list-group-item list-group-item-info">鱼香肉丝</a>
        </div>
        <div class="list-group">
            <button class="list-group-item list-group-item-success">烤鱼<span class="badge">12</span></button>
            <button class="list-group-item list-group-item-info">鱼香肉丝</button>
        </div>
    </div>
    <div class="well">文字呈现</div>
</body>
</html>
<!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">
    <title>Document</title>
    <script src="./plunge/jquery.min.js"></script>
    <link href="./plunge/bootstrap.min.css" rel="stylesheet">
    <script str="./Popper.js"></script>
    <script src="./plunge/bootstrap.min.js"></script>
    <style type="text/css">
        p {
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>
    <script>
        $(function() {
            $("[data-toggle='tooltip']").tooltip(); 
        });
     </script>
</head>
<body>
    <div class="container">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#dota" data-toggle="tab">Dota</a></li>
            <li><a href="#lol" data-toggle="tab">英雄联盟</a></li>
            <li class="dropdown">
                <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">其他类似游戏
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                    <li><a href="#storm" tabindex="-1" data-toggle="tab">暴雪游戏</a></li>
                    <li><a href="#h300" tabindex="-1" data-toggle="tab">300英雄</a></li>
                </ul>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="dota">
                Dota游戏
            </div>
            <div class="tab-pane fade" id="lol">
                英雄联盟
            </div>
            <div class="tab-pane fade" id="storm">
                暴雪英雄
            </div>
            <div class="tab-panel fade" id="h300">
                300英雄
            </div>
        </div>
        <button class="btn btn-primary" data-toggle="tooltip" title="SunXiang" data-placement="top">Button</button>
        <button class="btn btn-primary" data-toggle="tooltip" title="SunXiang" data-placement="bottom">Button</button>
    </div>
    <br><br>
    <div class="container">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Dota</a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        dota
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwo">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">lol</a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        lol
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="./jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="./bootstrap.min.js" type="text/javascript"></script>
    <style>
        input {
            display: inline-block;
            /* width: 50px; */
        }
        label {
            display: inline-block;
            /* width: 50%; */
        }
        table {
            font-size: 20px;
        }
        table tr {
            border: 1px solid black;
            border-radius: 8px;
        }
        table tr td,
        table tr th {
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>Bootstrap相关优质项目推介</h1>
            <p>这些项目或者是对bootstrap进行有益的补充,或者是给予bootstrap开发</p>
        </div>
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>简介、直观、强悍的前端开发框架、让web开发更迅速、简单。</p>
            <a href="" class="btn btn-primary btn-lg">Bootstrap3中文文档(v3.3.5)</a>
        </div>
        <table class="table table-bordered">
            <tr class="info">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr class="warning">
                <td class="info">孙祥</td>
                <td>男</td>
                <td>24</td>
            </tr>
            <tr class="success">
                <td>程丽芳</td>
                <td>女</td>
                <td>21</td>
            </tr>
            <tr class="danger">
                <td>周莎</td>
                <td>女</td>
                <td>22</td>
            </tr>
        </table>
        <button class="btn btn-default">下拉菜单 <span>&times;</span></button>
        <div class="row">
            <div class="col-md-8" main>
                左边,主要内容
            </div>
            <div class="col-md-4 side hidden-sm hidden-xs">
                右边的侧栏
            </div>
        </div>
        <div class="well">
            这是一个容器
        </div>
        <div class="well well-lg">
            这是一个大号的well
        </div>
        <div class="well well-sm">
            这是一个小号的well
        </div>
        <h2>热门文章</h2>
        <p>
            <span class="label label-danger">1</span>
            <a href="#">如何为网站和应用创建设计...</a>
        </p>
        <p>
            <span class="label label-danger">2</span>
            <a href="#">假如5年后你是开发总监</a>
        </p>
        <p>
            <span class="label label-danger">3</span>
            <a href="#">20个精雕细琢的LOGO草图...</a>
        </p>
        <p>
            <span class="label label-default">4</span>
            <a href="#">每个程序员都必须遵守的编程...</a>
        </p>
        <p>
            <span class="label label-default">5</span>
            <a href="#">推荐: 7个有用的HTML5学习...</a>
        </p>
        <p>
            <span class="label label-default">6</span>
            <a href="#">响应式WEB设计</a>
        </p>
        <p>
            <span class="label label-default">7</span>
            <a href="#">Javascript判断Chrome浏览器</a>
        </p>
        <button class="btn btn-primary">收件箱<span class="badge">99</span></button>
        <a href="" class="btn btn-success">未接电话<span class="badge">100</span></a>
        <div class="alert">提示信息</div>
        <p class="alert alert-success">操作成功</p>
        <ol class="breadcrumb">
            <li><a href="">首页</a></li>
            <li><a href="">手机</a></li>
            <li><a href="">华为</a></li>
            <li><a href="">荣耀</a></li>
        </ol>
        <ul class="pagination">
            <li><a href="">&laquo;</a></li>
            <li class="active"><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
            <li><a href="">6</a></li>
            <li><a href="">7</a></li>
            <li><a href="">&raquo;</a></li>
        </ul>
    </div>
</body>
</html>

轮播例子

<!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">
    <title>Document</title>
    <script src="./plunge/jquery.min.js"></script>
    <link href="./plunge/bootstrap.min.css" rel="stylesheet">
    <script str="./Popper.js"></script>
    <script src="./plunge/bootstrap.min.js"></script>
</head>
<body>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://how2j.cn/img/site/step/3491.png" />
            </div>
            <div class="item">
                <img src="http://how2j.cn/img/site/step/3492.png" />
            </div>
            <div class="item">
                <img src="http://how2j.cn/img/site/step/3493.png" />
            </div>
            <div class="item">
                <img src="http://how2j.cn/img/site/step/3494.png" />
            </div>
        </div>
    </div>
</body>
</html>
相关文章
|
7月前
|
前端开发 JavaScript
BootStrap使用笔记+案例(下)
BootStrap使用笔记+案例
40 0
|
7月前
|
前端开发 Python
BootStrap使用笔记+案例(上)
BootStrap使用笔记+案例
81 0
|
7月前
|
移动开发 前端开发 HTML5
bootstrap笔记
bootstrap笔记
|
前端开发
后端小白的Bootstrap笔记(三)
后端小白的Bootstrap笔记(三)
129 0
|
前端开发
后端小白的Bootstrap笔记(二)
后端小白的Bootstrap笔记(二)
194 0
|
前端开发
后端小白的Bootstrap笔记(一)
后端小白的Bootstrap笔记(一)
201 0
|
前端开发 开发者
Bootstrap响应式前端框架笔记二十——工具条的应用
Bootstrap响应式前端框架笔记二十——工具条的应用
141 0
Bootstrap响应式前端框架笔记二十——工具条的应用
|
前端开发 JavaScript 人机交互
Bootstrap响应式前端框架笔记十九——标签页的使用
Bootstrap响应式前端框架笔记十九——标签页的使用
310 0
Bootstrap响应式前端框架笔记十九——标签页的使用
|
前端开发 JavaScript 开发者
Bootstrap响应式前端框架笔记十八——导航滚动监听
Bootstrap响应式前端框架笔记十八——导航滚动监听
258 0
Bootstrap响应式前端框架笔记十八——导航滚动监听
|
前端开发 JavaScript 开发者
Bootstrap响应式前端框架笔记十六——模态框交互
Bootstrap响应式前端框架笔记十六——模态框交互
233 0
Bootstrap响应式前端框架笔记十六——模态框交互