bootstrap学习
|
<!doctype html> <html lang="en"> <head> <title> bootstrap插件练习 </title> <meta charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" /> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> ? ? <style type="text/css">
</style> </head> <body> <div class="container"> ? ? <!--1.对话框--> ? ? <h1>1.bootstrap对话框</h1> ? ? <div id="Mymodal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabe2"> ? ? ? ? <div class="modal-dialog"> ? ? ? ? ? ? <div class="modal-content"> ? ? ? ? ? ? ? ? <div class="modal-header"> ? ? ? ? ? ? ? ? ? ? <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> ? ? ? ? ? ? ? ? ? ? ? ? <h1 id="myModalLabe2">modal title</h1> ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? <div class="modal-body"> ? ? ? ? ? ? ? ? ? ? <p>modal body</p> ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? <div class="modal-footer"> ? ? ? ? ? ? ? ? ? ? <button type="button" class="btn-default" data-dismiss="modal">关闭</button> ? ? ? ? ? ? ? ? ? ? ? ? <button type="button" class="btn btn-primary">保存并修改</button> ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ? ? <button class="btn btn-info" type="button" data-toggle="modal" data-target="#Mymodal1">打开对话框</button> ? ? ? ? <button id="tall-toggle" type="button" class="btn btn-success">tall</button> ? ? ? ? <div id="tall" style="display:none"> ? ? ? ? Tall body content to force the page to have a scrollbar. ? ? ? ? </div> ? ? ? ? <script> $("#tall-toggle").click(function(){ $("#tall").toggle(); }) </script> ? ? ? ? <!--2.下拉菜单--> ? ? ? ? <h1>2.bootstrap下拉菜单</h1> ? ? ? ? <ul class="nav nav-pills"> ? ? ? ? <li class="active"><a href="#">Home</a></li> ? ? ? ? ? ? <li><a href="#">Link</a></li> ? ? ? ? ? ? <li class="dropdown"> ? ? ? ? ? ? ? ? <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown">Dropdown<span class="caret"></span></a> ? ? ? ? ? ? ? ? <ul class="dropdown-menu" role="menu"> ? ? ? ? ? ? ? ? <li><a href="#">11</a></li> ? ? ? ? ? ? ? ? ? ? <li><a href="#">11</a></li> ? ? ? ? ? ? ? ? ? ? <li class="divider"></li> ? ? ? ? ? ? ? ? ? ? <li class=" dropdown-header">header</li> ? ? ? ? ? ? ? ? ? ? <li><a href="#">11</a></li> ? ? ? ? ? ? ? ? </ul> ? ? ? ? ? ? </li> ? ? ? ? </ul> ? ? ? ? <!--3.导航上的滚动 ?--> ? ? ? ? <h1><a href="scrollspy.html">3.bootstrap导航上的滚动</a><font color="red">(scrollspy.html)</font></h1> ? ? ? ? <!--4.导航上的切换 --> ? ? ? ? <h1>4.bootstrap导航上的切换</h1> ? ? ? ? <div id="bootstrap.tab.js" style="height:100px; border:2px solid;"> ? ? ? ? <nav> ? ? ? ? ? ? <ul class="nav nav-tabs"> ? ? ? ? ? ? ? ? <li class="active"><a href="#1" data-toggle="tab">1</a></li> ? ? ? ? ? ? ? ? ? ? <li><a href="#2" data-toggle="tab">2</a></li> ? ? ? ? ? ? ? ? ? ? <li><a href="#3" data-toggle="tab">3</a></li> ? ? ? ? ? ? ? ? ? ? <li><a href="#4" data-toggle="tab">4</a></li> ? ? ? ? ? ? ? ? </ul> ? ? ? ? ? ? </nav> ? ? ? ? ? ? <div class="tab-content"> ? ? ? ? ? ? ? ? <p id="1" class="tab-pane active">222222222222222222221</p> ? ? ? ? ? ? ? ? <p id="2" class="tab-pane">222222222222222222222</p> ? ? ? ? ? ? ? ? <p id="3" class="tab-pane">333333333333333333333</p> ? ? ? ? ? ? ? ? <p id="4" class="tab-pane">444444444444444444444</p> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ? ? <!--5.工具提示 --> ? ? ? ? <h1>5.bootstrap工具提示</h1> ? ? ? ? <div> ? ? ? ? <p class="text-muted"> ? ? ? ? ? ? “这是我的第一次英文访问,很抱歉它不够严谨,但是我不得不这么做,不只因为采访时间限制，更因为我面对的是卡梅隆，这个人喜爱挑战、从无畏惧，他也希望别人如此，他可以原谅不完美，但他无法接受一个人不去努力接近自己的极限。” ――<a href="#" data-toggle="tooltip" title="aaaaaaaa">柴静</a>《看见》专访卡梅隆?
? ? ? ? ? ? </p> ? ? ? ? ? ? <button type="button" class="btn btn-default" data-toggle="tooltip" title="123" data-placement="right" data-animation="true">0.0</button> ? ? ? ? </div> ? ? ? ? <script> $(function () { ? $('[data-toggle="tooltip"]').tooltip() }) </script> ? ? ? ? <!--6.弹出提示 ?--> ? ? ? ? <h1>6.bootstrap弹出提示 </h1> ? ? ? ? <div> ? ? ? ? <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" data-animation="true" data-title="abc" data-content="jjjjjj" data-trigger="hover">弹出提示</button> ? ? ? ? </div> ? ? ? ? <script> $(function(){ $('[data-toggle="popover"]').popover() }) </script> ? ? ? ? <!--7.通知消息 --> ? ? ? ? <h1>7.bootstrap通知消息</h1> ? ? ? ? <div> ? ? ? ? <div class="alert alert-warning fade in"> ? ? ? ? ? ? <button class="close" data-dismiss="alert" aria-hidden="true">×</button> ? ? ? ? ? ? ? ? <strong>警告！</strong><small>啊啊啊啊啊啊啊啊啊</small> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="alert alert-danger fade in"> ? ? ? ? ? ? <button class="close" data-dismiss="alert" aria-hidden="true">×</button> ? ? ? ? ? ? ? ? <h4>Oh snap! You got an error!</h4> ? ? <p>Change this and that and try again. Duis mollis,est non commodo luctus,nisi erat porttitor ligula,eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> ? ? <p> ? ? ? ? ? ? ? ? <button type="button" class="btn btn-primary">ok</button> ? ? ? ? ? ? ? ? ? ? <button type="button" class="btn btn-info">baocun</button> ? ? ? ? ? ? ? ? </p> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ? ? <!--8.按钮 --> ? ? ? ? <h1>8.bootstrap按钮</h1> ? ? ? ? <div> ? ? ? ? <button id="k" type="button" class="btn btn-primary" data-loading-text="deng wo 3 miao">wait</button> ? ? ? ? <button type="button" class="btn btn-primary" data-toggle="button">单独开关</button> ? ? ? ? ? ? <div class="btn-group" data-toggle="buttons-checkbox"> ? ? ? ? ? ? <button type="button" class="btn btn-primary">1</button> ? ? ? ? ? ? ? ? <button type="button" class="btn btn-primary">2</button> ? ? ? ? ? ? ? ? <button type="button" class="btn btn-primary">3</button> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="btn-group" data-toggle="buttons"> ? ? ? ? ? ? <label class="btn btn-primary"> ? ? ? ? ? ? ? ? <input type="radio" name="options" id="1">1 ? ? ? ? ? ? ? ? </label> ? ? ? ? ? ? ? ? <label class="btn btn-primary"> ? ? ? ? ? ? ? ? <input type="radio" name="options" id="2">2 ? ? ? ? ? ? ? ? </label> ? ? ? ? ? ? ? ? <label class="btn btn-primary"> ? ? ? ? ? ? ? ? <input type="radio" name="options" id="4">4 ? ? ? ? ? ? ? ? </label> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ? ? <script> $(function () { ? $('#k').on('click',function () { ? ? var btn = $(this).button('loading'); ? ? setTimeout(function (){ ? ? ? btn.button('reset') ? ? },3000) ? }) }) </script> ? ? ? ? <!--9.折叠 --> ? ? ? ? <h1>9.bootstrap折叠</h1> ? ? ? ? <div id="pp" class="panel-group"> ? ? ? ? <div class="panel panel-default"> ? ? ? ? ? ? <div class="panel-heading"> ? ? ? ? ? ? ? ? <h4 class="panel-title"> ? ? ? ? ? ? ? ? ? ? <a role="button" data-toggle="collapse" data-parent="#pp" href="#col11">collapse11</a> ? ? ? ? ? ? ? ? ? ? </h4> ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? <div id="col11" class="panel-collapse collapse"> ? ? ? ? ? ? ? ? <div class="panel-body"> ? ? ? ? ? ? ? ? ? ? ddddddddddddddddddddddd ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="panel panel-danger"> ? ? ? ? ? ? <div class=" panel-heading"> ? ? ? ? ? ? ? ? <h4 class="panel-title"> ? ? ? ? ? ? ? ? ? ? <a data-toggle="collapse" href="#collapse22" role="button" data-parent="pp">collapse22</a> ? ? ? ? ? ? ? ? ? ? </h4> ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? <div id="collapse22" class="panel-collapse collapse"> ? ? ? ? ? ? ? ? <div class="panel-body"> ? ? ? ? ? ? ? ? ? ? ssssssssssssssssssssssssss ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="panel panel-warning"> ? ? ? ? ? ? <div class=" panel-heading"> ? ? ? ? ? ? ? ? <h4 class="panel-title"> ? ? ? ? ? ? ? ? ? ? <a data-toggle="collapse" href="#collapse33" role="button" data-parent="pp">collapse33</a> ? ? ? ? ? ? ? ? ? ? </h4> ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? <div id="collapse33" class="panel-collapse collapse"> ? ? ? ? ? ? ? ? <div class="panel-body"> ? ? ? ? ? ? ? ? ? ? ssssssssssssssssssssssssss ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ? ? <!--10.轮播--> ? ? ? ? <h1>10.bootstrap轮播</h1> ? ? ? ? <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" class=""></li> ? ? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li> ? ? ? ? ? ? </ol> ? ? ? ? ? ? <div class="carousel-inner"> ? ? ? ? ? ? ? <div class="item active"> ? ? ? ? ? ? ? ? <img alt="First slide" src="images/a1.jpg"> ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? <div class="item"> ? ? ? ? ? ? ? ? <img alt="Second slide" src="images/a2.jpg"> ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? <div class="item"> ? ? ? ? ? ? ? ? <img alt="Third slide" src="images/a3.jpg"> ? ? ? ? ? ? ? </div> ? ? ? ? ? ? </div> ? ? ? ? ? ? <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> ? ? ? ? ? ? ? <span class="glyphicon glyphicon-chevron-left"></span> ? ? ? ? ? ? </a> ? ? ? ? ? ? <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> ? ? ? ? ? ? ? <span class="glyphicon glyphicon-chevron-right"></span> ? ? ? ? ? ? </a> ? ? ? ? ? </div> ? ? ? ? <script> $("carousel-example-generic").carousel('cycle'); </script> ? ? ? ? <!--11.输入提醒 --> ? ? ? ? <h1><a href="typehead.html">11.bootstrap输入提醒 </a><small style="color:red">(typehead.html)</small></h1> ? ? ? ?? ? ? </div> </body> </html> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |