zoukankan      html  css  js  c++  java
  • bootstrap例子

    <!DOCTYPE html> 
    <html> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    </head> 
    <body> 
    
    
    <div class="container"> 
    
    <ul class="nav nav-tabs"> 
    <li ><a href="http://www.hao123.com">Home</a></li> 
    <li class="active"><a href="#">Profile</a></li> 
    <li><a href="#">Messages</a></li> 
    </ul> 
    
    <div class="jumbotron"> 
    <h1>Hello, world!</h1> 
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> 
    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> 
    </div> 
    
    <a href="#">42<span class="empty">42</span></a> 
    <div class="page-header"> 
    <h1>案例:从堆叠到水平排列</h1> 
    </div> 
    <div class="row"> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    </div> 
    <h1></h1> 
    <div class="row"> 
    <div class="col-md-8">.col-md-8</div> 
    <div class="col-md-4">.col-md-4</div> 
    </div> 
    <h1></h1> 
    <div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    </div> 
    <h1></h1> 
    <div class="row"> 
    <div class="col-md-6">.col-md-6</div> 
    <div class="col-md-6">.col-md-6</div> 
    </div> 
    
    <div class="row"> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
    <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="..."> 
    <div class="caption"> 
    <h3>Thumbnail label</h3> 
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
    </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
    <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="..."> 
    <div class="caption"> 
    <h3>Thumbnail label</h3> 
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
    </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
    <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="..."> 
    <div class="caption"> 
    <h3>Thumbnail label</h3> 
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
    </div> 
    </div> 
    </div> 
    </div> 
    
    <div class="alert alert-success">Well done! You successfully read this important alert message.</div> 
    <div class="alert alert-info">Well done! You successfully read this important alert message.</div> 
    <div class="alert alert-warning">Well done! You successfully read this important alert message.</div> 
    <div class="alert alert-danger">Well done! You successfully read this important alert message.</div> 
    
    
    <div class="alert alert-warning alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
    <strong>Warning!</strong> Best check yo self, you're not looking too good. 
    </div> 
    
    <div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style=" 60%;"> 
    <span class="sr-only">60% Complete</span> 
    </div> 
    </div> 
    
    <div class="progress"> 
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style=" 70%"> 
    <span class="sr-only">40% Complete (success)</span> 
    </div> 
    </div> 
    
    <div class="list-group"> 
    <a href="#" class="list-group-item active"> 
    <h4 class="list-group-item-heading">List group item heading</h4> 
    <p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> 
    </a> 
    <a href="#" class="list-group-item"> 
    <h4 class="list-group-item-heading">List group item heading</h4> 
    <p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> 
    </a> 
    <a href="#" class="list-group-item"> 
    <h4 class="list-group-item-heading">List group item heading</h4> 
    <p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> 
    </a> 
    </div> 
    
    <div class="panel panel-primary"> 
    <div class="panel-heading">Panel heading without title</div> 
    <div class="panel-body"> 
    Panel content 
    </div> 
    </div> 
    <div class="panel panel-success"> 
    <div class="panel-heading">Panel heading without title</div> 
    <div class="panel-body"> 
    Panel content 
    </div> 
    </div> 
    <div class="panel panel-info"> 
    <div class="panel-heading">Panel heading without title</div> 
    <div class="panel-body"> 
    Panel content 
    </div> 
    </div> 
    <div class="panel panel-warning"> 
    <div class="panel-heading">Panel heading without title</div> 
    <div class="panel-body"> 
    Panel content 
    </div> 
    </div> 
    
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
    </button> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    One fine body… 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 
    </div> 
    </div> 
    
    <script type="text/javascript"> 
    function test() 
    { 
    $('#myModal').modal('show'); 
    alert(1); 
    } 
    </script> 
    <button onClick="test()" class="btn btn-primary btn-lg"> 
    Launch demo modal 
    </button> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    One fine body… 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 
    </div> 
    </div> 
    
    
    <ul class="nav nav-tabs"> 
    <li><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab">Profile</a></li> 
    <li><a href="#messages" data-toggle="tab">Messages</a></li> 
    <li><a href="#settings" data-toggle="tab">Settings</a></li> 
    <li class="dropdown"> 
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Test<b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
    <li ><a data-toggle="tab" href="#AAA">@tag</a></li> 
    <li ><a data-toggle="tab" href="#BBB">@mag</a></li> 
    </ul> 
    </li> 
    </ul> 
    
    <div class="tab-content"> 
    <div class="tab-pane active" id="home">1..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> 
    <div class="tab-pane" id="profile">2..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> 
    <div class="tab-pane" id="messages">3..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> 
    <div class="tab-pane" id="settings">4..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> 
    <div class="tab-pane" id="AAA">A..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> 
    <div class="tab-pane" id="BBB">B..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> 
    </div> 
    </div> 
    
    <div class="container" style="margin-top:40px;"> 
    <div class="bs-example tooltip-demo"> 
    <div class="bs-example-tooltips"> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">左侧Tooltip</button> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">上方Tooltip</button> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">下方Tooltip</button> 
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">右侧Tooltip</button> 
    </div> 
    </div> 
    <input type="text" id="testt" rel="tooltip" title="123456" /> 
    <a href="#" data-toggle="tooltip" title="Default tooltip" >dsafsdfasdfasdfasd</a> 
    </div> 
    
    
    
    
    </div> 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    
    
    </body> 
    </html>
  • 相关阅读:
    [Android Studio 权威教程]Windows下安装Android Studio
    iOS:获取图片Alpha图片
    MFC 直线 虚线 折线 圆 椭圆 矩形 弧形
    大北农董事长夫人莫云为何在美国被逮捕?
    【源代码】LinkedHashMap源代码剖析
    前端那些事儿——中文乱码,网页中文乱码,网页乱码,块元素,内联元素
    Struts2通过自己定义拦截器实现登录之后跳转到原页面
    unity3d ngui-TweenRotation-TweenPosition-TweenScale
    分析函数在数据分析中的应用
    Java Collection
  • 原文地址:https://www.cnblogs.com/liaocheng/p/4243609.html
Copyright © 2011-2022 走看看