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=" 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             /* 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=" 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=" 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=" 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=" 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=" 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--页面