Bootstrap--常用及實例合集

本文轉載自查看原文 2017-11-23 15:48 6975 Bootstrap

柵格系統

1. row必須放到container和container-fluid里面
2. 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。

列的樣式

.col-xx（lg md sm xs）-數字（1~12）

       container有一個padding是15px
       row有一個margin是-15px

       列是支持嵌套的

       列偏移： col-xx-offset-數字（1~12）

       列排序： .col-md-pull-數字 .col-md-push-數字

文本對齊類

           - .text-left
       - .text-center
       - .text-right

表單

        .form-group
       .form-inline
       .form-horizontal

表格

       .table
       .table-striped
       .table-bordered
       .table-hover
       .table-condensed

響應式表格

       <div class="table-responsive"> // table外面包裹一層div
          <table class="table">
           ...
          </table>
       </div

按鈕

       .btn
       .btn-default
       .btn-success
       .btn-warning
       .btn-danger

       .btn-lg
       .btn-sm
       .btn-xs

快速浮動

- .pull-left
- .pull-right

清除樣式

- .clearfix

Bootstrap3居中處理

水平居中

           - .center-block 不涉及到列的居中本質上就是 margin: 0 auto
           讓那個標簽居中就把它寫在哪個標簽的樣式類中

           - 我們自定義的居中在涉及到列的居中時使用
               .col-centered {
                  float: none;
                  margin: 0 auto;
               }
           - 文本類居中或者display: inline
               .text-center

垂直居中

           .vertical-center {
              display: flex;
              align-items: center;
           }


           用在父標簽中，讓子塊級標簽垂直居中

Bootstrap組件

圖標

           span標簽，里面加上樣式類
           glyphicon glyphicon-piggy-bank

       下拉菜單：后面我們就要用到bootstrap.js --> 之前還要引用jQuery.js

按鈕組

           .btn-group

           .btn-toolbar

           尺寸

       分列式下拉菜單按鈕


       .css 和.min.css的區別是：
           .min.css是壓縮版的，用於生產環境的，因為它把多余的空格都去掉了，體積很小
           .css 是沒有壓縮的

           我們現在是開發階段，用哪個都可以

       .min.js
       .js
           同上


       js文件我們通常放在body標簽里面的最下面
       除非你的js代碼就必須在文檔加載之前運行，這個時候要放在head標簽里面

<ul class="nav nav-tabs nav-stacked" role="tablist">
          <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
          <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
          <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
       </ul>
       

       
       <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">這里是主頁的內容</div>
          <div role="tabpanel" class="tab-pane" id="profile">這里是簡介頁面的內容</div>
          <div role="tabpanel" class="tab-pane" id="messages">這里是消息頁面的內容</div>
       </div>
       


       .nav-tabs       --> tab式
       .nav-pills       --> 膠囊式
       .nav-justified   --> 兩端對齊

導航條

        .navbar-btn
       .navbar-text
       .navbar-left .navbar-right --> 在導航條里面用左右浮動的化需要使用這倆個
       .navbar-link

   **導航條不需要放在.container里面**

       .navbar-fixed-top            --> 固定在頂部
       如果使用了上面固定在頂部的樣式，那么就需要給body設置padding
       body { padding-top: 70px; }

       .navbar-static-top           --> 靜止在頂部

       .navbar-inverse              --> 反色

面包屑導航/路徑導航

       <ol class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
       </ol>

   分頁


   翻頁


   標簽
       .label

   徽章
       微信未讀消息
       個人中心通知的提示

   巨幕
       鋪滿整個屏幕
           <div class="jumbotron">
               <div class="container">
                   <h1>Hello, world!</h1>
                   <p>...</p>
                   <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
               </div>
           </div>

   頁頭


   縮略圖 --> 前女友的頁面

進度條

應用場景：

           - 上傳下載加載
           - 體現步驟進度

       <div class="progress">
          <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
           60%
          </div>
       </div>

       .progress-bar-striped 條紋狀進度條
       動起來
           .active

       顏色
           .progress-bar-success
           .progress-bar-warning
           .progress-bar-info
           .progress-bar-danger

媒體對象

        .media-left
       .media-body
       .media-right

頭像的位置

           .默認
           .media-middle   --> 中間
           .media-bottom   --> 底部

列表組

外面的div加這個樣式： .list-group
里面的元素加這個樣式: .list-group-item

面板

           <div class="panel panel-default">
          <div class="panel-heading">
           <h3 class="panel-title">這里寫標題</h3>
          </div>

          <div class="panel-body">
           這里面是內容
          </div>

          <div class="panel-footer">Panel footer</div>
       </div>

模態框

        位置要放在body里面（body的直接子元素）


       彈出方式：
           1. 通過 data 屬性
               data-toggle="modal" data-target="#myModal"
           2. 通過JS代碼
               - $("#myModal").modal("show") --> 顯示出來
               - $("#myModal").modal("hide)   --> 隱藏

       模態框大小：(放在modal里面標簽上的)
           .modal-lg
           .modal-sm


       動畫效果：
           fade

       一個正經模態框：
           1. .modal-header
           2. .modal-body
           3. .modal-footer

       參數
           backdrop： true/false/'static'   --> 遮罩層的參數
           keyboard: true/false            --> 鍵盤上的ESC按鍵



       事件
           顯示之前
           顯示完
           隱藏之前
           隱藏完

           $(document).ready(function () {
           $('#myModal').on('show.bs.modal', function (e) {
               // do something...
               alert("我讓模態框顯示出來，但是它還沒來得及顯示");
           });

           $('#myModal').on('shown.bs.modal', function (e) {
               // do something...
               alert("我讓模態框顯示出來，現在它已經顯示出來了");
           })


   font awesome
       http://fontawesome.io/

       i 標簽區別於Bootstrap自帶圖標的span標簽

   sweetalert:
       https://limonte.github.io/sweetalert2/

       引用css文件和JS文件之后

       swal("標題", "內容", "success")

       Toastr

       http://www.jq22.com/yanshi476 可以查看簡單示例


       jQueryLazyLoad

bootstrap提供給的都是成型的樣式和框架，可以拿過來用然后更改一下樣式，所以很多都可以直接過去復制粘貼，當然想要自己的效果還是需要修改。

網頁的布局說白了就是一個個的盒子，想好每個盒子有多大要放什么，盒子里面是否還有盒子然后是否要分row，這樣來布局的話就好得多

以下是實例

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7     <link rel="stylesheet" href="dist/css/bootstrap.css">
  8     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
  9     <script src="dist/js/bootstrap.js"></script>
 10     <title>Title</title>
 11     <style>
 12         body {
 13             background-color: black;
 14         }
 15 
 16         .ya {
 17             background-color: white;
 18             /*border-radius: 2%;*/
 19             width: 450px;
 20             height: 250px;
 21             margin-top: 200px;
 22             margin-left: 30%;;
 23             position: fixed;
 24         }
 25 
 26         .btn-inf {
 27             color: white;
 28             background-color: black;
 29             border: black;
 30         }
 31          .btn-inf:active{
 32             color: white !important;
 33             background-color: #222222 !important;
 34             border:  black !important;
 35         }
 36          .btn-inf:link {
 37              color: white;
 38             background-color: black;
 39             border: black;
 40          }
 41 
 42         .btn-inf:hover {
 43             color: white;
 44             background-color: #333333;
 45         }
 46         .glyphicon {
 47             margin-right: 10px;
 48         }
 49         .yu{
 50             background-color:black ;
 51             color:white ;
 52         }
 53         .nuo{
 54             margin-top: 40px;
 55             margin-left:10px ;
 56         }
 57         .btn-sc{
 58             color: black;
 59             background-color: white;
 60             border: white;
 61             /*width: 300px;*/
 62             /*height: 100px;*/
 63             /*font-size: 50px;*/
 64             padding: 10px;
 65             position: fixed;
 66             top:40%;
 67             left: 40%;
 68         }
 69         .btn-sc:hover{
 70             color:white ;
 71             background-color: #5e5e5e;
 72             border: white;
 73         }
 74         .btn-lg{
 75             padding: 20px 32px;
 76             font-size: 36px;
 77             line-height: 2;
 78             border-radius: 12px;
 79         }
 80     </style>
 81 </head>
 82 <body>
 83 <div class="container ya img-rounded hidden">
 84     <form class="form-horizontal nuo novalidate">
 85         <div class="form-group" id="in1">
 86             <label for="inputEmail3" class="col-sm-2 control-label">用戶名</label>
 87 
 88             <div class="input-group col-sm-8">
 89                 <span class="glyphicon glyphicon-user input-group-addon yu"></span>
 90                 <input type="text" class="form-control" id="inputEmail3" placeholder="用戶名"
 91                        aria-describedby="inputEmail3">
 92                 <span class="glyphicon glyphicon-ok form-control-feedback hidden"  id="namer"></span>
 93                 <span class="glyphicon glyphicon-warning-sign form-control-feedback hidden"
 94                       id="namew"></span>
 95                 <span class="glyphicon glyphicon-remove form-control-feedback hidden"  id="namec"></span>
 96             </div>
 97         </div>
 98         <div class="form-group" id="in2">
 99             <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
100             <div class="input-group col-sm-8">
101                 <span class="glyphicon glyphicon-lock input-group-addon yu"></span>
102                 <input type="password" class="form-control" id="inputPassword3" placeholder="密碼">
103                 <span class="glyphicon glyphicon-ok form-control-feedback hidden"  id="pwdr"></span>
104                 <span class="glyphicon glyphicon-warning-sign form-control-feedback hidden"
105                       id="pwdw"></span>
106                 <span class="glyphicon glyphicon-remove form-control-feedback hidden" id="pwdc"></span>
107             </div>
108         </div>
109         <div class="form-group">
110             <div class="col-sm-offset-2 col-sm-8">
111                 <div class="checkbox">
112                     <label>
113                         <input type="checkbox"> 記住密碼
114                     </label>
115                 </div>
116             </div>
117         </div>
118         <div class="form-group">
119             <div class="col-sm-offset-2 col-sm-8">
120                 <a href="javascript:void(0)" class="glyphicon glyphicon-link btn btn-inf btn-block" id="bu">登錄</a>
121             </div>
122         </div>
123     </form>
124 </div>
125 <div class="tubiao">
126     <a href="javascript:void(0)" class="glyphicon glyphicon-tasks btn btn-sc btn-lg"> Login</a>
127     </div>
128 <script>
129 $("#inputEmail3").on("blur",function () {
130     zhi=$("#inputEmail3").val();
131     if (zhi.length==0){
132         $("#namew").removeClass("hidden");
133         $("#in1").addClass("has-warning")
134     }
135     if (zhi.length>15||(zhi.length<6&&zhi.length!=0)){
136         $("#namec").removeClass("hidden");
137         $("#in1").addClass("has-error")
138     }
139     if(zhi.length>=6&&zhi.length<15){
140         $("#namer").removeClass("hidden");
141         $("#in1").addClass("has-success")
142     }
143 
144 });
145 $("#inputEmail3").on("focus",function () {
146     $("#in1").removeClass("has-error");
147     $("#in1").removeClass("has-success");
148     $("#in1").removeClass("has-warning");
149     $("#namew").addClass("hidden");
150     $("#namec").addClass("hidden");
151     $("#namer").addClass("hidden");
152 });
153     $("#inputPassword3").on("blur",function () {
154     pwd=$("#inputPassword3").val();
155     if (pwd.length==0){
156         $("#pwdw").removeClass("hidden");
157         $("#in2").addClass("has-warning")
158     }
159     if (pwd.length>15||(pwd.length<6&&pwd.length!=0)){
160         $("#pwdc").removeClass("hidden");
161         $("#in2").addClass("has-error")
162     }
163     if(pwd.length>=6&&pwd.length<15) {
164         $("#pwdr").removeClass("hidden");
165         $("#in2").addClass("has-success")
166     }
167 
168 });
169     $("#inputPassword3").on("focus",function () {
170     $("#in2").removeClass("has-error");
171     $("#in2").removeClass("has-success");
172     $("#in2").removeClass("has-warning");
173     $("#pwdw").addClass("hidden");
174     $("#pwdc").addClass("hidden");
175     $("#pwdr").addClass("hidden");
176 });
177     $(".btn-sc").on("click",function () {
178          $(".btn-sc").addClass("hidden");
179         $(".ya").removeClass("hidden");
180 
181     })
182 </script>
183 </body>
184 </html>

Bootstrap--登錄校驗

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="dist/css/bootstrap.css">
 7     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
 8     <script src="dist/js/bootstrap.js"></script>
 9     <style>
10         .name{
11             margin-top: 50px;
12             margin-left: 50px;
13         }
14         .uang{
15             margin-top: 50px;
16             margin-left: 50px;
17         }
18         .c{
19             color: red;
20         }
21         .hide{
22             display: none;
23         }
24     </style>
25 </head>
26 <body>
27 <div class="name">用戶名<input type="text" class="te"><b class="c hide" id="1">用戶名過長</b><b class="c hide" id="3">用戶名過短</b><b class="c hide" id="5">請輸入用戶名</b></div>
28 <div class="name">密碼<input type="password" class="te"><b class="c hide" id="2">密碼過長</b><b class="c hide" id="4">密碼過短</b><b class="c hide" id="6">請輸入密碼</b></div>
29 <button class="uang btn btn-info">login</button>
30 <script>
31     (function (jq) {
32         function login(arg) {
33         arg.on("click",function () {
34         jq(".te").each(function () {
35         if(jq(this).val().length>7){
36             jq(this).next().removeClass("hide");
37             console.log(jq(this).next());
38             return false
39         }
40         else if (jq(this).val().length<2&&jq(this).val().length>0){
41             jq(this).next().next().removeClass("hide");
42             return false
43         }
44          else if (jq(this).val().length==0){
45             jq(this).next().next().next().removeClass("hide");
46             return false
47         }
48     })
49     });
50     jq(".te").on("focus",function () {
51         jq(this).nextAll().addClass("hide");
52          });
53     }
54     jq(document).ready(function () {
55         jq(".uang").check()
56     });
57      jq.fn.extend({
58          check:function () {
59              login(this)
60          }
61      })
62     })(jQuery);
63 
64 
65 
66 </script>
67 </body>
68 <

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7     <link rel="stylesheet" href="dist/css/bootstrap.css">
  8     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
  9     <script src="dist/js/bootstrap.js"></script>
 10     <link rel="stylesheet" href="sw-dist/sweetalert2.min.css">
 11     <script src="sw-dist/sweetalert2.js"></script>
 12     <title>信息收集</title>
 13 </head>
 14 <style>
 15     .t{
 16         height: 10px;
 17         width: 97%;
 18         border-bottom: 1px solid #e0e0e0;
 19         margin: 1.5% auto;
 20     }
 21     .tt{
 22         margin-bottom: 10px;
 23     }
 24 </style>
 25 <body>
 26 <div class="container">
 27     <div class="row">
 28         <div class="page-header">
 29   <h1>信息手機卡 <small>共三部</small></h1>
 30 </div>
 31     </div>
 32     <div class="row">
 33         <div class="progress">
 34   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 33.3%">1/3
 35     <span class="sr-only">3/1 (success)</span>
 36   </div>
 37 </div>
 38     </div>
 39     <div class="row">
 40     <div class="panel panel-primary">
 41   <div class="panel-heading">基本信息<div class="glyphicon glyphicon-pushpin pull-right"></div></div>
 42   <div class="panel-body">
 43 
 44       <form class="form-horizontal">
 45   <div class="form-group">
 46     <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
 47     <div class="col-sm-4">
 48       <input type="email" class="form-control" id="inputEmail3" placeholder="姓名">
 49     </div>
 50   </div>
 51   <div class="form-group">
 52     <label for="inputPassword3" class="col-sm-2 control-label">手機</label>
 53     <div class="col-sm-4">
 54       <input type="password" class="form-control" id="inputPassword3" placeholder="手機">
 55     </div>
 56   </div>
 57           <div class="form-group">
 58     <label for="inputEmail4" class="col-sm-2 control-label">郵箱</label>
 59     <div class="col-sm-4">
 60       <input type="email" class="form-control" id="inputEmail4" placeholder="郵箱">
 61     </div>
 62   </div>
 63           <div class="form-group">
 64     <label for="inputEmail5" class="col-sm-2 control-label">密碼</label>
 65     <div class="col-sm-4">
 66       <input type="email" class="form-control" id="inputEmail5" placeholder="密碼">
 67     </div>
 68   </div>
 69           <div class="form-group">
 70     <label for="exampleInputFile" class="col-sm-2 control-label">頭像</label>
 71     <input type="file" id="exampleInputFile" class="col-sm-10">
 72     <p class="help-block col-sm-2">只支持png、jpq、gif格式。</p>
 73   </div>
 74 
 75 </form>
 76 
 77     <div class="row">
 78         <div class="t"></div>
 79     </div>
 80     <div class="row">
 81 
 82         <form id="suiyi" class="col-sm-12 col-sm-offset-1 form-horizontal">
 83 
 84 <div class="radio ">
 85     <label for="optionsRadios1" class="col-sm-1"><strong>屬性</strong> </label>
 86   <label>
 87     <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 88     我是一個好人
 89   </label>
 90 </div>
 91 <div class="radio clearfix col-sm-offset-1">
 92   <label>
 93     <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
 94     我是一個壞人
 95   </label>
 96 </div>
 97 <div class="radio disabled col-sm-offset-1">
 98   <label>
 99     <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
100     我真不是個人
101   </label>
102 </div>
103             </form>
104 </div>
105   </div>
106 </div>
107         <button class="btn btn-success pull-right" id="kl">下一步
108         </button>
109     </div>
110 
111 </div>
112 <script>
113     $("#kl").on("click",function () {
114         swal("完成","填寫成功","success")
115     })
116 
117 </script>
118 </body>
119 
120 </html>

Bootstrap--信息收集

  1 <!DOCTYPE html>
  2 <html lang="zh-CN"><head>
  3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7   <link rel="stylesheet" href="dist/css/bootstrap.css">
  8     <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
  9     <meta name="description" content="">
 10     <meta name="author" content="">
 11     <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
 12     <link href="dist/fonts/glyphicons-halflings-regular.svg">
 13   <link href="dist/fonts/glyphicons-halflings-regular.ttf" rel="stylesheet">
 14   <link href="dist/fonts/glyphicons-halflings-regular.woff" rel="stylesheet">
 15   <link href="dist/fonts/glyphicons-halflings-regular.woff2" rel="stylesheet">
 16     <title>Dashboard Template for Bootstrap</title>
 17 
 18     <!-- Bootstrap core CSS -->
 19     <link href="Dashboard%20Temp_files/bootstrap.css" rel="stylesheet">
 20 
 21     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 22     <link href="Dashboard%20Temp_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
 23 
 24     <!-- Custom styles for this template -->
 25     <link href="Dashboard%20Temp_files/dashboard.css" rel="stylesheet">
 26 
 27     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
 28     <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 29     <script src="Dashboard%20Temp_files/ie-emulation-modes-warning.js"></script>
 30 
 31     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 32     <!--[if lt IE 9]>
 33       <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 34       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 35     <![endif]-->
 36   </head>
 37 <style>
 38   .col-centered {
 39                   float: none;
 40                   margin: 0 auto;
 41                 }
 42 </style>
 43   <body>
 44 
 45     <nav class="navbar navbar-inverse navbar-fixed-top">
 46       <div class="container-fluid">
 47         <div class="navbar-header">
 48           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 49             <span class="sr-only">Toggle navigation</span>
 50             <span class="icon-bar"></span>
 51             <span class="icon-bar"></span>
 52             <span class="icon-bar"></span>
 53           </button>
 54           <a class="navbar-brand" href="#">Project name</a>
 55         </div>
 56         <div id="navbar" class="navbar-collapse collapse">
 57           <ul class="nav navbar-nav navbar-right">
 58             <li><a href="#">Dashboard</a></li>
 59             <li><a href="#">Settings</a></li>
 60             <li><a href="#">Profile</a></li>
 61             <li><a href="#">Help</a></li>
 62           </ul>
 63           <form class="navbar-form navbar-right">
 64             <input class="form-control" placeholder="Search..." type="text">
 65           </form>
 66         </div>
 67       </div>
 68     </nav>
 69 
 70     <div class="container-fluid">
 71       <div class="row">
 72         <div class="col-sm-3 col-md-2 sidebar">
 73 
 74           <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 75   <div class="panel panel-default">
 76     <div class="panel-heading" role="tab" id="headingOne">
 77       <h4 class="panel-title">
 78         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 79           Collapsible Group Item #1
 80         </a>
 81       </h4>
 82     </div>
 83     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
 84       <div class="panel-body">
 85         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
 86       </div>
 87     </div>
 88   </div>
 89   <div class="panel panel-default">
 90     <div class="panel-heading" role="tab" id="headingTwo">
 91       <h4 class="panel-title">
 92         <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 93           Collapsible Group Item #2
 94         </a>
 95       </h4>
 96     </div>
 97     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
 98       <div class="panel-body">
 99         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
100       </div>
101     </div>
102   </div>
103   <div class="panel panel-default">
104     <div class="panel-heading" role="tab" id="headingThree">
105       <h4 class="panel-title">
106         <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
107           Collapsible Group Item #3
108         </a>
109       </h4>
110     </div>
111     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
112       <div class="panel-body">
113         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
114       </div>
115     </div>
116   </div>
117 </div>
118 
119         </div>
120         <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
121 
122 
123           <div class="panel panel-default">
124   <div class="panel-heading">Panel heading</div>
125   <div class="panel-body">
126     <div class="row">
127     <form class="navbar-form navbar-left col-sm-12" role="search">
128   <div class="form-group">
129     <input type="text" class="form-control" placeholder="搜索">
130   </div>
131   <button type="submit" class="btn btn-info">搜索</button>
132 
133 </form>
134 <button type="submit" class="btn btn-success pull-right" style="margin-right: 15px;margin-top:8px " data-toggle="modal" data-target="#myModal">添加</button>
135       </div>
136     <div class="modal fade j" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
137   <div class="modal-dialog j" role="document">
138     <div class="modal-content j">
139       <div class="modal-header">
140         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
141         <h4 class="modal-title" id="myModalLabel">信息填寫</h4>
142       </div>
143       <div class="modal-body">
144           <form action="">
145         <div class="form-group">
146     <label for="d1">姓名</label>
147     <input type="text" class="hui form-control" id="d1">
148             </div>
149         <div class="form-group">
150     <label for="d2">郵箱</label>
151     <input type="text" class="hui form-control" id="d2">
152             </div>
153             <div class="form-group">
154     <label for="d3">愛好</label>
155     <input type="text" class="hui form-control" id="d3">
156             </div>
157 <div class="modal-footer">
158         <input type="reset" class="an btn btn-default" data-dismiss="modal" value="Close">
159         <input type="reset" class="anq btn btn-primary" value="確定添加" data-dismiss="modal" >
160       </div>
161               </form>
162       </div>
163 
164     </div>
165   </div>
166 </div>
167 
168      <div class="table-responsive">
169             <table class="table table-striped table-bordered">
170               <thead>
171                 <tr>
172                   <th class="col-sm-1">#</th>
173                   <th>姓名</th>
174                   <th>郵箱</th>
175                   <th>愛好</th>
176                   <th>操作</th>
177                 </tr>
178               </thead>
179               <tbody>
180                 <tr>
181                   <td class="col-sm-1">1,001</td>
182                   <td>Lorem</td>
183                   <td>ipsum</td>
184                   <td>dolor</td>
185                   <td class="col-sm-4 "><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
186                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
187                 </tr>
188                 <tr>
189                   <td class="col-sm-1">1,002</td>
190                   <td>amet</td>
191                   <td>consectetur</td>
192                   <td>adipiscing</td>
193                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
194                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
195                 </tr>
196                 <tr>
197                   <td class="col-sm-1">1,003</td>
198                   <td>Integer</td>
199                   <td>nec</td>
200                   <td>odio</td>
201                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
202                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
203                 </tr>
204                 <tr>
205                   <td class="col-sm-1">1,003</td>
206                   <td>libero</td>
207                   <td>Sed</td>
208                   <td>cursus</td>
209                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
210                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
211                 </tr>
212                 <tr>
213                   <td class="col-sm-1">1,004</td>
214                   <td>dapibus</td>
215                   <td>diam</td>
216                   <td>Sed</td>
217                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
218                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
219                 </tr>
220                 <tr>
221                   <td class="col-sm-1">1,005</td>
222                   <td>Nulla</td>
223                   <td>quis</td>
224                   <td>sem</td>
225                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
226                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
227                 </tr>
228                 <tr>
229                   <td class="col-sm-1">1,006</td>
230                   <td>nibh</td>
231                   <td>elementum</td>
232                   <td>imperdiet</td>
233                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
234                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
235                 </tr>
236                 <tr>
237                   <td class="col-sm-1">1,007</td>
238                   <td>sagittis</td>
239                   <td>ipsum</td>
240                   <td>Praesent</td>
241                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
242                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
243                 </tr>
244                 <tr>
245                   <td class="col-sm-1">1,008</td>
246                   <td>Fusce</td>
247                   <td>nec</td>
248                   <td>tellus</td>
249                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
250                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
251                 </tr>
252                 <tr>
253                   <td class="col-sm-1">1,009</td>
254                   <td>augue</td>
255                   <td>semper</td>
256                   <td>porta</td>
257                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
258                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
259                 </tr>
260                 <tr>
261                   <td class="col-sm-1">1,010</td>
262                   <td>massa</td>
263                   <td>Vestibulum</td>
264                   <td>lacinia</td>
265                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
266                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
267                 </tr>
268                 <tr>
269                   <td class="col-sm-1">1,011</td>
270                   <td>eget</td>
271                   <td>nulla</td>
272                   <td>Class</td>
273                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
274                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
275                 </tr>
276                 <tr>
277                   <td class="col-sm-1">1,012</td>
278                   <td>taciti</td>
279                   <td>sociosqu</td>
280                   <td>ad</td>
281                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
282                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
283                 </tr>
284                 <tr>
285                   <td class="col-sm-1">1,013</td>
286                   <td>torquent</td>
287                   <td>per</td>
288                   <td>conubia</td>
289                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
290                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
291                 </tr>
292                 <tr>
293                   <td class="col-sm-1">1,014</td>
294                   <td>per</td>
295                   <td>inceptos</td>
296                   <td>himenaeos</td>
297                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
298                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
299                 </tr>
300                 <tr>
301                   <td class="col-sm-1">1,015</td>
302                   <td>sodales</td>
303                   <td>ligula</td>
304                   <td>in</td>
305                   <td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">刪除</button>
306                             <button class="w btn btn-success glyphicon glyphicon-pencil">編輯</button></td>
307                 </tr>
308               </tbody>
309             </table>
310           </div>
311     <nav aria-label="Page navigation" class=" pull-right">
312   <ul class="pagination">
313     <li>
314       <a href="#" aria-label="Previous">
315         <span aria-hidden="true">&laquo;</span>
316       </a>
317     </li>
318     <li><a href="#">1</a></li>
319     <li><a href="#">2</a></li>
320     <li><a href="#">3</a></li>
321     <li><a href="#">4</a></li>
322     <li><a href="#">5</a></li>
323     <li>
324       <a href="#" aria-label="Next">
325         <span aria-hidden="true">&raquo;</span>
326       </a>
327     </li>
328   </ul>
329 </nav>
330         </div>
331       </div>
332     </div>
333   </div>
334     </div>
335 
336 
337     <!-- Bootstrap core JavaScript
338     ================================================== -->
339     <!-- Placed at the end of the document so the pages load faster -->
340     <script src="Dashboard%20Temp_files/jquery.js"></script>
341     <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
342     <script src="Dashboard%20Temp_files/bootstrap.js"></script>
343     <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
344     <script src="Dashboard%20Temp_files/holder.js"></script>
345     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
346     <script src="Dashboard%20Temp_files/ie10-viewport-bug-workaround.js"></script>
347   <script>
348 
349   </script>
350 
351 </body></html>

Bootstrap--頁面管理

  1 <!DOCTYPE html>
  2 <html lang="zh-CN"><head>
  3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7     <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
  8     <meta name="description" content="">
  9     <meta name="author" content="">
 10     <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
 11     <link rel="stylesheet" href="dist/css/bootstrap.min.css">
 12 
 13     <title>Off Canvas Template for Bootstrap</title>
 14 
 15     <!-- Bootstrap core CSS -->
 16     <link href="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/bootstrap.css" rel="stylesheet">
 17 
 18     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 19     <link href="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
 20 
 21     <!-- Custom styles for this template -->
 22     <link href="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/offcanvas.css" rel="stylesheet">
 23 
 24     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
 25     <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 26     <script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/ie-emulation-modes-warning.js"></script>
 27 
 28     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 29     <!--[if lt IE 9]>
 30       <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 31       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 32     <![endif]-->
 33   </head>
 34 <style>
 35     .ty{
 36         margin-top: -20px;
 37     }
 38     .he{
 39         width: 50px;
 40         border-bottom:  #9d9d9d solid ;
 41         border-width: 1px;
 42         margin-left: 45%;
 43     }
 44     .hi{
 45         width: 50px;
 46         border-bottom:  #9d9d9d solid ;
 47         border-width: 1px;
 48         margin-left: 48%;
 49     }
 50     .hc{
 51         width: 50px;
 52         border-bottom:  #9d9d9d solid ;
 53         border-width: 1px;
 54         margin-left: 48.3%;
 55     }
 56     .tx{
 57         padding: 5px;
 58     }
 59     .xia{
 60         margin-top: 30px;
 61         margin-left: 30px;
 62     }
 63 </style>
 64   <body>
 65     <nav class="navbar navbar-fixed-top navbar-inverse container-fluid">
 66       <div class="container">
 67           <div class="row">
 68         <div class="navbar-header">
 69           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 70             <span class="sr-only">Toggle navigation</span>
 71             <span class="icon-bar"></span>
 72             <span class="icon-bar"></span>
 73             <span class="icon-bar"></span>
 74           </button>
 75           <a class="navbar-brand" href="#">OldBoy</a>
 76         </div>
 77         <div id="navbar" class="collapse navbar-collapse">
 78           <ul class="nav navbar-nav col-sm-10">
 79             <li class="active"><a href="#">Python學院</a></li>
 80             <li><a href="#about">Linux學院</a></li>
 81             <li ><a href="#contact">好好學習</a></li>
 82             <li class="dropdown pull-right">
 83           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">聯系我們<span class="caret"></span></a>
 84           <ul class="dropdown-menu">
 85             <li><a href="#">Action</a></li>
 86             <li><a href="#">Another action</a></li>
 87             <li><a href="#">Something else here</a></li>
 88             <li role="separator" class="divider"></li>
 89             <li><a href="#">Separated link</a></li>
 90             <li role="separator" class="divider"></li>
 91             <li><a href="#">One more separated link</a></li>
 92           </ul>
 93         </li>
 94           </ul>
 95         </div><!-- /.nav-collapse -->
 96       </div><!-- /.container -->
 97           </div>
 98     </nav><!-- /.navbar -->
 99    <div class="container-fluid">
100         <div class="row">
101        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
102   <!-- Indicators -->
103   <ol class="carousel-indicators">
104     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
105     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
106     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
107   </ol>
108 
109   <!-- Wrapper for slides -->
110   <div class="carousel-inner" role="listbox">
111     <div class="item active">
112       <img src="信息.png" alt="...">
113       <div class="carousel-caption">
114 
115       </div>
116     </div>
117     <div class="item">
118       <img src="博客.png" alt="...">
119       <div class="carousel-caption">
120 
121       </div>
122     </div>
123 
124   </div>
125 
126   <!-- Controls -->
127   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
128     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
129     <span class="sr-only">Previous</span>
130   </a>
131   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
132     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
133     <span class="sr-only">Next</span>
134   </a>
135 </div>
136 
137            </div>
138    </div>
139      <div class="container-fluid">
140         <div class="row">
141        <div class="jumbotron">
142     <div class="page-header text-center">
143   <h2>Bootstrap能做什么</h2>
144         <div class="hi"></div>
145         <small>網站首頁、網站后台、手機頁面</small>
146 </div>
147        </div>
148         </div>
149          <div class="row">
150              <div class="pull-left col-sm-6 col-sm-offset-1">
151                  <img src="登錄.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail">
152              </div>
153              <div class="page-header text-center col-sm-5 pull-right">
154             <h2  style="margin-top: 100px">使用Bootstrap搭建的</h2>
155                  <h2>登錄頁面</h2>
156         <div class="he"></div>
157         <small>使用表單、按鈕組件搭建</small>
158          </div>
159      </div>
160          <div class="row  jumbotron">
161              <div class="pull-right col-sm-5">
162                  <img src="信息.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail">
163              </div>
164              <div class="page-header text-center col-sm-6 pull-left">
165             <h2 style="margin-top: 100px">使用Bootstrap搭建的</h2>
166                  <h2>信息采集單</h2>
167         <div class="he"></div>
168         <small>使用表單、頁頭、面板組件、進度條組件搭建</small>
169          </div>
170      </div>
171 
172          <div class="row">
173              <div class="pull-left col-sm-6 col-sm-offset-1">
174                  <img src="管理.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail">
175              </div>
176              <div class="page-header text-center col-sm-5 pull-right">
177             <h2  style="margin-top: 100px">使用Bootstrap搭建的</h2>
178                  <h2>管理后台</h2>
179         <div class="he"></div>
180         <small>使用導航條、表格、面板、分頁等組件搭建</small>
181          </div>
182      </div>
183 
184          <div class="row  jumbotron">
185              <div class="pull-right col-sm-5">
186                  <img src="博客.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail">
187              </div>
188              <div class="page-header text-center col-sm-6 pull-left">
189             <h2 style="margin-top: 100px">使用Bootstrap搭建的</h2>
190                  <h2>博客頁面</h2>
191         <div class="he"></div>
192         <small>使用自定義導航、自定義分欄和分頁等組件搭建</small>
193          </div>
194      </div>
195 
196          <div class="row">
197              <div class="page-header text-center col-sm-12" style="margin-top: 30px;margin-bottom: 30px">
198             <h2  >心路歷程</h2>
199 
200         <div class="hc"></div>
201                  <h5>天啦嚕</h5>
202         <small >復制粘貼</small>
203          </div>
204          </div>
205 
206         <div class="row">
207     <div class="col-xs-6 col-md-3">
208      <a href="#" class="thumbnail">
209          <img src="1.jpg">
210     </a>
211   </div>
212             <div class="col-xs-6 col-md-3">
213      <a href="#" class="thumbnail">
214          <img src="1112.jpg">
215     </a>
216   </div>
217             <div class="col-xs-6 col-md-3">
218      <a href="#" class="thumbnail">
219          <img src="333.jpg">
220     </a>
221   </div>
222 
223             <div class="col-xs-6 col-md-3">
224      <a href="#" class="thumbnail">
225          <img src="44.jpg">
226     </a>
227   </div>
228             <div class="text-center"><h4>天啦嚕</h4></div>
229 </div>
230          <div class="row jumbotron tx">
231              <div class=" text-center col-sm-6 col-md-3 pull-left">
232             <h2>所以說</h2>
233         <small>學好Bootstrap真的很重要</small>
234          </div>
235              <div class="col-sm-6">
236                  <button class="btn btn-success xia">我知道了</button>
237              </div>
238 
239          </div>
240 
241      </div>
242 
243 
244 
245 
246     <!-- Bootstrap core JavaScript
247     ================================================== -->
248     <!-- Placed at the end of the document so the pages load faster -->
249     <script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/jquery.js"></script>
250     <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
251     <script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/bootstrap.js"></script>
252     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
253     <script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/ie10-viewport-bug-workaround.js"></script>
254     <script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/offcanvas.js"></script>
255   
256 
257 </body></html>

Bootstrap--頁面

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於bootstrap--表格（tr的各種樣式）關於bootstrap--表單（水平表單）關於bootstrap--表格（table的各種樣式）關於bootstrap--列表（ol、ul）關於bootstrap--表格（table的各種樣式） BootStrap--媒體查詢用法 Bootstrap--全局css樣式之圖片 Bootstrap--組件之Glyphicons字體圖標 Bootstrap--全局CSS樣式之排版 Bootstrap--面包屑路徑導航