兼容手机建站（一）

Posted on 2015-05-10 20:57  小蕊同学  阅读(129)  评论(0)  编辑  收藏  举报
首先引入
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  2. <meta name="viewport" content="width=device-width,intial-scale=1">
  3. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  4. <script src="js/jquery-1.9.1.min.js"></script>
  5. <script src="js/bootstrap.min.js"></script>
col 共12列，

手机网站叫囊式下拉菜单
  1. <div class="container">
  2. 	<div class="row">
  3.     <!-- 手机网站胶囊式下拉菜单-->
  4.      <ul class="nav nav-pills" style="margin:20px auto;">
  5.     <li class="active dropdown">
  6.     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  7.     首页<span class="caret"></span>
  8.     </a>
  9.     <ul class="dropdown-menu">
  10.     <li><a href="#">首页一</a></li>
  11.       <li><a href="#">首页二</a></li>
  12.      <li><a href="#">首页二</a></li>
  13.       <li><a href="#">首页二</a></li>   
  14.     </ul>
  15.     </li>
  17.     <li><a href="#">公司新闻</a></li>
  18.     <li><a href="#">产品中心</a></li>
  19.      <li><a href="#">公司简介</a></li>
  20.     </ul>
  21. 	</div>
  22. </div>
分裂式下拉菜单
  1. <div class="container">
  2. 	<div class="row">
  3.     <!-- 手机网站分裂式下拉菜单-->
  4.     <div class="btn-group">
  5.   <button type="button" class="btn btn-danger">首页</button>
  6.   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  7.    <span class="caret"></span>
  8.   </button>
  9.     <ul class="dropdown-menu" role="menu">
  10.     <li><a href="#">首页一</a></li>
  11.     </ul>
  12.     </div>


  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width,intial-scale=1">
  8. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  9. <script src="js/jquery-1.9.1.min.js"></script>
  10. <script src="js/bootstrap.min.js"></script>
  11. <style>
  12. div ul{margin:0 auto;}
  13. .left{margin-left:20px;}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="container">
  20. 	<div class="row">
  21.     <!-- 手机网站分裂式下拉菜单-->
  22.     <div class="btn-group">
  23.   <button type="button" class="btn btn-danger">首页</button>
  24.   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  25.    <span class="caret"></span>
  26.   </button>
  27.     <ul class="dropdown-menu" role="menu">
  28.     <li><a href="#">首页一</a></li>
  29.     </ul>
  30.     </div>
  31.     
  32.     
  33.     
  34.    <div class="btn-group left">
  35.   <button type="button" class="btn btn-danger">公司新闻</button>
  36.   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  37.    <span class="caret"></span>
  38.   </button>
  39.     <ul class="dropdown-menu" role="menu">
  40.     <li><a href="#">新闻一</a></li>
  41.     </ul>
  42.     </div>
  43.     
  44.   
  45. 	</div>
  46. </div>
  47. </body>
  48. </html>
手机网站折叠菜单
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width,intial-scale=1">
  8. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  9. <script src="js/jquery-1.9.1.min.js"></script>
  10. <script src="js/bootstrap.min.js"></script>
  11. <style>
  13. </style>
  14. </head>
  15. <body>
  16. <div class="container">
  17. 	<div class="row">
  18.     <!-- 手机网站折叠菜单-->
  19.   <nav class="navbar navbar-default" role="navigation">
  20.   <!-- Brand and toggle get grouped for better mobile display -->
  21.   <div class="navbar-header">
  22.     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  23.       <span class="icon-bar"></span>
  24.       <span class="icon-bar"></span><!-- 表示右边的线-->
  25.       <span class="icon-bar"></span>  
  26.     </button>
  27.     <a class="navbar-brand" href="#">公司首页</a>
  28.   </div>
  30.   <!-- Collect the nav links, forms, and other content for toggling -->
  31.   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  32.     <ul class="nav navbar-nav">
  33.       <li class="active"><a href="#">产品中心</a></li>
  34.       <!-- 鼠标点过有阴影效果-->
  35.       <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">
  36.         联系我们</a></li>
  37.       <!-- 下拉菜单闻class="caret显示倒三角-->
  38.       <li class="dropdown">
  39.         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  40.         公司新闻 <b class="caret"></b></a>
  41.         <ul class="dropdown-menu">
  42.           <li><a href="#">5</a></li>
  43.           <li><a href="#">4</a></li>
  44.            <li class="divider"></li><!-- 显示一条线-->
  45.           <li><a href="#">3</a></li>
  46.           <li><a href="#">2</a></li>
  47.           <li class="divider"></li>
  48.           <li><a href="#">1</a></li>
  49.         </ul>
  50.       </li>
  51.     </ul>
  52.   </div><!-- /.navbar-collapse -->
  53. </nav>
  55.     
  56.   
  57. 	</div>
  58. </div>
  59. </body>
  60. </html>
 <!-- 手机网站折叠菜单 navbar-fixed-top navbar-inverse反色导航栏固定在顶部-->

      <!-- 有条斜杠的breadcrumb线-->
<ol class="breadcrumb">
    <li><a href="#">home</a></li>
     <li><a href="#">阿</a></li>
     <li>fff</li>
     </ol>
分页效果pagination-sm  pagination-lg分页显示大小
  1. <div class="container">
  2. 	<div class="row">
  3. 	<ul class="pagination">
  4.     <li class="disabled"><a href="#">&laquo;</a></li>
  5.     <li class="active"><a href="#">1</a></li>
  6.     <li><a href="#">2</a></li>
  7.     <li><a href="#">3</a></li>
  8.     <li><a href="#">4</a></li>
  9.     <li><a href="#">5</a></li>
  10.     <li><a href="#">6</a></li>
  11.     <li><a href="#">&raquo;</a></li>
  12.     </ul>
  13. 	</div>
  14. </div>
翻页效果上一页下一页
  1. <div class="container">
  2. 	<div class="row">
  3.     <!-- 左边previous  右边next   左箭头&larr;  右箭头&rarr;-->
  4.     <ul class="pager">
  5.     <li class="previous disabled"><a href="#">&larr;上一页</a></li>
  6.     <li class="next"><a href="#">下一页&rarr;</a></li>
  7.     </ul>
  9. 	</div>
  10. </div>

显示未读条数的徽章
  1. <div class="container">
  2. 	<div class="row">
  3.     <a href="#">未读的信息数 <span class="badge">55</span></a>
  4. 	</div>
  5. </div>
  1. <div class="container">
  2. 	<div class="row">
  3.     <div class="col-xs-3">
  4. <ul class="nav nav-pills nav-stacked">
  5. <li class="active">
  6.     <a href="#">
  7.     <span class="badge pull-right">4</span>
  8.      Messages
  9.     </a>
  10. </li>
  11. </ul>
  12.     </div>
  13.     </div>
  14. </div>

  1. <div class="container">
  2. 	<div class="row">
  3.     <div class="jumbotron">
  4.     <h1>hello,word!</h1>
  5.     <p><a class="btn btn-primary btn-lg" role="button">learn more</a></p>
  6.     </div>
  7.      </div>
  8. </div>

  1. <div class="container">
  2. 	<div class="row">
  3.     <div class="page-header">
  4.     <h1>标题<small>小标题</small></h1>
  5.     </div>
  6.      </div>
  7. </div>
    
缩略图
  1. <div class="container">
  2. 	<div class="row">
  3.     <div class="col-xs-6 col-md-3">
  4.     <a href="#" class="thumbnail">
  5.     <img src="images/pic1.jpg" alt="美丽的风景">
  6.     </a>
  7.     </div>
  8.      </div>
  9. </div>

警告框
  1. <div class="container">
  2. 	<div class="row">
  3.     <!--不可以关闭的框-->
  4.     <div class="alert alert-info">Heads up! This alert needs your attention, but it's not super important.</div>
  5.     <div class="alert alert-success">ddddddddddddddd</div>
  6.     <div class="alert alert-warning">ddddddddddddddd</div>
  7.     <!--可以关闭的框-->
  8.     <div class="alert alert-danger alert-dismissable">
  9.     <button type="button" class="close" data-dismiss="alert" 
  10.     aria-hidden="true">&times;</button>
  11.     <strong>警告！</strong>
  12.     ddddddddddddddd</div>
  13.     </div>
  14.   </div>
  15.      </div>
  16. </div>
导航条
  1. <div class="container">
  2. 	<div class="row">
  3.     <!-- progress-striped 带有样式的进度条-->
  4.     <div class="progress progress-striped active">
  5.     <div class="progress-bar progress-bar-success" role="progressbar"
  6.     aria-valuemin="0" aria-valuemax="50" style="width:20%;"  
  7.     >
  8.     <span class="sr-only">40% Complete (success)</span>
  9.     </div>
  10.     
  11.     </div>
  12.     
  13.      </div>
  14. </div>
无序列表
  1. <div class="container">
  2. 	<div class="row">
  3.     <ul class="list-group">
  4.     <li class="list-group-item">Cras justo odio</li>
  5.     </ul>
  6.      </div>
  7. </div>
  1. <div class="container">
  2. 	<div class="row">
  3.     <ul class="list-group">
  4.     <li class="list-group-item">
  5.     <span class="badge">14</span>
  6.     Cras justo odio</li>
  7.     </ul>
  8.      </div>
  9. </div>

链接条目
  1. <div class="container">
  2. 	<div class="row">
  3.         <a href="#" class="list-group-item active">
  4.      Cras justo odio
  5.     </a>
  6.     </div>
  7. </div>

  1. <div class="container">
  2. 	<div class="row">
  3.         <div class="list-group">
  4.         <a href="#" class="list-group-item active">
  5.         <h4 class="list-group-item-heading">List group item heading</h4>
  6.         <p class="list-group-text">List group item heading</p>
  7.         </a>
  8.         </div>
  9.     </div>
  10. </div>

  1. <div class="container">
  2. 	<div class="row">
  3.        <div class="panel panel-default">
  4.        <div class="panel-heading">titile titile titile</div>
  5.        <div class="panel-body">
  6.          Basic panel example
  7.        </div>
  8.        <div class="panel-footer">zhushi</div>
  9.        </div>
  10.     </div>
  11. </div>

表格面板
  1. <div class="container">
  2. 	<div class="row">
  3.        <div class="panel panel-default">
  4.        <table class="table table-bordered">
  5.           <thead>
  6.             <tr>
  7.               <th>#</th>
  8.               <th>First Name</th>
  9.               <th>Last Name</th>
  10.               <th>Username</th>
  11.             </tr>
  12.           </thead>
  13.           <tbody>
  14.             <tr>
  15.               <td>1</td>
  16.               <td>Mark</td>
  17.               <td>Otto</td>
  18.               <td>@mdo</td>
  19.             </tr>
  20.             <tr>
  21.               <td>2</td>
  22.               <td>Jacob</td>
  23.               <td>Thornton</td>
  24.               <td>@fat</td>
  25.             </tr>
  26.             <tr>
  27.               <td>3</td>
  28.               <td>Larry</td>
  29.               <td>the Bird</td>
  30.               <td>@twitter</td>
  31.             </tr>
  32.           </tbody>
  33.         </table>
  34.             </div>
  35. </div>

  1. <div class="container">
  2. 	<div class="row">
  3.       <div class="well">Look, I'm in a well!</div>
  4.        <div class="well well-lg">Look, I'm in a well!</div>
  5.             </div>
  6. </div>

圆角图片
  1. <div class="container">
  2. 	<div class="row">
  3.     <img src="images/pic1.jpg"  class="img-rounded img-responsive">
  4.      <img src="images/pic1.jpg"  class="img-circle img-responsive">
  5.       <img src="images/pic1.jpg"  class="img-thumbnail img-responsive">
  6. </div>








Copyright © 2024 小蕊同学
Powered by .NET 8.0 on Kubernetes