http://v3.bootcss.com/components/ 　　组件

http://v3.bootcss.com/customize/ 　　bootstrap定制　　　　http://v3.bootcss.com/css/ 　　bootstrap全局样式

http://www.bootcss.com/p/layoutit/ 　　Bootstrap可视化布局 LayoutIt! 

http://www.bootcss.com/p/bootstrap-form-builder/ 　　Bootstrap Form Builder 在线表单构造器

http://www.ziqiangxuetang.com/bootstrap/bootstrap-tutorial.html 　　教程

http://expo.bootcss.com/ 　　优站精选　　2015-11-30

http://www.cssmoban.com/tags.asp?page=3&n=Bootstrap　　网上的一些模板　　2015-11-30

http://www.hello-code.com/blog/Bootstrap/201602/5890.html　　Bootstrap教程- Table 表格行实现多行同时拖拽效果（稍后阅读）　　2016-2-23

http://bbs.csdn.net/topics/391915765　　整理了一下bootstrap整体构架图　　2016-3-16

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <!-- jquery库 -->
  7. <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  8. <!-- bootstrap库 -->
  9. <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  10. <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  11. </head>
  12. <body>
  13. <div class="container">
  14.     <div class="row">
  15.         <div class="col-md-6">sss</div>
  16.         <div class="col-md-6">sss</div>
  17.     </div>
  18. </div>
  19. </body>
  20. </html>

布局：

  1. .col-xs-    .col-sm-    .col-md-    .col-lg-
  2. <div class="container">
  3.     <div class="row">
  4.         <div class="col-md-6">sss</div>
  5.         <div class="col-md-6">sss</div>
  6.     </div>
  7. </div>
  8. <div class="container">
  9.     <div class="row">
  10.         <div class="col-md-3 col-md-offset-3">sss</div>
  11.     <div class="col-md-3">sss</div>
  12.     </div>
  13. </div>

列表：

  1. <ul class="list-unstyled">
  2.   <li>列表1111111</li>
  3.   <li>列表1111111</li>
  4. </ul>
  5.  
  6. <ul class="list-inline">
  7.   <li>列表2222222</li>
  8.   <li>列表2222222</li>
  9. </ul>
  10.  
  11. <dl class="dl-horizontal">
  12.   <dt>列表33333</dt>
  13.   <dd>列表33333</dd>
  14. </dl>

TABLE：

  1. <table class="table"><tr><th>表头</th><th>表头</th></tr><tr><td>table</td><td>&nbsp;</td></tr></table>
  2. <table class="table table-striped"><tr><th>表头</th><th>表头</th></tr><tr><td>table-striped</td><td>&nbsp;</td></tr></table>
  3. <table class="table table-bordered"><tr><th>表头</th><th>表头</th></tr><tr><td>table-bordered</td><td>&nbsp;</td></tr></table>
  4. <table class="table table-condensed"><tr><th>表头</th><th>表头</th></tr><tr><td>table-condensed</td><td>&nbsp;</td></tr></table>
  5. <div class="table-responsive">
  6.     <table class="table"><tr><td>啊啊啊</td></tr></table>
  7. </div>

 这是一个不依赖bootstrap的<TABLE>：　　2016-6-2

  1. <style type="text/css">
  2. .table1 td{border:1px solid #ececec;padding:5px;vertical-align:top;}
  3. .table1 {border-collapse:collapse;border-spacing:0;}
  4. </style>
  5. <table class="table1">
  6.     <tr><td>aa</td><td>aa</td><td>aa</td></tr>
  7.     <tr><td>aa</td><td>aa</td><td>aa</td></tr>
  8. </table>

按钮、按钮组：

  1. <a href="" class="btn btn-primary">primary</a>
  2. <a href="" class="btn btn-default">default</a>
  3. <a href="" class="btn btn-success">success</a>
  4. <a href="" class="btn btn-info">info</a>
  5. <a href="" class="btn btn-warning">warning</a>
  6. <a href="" class="btn btn-danger">danger</a>
  7. <hr>
  8. <a href="" class="btn btn-lg btn-primary">大按钮</a>
  9. <a href="" class="btn btn-lg btn-default">大按钮</a>
  10. <a href="" class="btn btn-primary">普通按钮</a>
  11. <a href="" class="btn btn-default">普通按钮</a>
  12. <a href="" class="btn btn-sm btn-primary">小按钮</a>
  13. <a href="" class="btn btn-sm btn-default">小按钮</a>
  14. <a href="" class="btn btn-xs btn-primary">超小型按钮</a>
  15. <a href="" class="btn btn-xs btn-default">超小型按钮</a>
  1. btn-group-lg , btn-group-sm  , btn-group-xs
  2. <div class="btn-group btn-group-lg">
  3.     <button type="button" class="btn btn-default">左</button>
  4.     <button type="button" class="btn btn-default">中</button>
  5.     <button type="button" class="btn btn-default">右</button>
  6. </div>
  1. <div class="btn-group-vertical">
  2.     <button type="button" class="btn btn-default">上</button>
  3.     <button type="button" class="btn btn-default">中</button>
  4.     <button type="button" class="btn btn-default">下</button>
  5. </div>
  1. <div class="btn-group">
  2.   <button type="button" class="btn btn-default">1</button>
  3.   <button type="button" class="btn btn-default">2</button>
  4.  
  5.   <div class="btn-group">
  6.     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  7.       Dropdown
  8.       <span class="caret"></span>
  9.     </button>
  10.     <ul class="dropdown-menu">
  11.       <li><a href="#">Dropdown111111</a></li>
  12.       <li><a href="#">Dropdown222222</a></li>
  13.     </ul>
  14.   </div>
  15.  
  16. </div>

表单、输入框：

  1. <div class="input-group">
  2.   <span class="input-group-addon">姓名</span>
  3.   <input type="text" class="form-control" placeholder="Username">
  4. </div>
  5.  
  6. <div class="input-group">
  7.     <span class="input-group-addon">性别</span>
  8.     <span class="form-control">
  9.         <input type="radio" name="sex">男
  10.         <input type="radio" name="sex">女
  11.     </span>
  12. </div>
  1. <div class="btn-group" data-toggle="buttons">
  2.     <label class="btn btn-primary active"><input type="radio" name="sex" value="男">男</label>
  3.     <label class="btn btn-primary"><input type="radio" name="sex" value="女">女</label>
  4. </div>
  1. <form class="form-inline">
  2. <!-- 在同一行内 -->
  3.     <input type="text" name="abc" value="" class="form-control">
  4.     <input type="submit" value="提交" class="btn btn-primary">
  5. </form>
  1. <!-- 内联表单 -->
  2. <form class="form-inline" role="form">
  3.     <div class="form-group">
  4.         <label class="sr-only" for="email22">Email</label>
  5.         <input type="email" class="form-control" id="email22" placeholder="Enter email">
  6.     </div>
  7.     <div class="checkbox">
  8.         <label><input type="checkbox"> Remember me</label>
  9.     </div>
  10.     <button type="submit" class="btn btn-primary">Sign in</button>
  11. </form>
  1. <!-- 水平排列的表单 -->
  2. <form class="form-horizontal" role="form">
  3. <div class="form-group">
  4.     <label for="email33" class="col-sm-2 control-label">Email</label>
  5.     <div class="col-sm-10">
  6.         <input type="email" class="form-control" id="email33" placeholder="Email">
  7.     </div>
  8. </div>
  9. <div class="form-group">
  10.     <div class="col-sm-offset-2 col-sm-10">
  11.         <div class="checkbox">
  12.         <label><input type="checkbox"> Remember me</label>
  13.         </div>
  14.     </div>
  15. </div>
  16. <div class="form-group">
  17.     <div class="col-sm-offset-2 col-sm-10">
  18.         <button type="submit" class="btn btn-primary">Sign in</button>
  19.     </div>
  20. </div>
  21. </form>

搜索框：

  1. <div class="input-group" style="width:200px;margin:0 auto;">
  2.     <input type="text" class="form-control" placeholder="手机..." maxlength="11" >
  3.     <div class="input-group-btn">
  4.       <button type="submit" class="btn btn-primary">
  5.          <span class="glyphicon glyphicon-search"></span>
  6.       </button>
  7.     </div>
  8. </div>

正文导航按钮：

  1. <div class="btn-group buttons">
  2.     <a class="btn btn-primary" href="add.html"><span class="glyphicon glyphicon-plus"></span>添加</a>
  3.     <a class="btn btn-default" href="list.html"><span class="glyphicon glyphicon-align-justify"></span>列表</a>
  4. </div>
  1. <!--[if lt IE 9]>
  2.       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  3.       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  4. <![endif]-->

http://www.bootcss.com

http://www.bootcss.com/p/bootstrap-datetimepicker/ 　　Bootstrap日期时间选择器 DateTime Picker 　　http://www.58img.com/framework/813

http://www.bootcss.com/p/bootstrap-wysiwyg/ 　　为Bootstrap定制的微型所见即所得（What you see is what you get）富文本编辑器

阅读

http://www.58img.com/framework/1229 　　Bootstrap,Foundation,Pure优劣对比总结！

!!!常用bootstrap代码的更多相关文章

  1. less 经典范例 bootstrap 的 less 版本 常用 less 代码

    1. bootstrap 的 less 版本 2.less 文件分布 /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011 ...

  2. legend3---lavarel常用操作代码

    legend3---lavarel常用操作代码 一.总结 一句话总结: 要自己总结一下常用代码,这样才方便,也才有收获 1.路由示例:Route::get('/login','Home\Login\L ...

  3. 工作中总结的常用PHP代码

    [目录] ◆PHP常用的代码 ◆HTML常用代码 [值传递 和 引用传递] [单例模式] [魔术常量] [代码调试(自定义一个简单的debug函数)] [thinkphp多表查询] [获取客户端IP地 ...

  4. IOS开发效率之为Xcode添加常用的代码片段

    IOS开发效率之为Xcode添加常用的代码片段 原文地址:http://blog.csdn.net/pingchangtan367/article/details/30041285 tableview ...

  5. IOS开发－OC学习－常用功能代码片段整理

    IOS开发-OC学习-常用功能代码片段整理 IOS开发中会频繁用到一些代码段,用来实现一些固定的功能.比如在文本框中输入完后要让键盘收回,这个需要用一个简单的让文本框失去第一响应者的身份来完成.或者是 ...

  6. 记录C#常用的代码片段

    时间一久,常用的代码会有点忘记,还是贴在这里方便查找! 1.将信息写入文件中 //将字符串写入到文本中 void writeToText(string msg) { try { msg = DateT ...

  7. SAP FI CO模块常用事务代码

                                                                                                        ...

  8. Bootstrap 代码

    [Bootstrap 代码] Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种 ...

  9. 73种网页常用Javascript代码

    73种网页常用Javascript代码 转载自:前端丶灵魂工程师   1.后退 前进  <input type="button" value="后退" o ...

随机推荐

  1. 实验三 CC2530平台上CC2530平台上定时器组件的

    实验三 CC2530平台上CC2530平台上定时器组件的TinyOS编程 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生初步掌握CC2530定时器的PWM功能,及其TinyOS ...

  2. 前端小白第一次使用redux存取数据练习

    在学习了redux基本教程后,课程参考如下网址:https://www.redux.org.cn/docs/introduction/CoreConcepts.html,开始着手练习 1.首先编写一个 ...

  3. 简单尝试利用维控LeviStudioU的一栈缓冲区溢出漏洞

    这是别人给我发的,让我分析一下,看能否写出exp.只怪自己水平不够,最后没能写出exp,以下为自己的分析思路 环境为win10 pro x64 英文版(10.0.16299) 默认安全配置 一.漏洞分 ...

  4. 像使用数据库一样使用xml

    目录 xml简介 语言结构 tinyxml 下载tinyxml 应用实例 tinyxml的封装 封装源码 实际应用 xml简介 XML 没什么特别的.它仅仅是纯文本而已.有能力处理纯文本的软件都可以处 ...

  5. php使用fastdfs

    php的服务器地址:10.10.1.2 fastdfs tracker地址:10.15.1.2 fastdfs storage地址:10.16.1.2 将fastdfs的源码上传到php所在服务器,进 ...

  6. GraphQL搭配MongoDB入门项目实战

    什么是GraphQL GraphQL 是一种面向 API 的查询语言.在互联网早期,需求都以 Web 为主,那时候数据和业务需求都不复杂,所以用 RestAPI 的方式完全可以满足需求.但是随着互联网 ...

  7. 30天学会绘画 (Mark Kistler 著)

    第一课 球形 (已看) 第二课 重叠的球 (已看) 第三课 更多排列的球 (已看) 第四课 立方体 (已看) 第五课 空心立方体 (已看) 第六课 堆放的桌子 (已看) 第七课 堆放更多的立方体 (已 ...

  8. [随笔][胡思乱想][唠叨][web server]

    nginx是一个webserver,最基本的功能是发送静态的文件.类似于apache2的webserver,主要的功能就是响应请求,做出响应. 所说的服务器是安装了服务器软件的物理机,专用的服务器或者 ...

  9. Python assert(断言)

    Python assert(断言)可以分别后面的判断是否正确,如果错误会报错 示例: a = 1 assert type(a) is int print('No problem') 输出结果: No ...

  10. webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

    vue 项目 npm run dev 运行时报错: npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config b ...