!!!常用bootstrap代码

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<!-- jquery库 -->

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- bootstrap库 -->

<link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-6">sss</div>

        <div class="col-md-6">sss</div>

    </div>

</div>

</body>

</html>

布局：

.col-xs-    .col-sm-    .col-md-    .col-lg-

<div class="container">

    <div class="row">

        <div class="col-md-6">sss</div>

        <div class="col-md-6">sss</div>

    </div>

</div>

<div class="container">

    <div class="row">

        <div class="col-md-3 col-md-offset-3">sss</div>

    <div class="col-md-3">sss</div>

    </div>

</div>

列表：

<ul class="list-unstyled">

  <li>列表1111111</li>

  <li>列表1111111</li>

</ul>

<ul class="list-inline">

  <li>列表2222222</li>

  <li>列表2222222</li>

</ul>

<dl class="dl-horizontal">

  <dt>列表33333</dt>

  <dd>列表33333</dd>

</dl>

TABLE：

<table class="table"><tr><th>表头</th><th>表头</th></tr><tr><td>table</td><td>&nbsp;</td></tr></table>

<table class="table table-striped"><tr><th>表头</th><th>表头</th></tr><tr><td>table-striped</td><td>&nbsp;</td></tr></table>

<table class="table table-bordered"><tr><th>表头</th><th>表头</th></tr><tr><td>table-bordered</td><td>&nbsp;</td></tr></table>

<table class="table table-condensed"><tr><th>表头</th><th>表头</th></tr><tr><td>table-condensed</td><td>&nbsp;</td></tr></table>

<div class="table-responsive">

    <table class="table"><tr><td>啊啊啊</td></tr></table>

</div>

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

<style type="text/css">

.table1 td{border:1px solid #ececec;padding:5px;vertical-align:top;}

.table1 {border-collapse:collapse;border-spacing:0;}

</style>

<table class="table1">

    <tr><td>aa</td><td>aa</td><td>aa</td></tr>

    <tr><td>aa</td><td>aa</td><td>aa</td></tr>

</table>

按钮、按钮组：

<a href="" class="btn btn-primary">primary</a>

<a href="" class="btn btn-default">default</a>

<a href="" class="btn btn-success">success</a>

<a href="" class="btn btn-info">info</a>

<a href="" class="btn btn-warning">warning</a>

<a href="" class="btn btn-danger">danger</a>

<hr>

<a href="" class="btn btn-lg btn-primary">大按钮</a>

<a href="" class="btn btn-lg btn-default">大按钮</a>

<a href="" class="btn btn-primary">普通按钮</a>

<a href="" class="btn btn-default">普通按钮</a>

<a href="" class="btn btn-sm btn-primary">小按钮</a>

<a href="" class="btn btn-sm btn-default">小按钮</a>

<a href="" class="btn btn-xs btn-primary">超小型按钮</a>

<a href="" class="btn btn-xs btn-default">超小型按钮</a>

btn-group-lg , btn-group-sm  , btn-group-xs

<div class="btn-group btn-group-lg">

    <button type="button" class="btn btn-default">左</button>

    <button type="button" class="btn btn-default">中</button>

    <button type="button" class="btn btn-default">右</button>

</div>

<div class="btn-group-vertical">

    <button type="button" class="btn btn-default">上</button>

    <button type="button" class="btn btn-default">中</button>

    <button type="button" class="btn btn-default">下</button>

</div>

<div class="btn-group">

  <button type="button" class="btn btn-default">1</button>

  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">

    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

      Dropdown

      <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

      <li><a href="#">Dropdown111111</a></li>

      <li><a href="#">Dropdown222222</a></li>

    </ul>

  </div>

</div>

表单、输入框：

<div class="input-group">

  <span class="input-group-addon">姓名</span>

  <input type="text" class="form-control" placeholder="Username">

</div>

<div class="input-group">

    <span class="input-group-addon">性别</span>

    <span class="form-control">

        <input type="radio" name="sex">男

        <input type="radio" name="sex">女

    </span>

</div>

<div class="btn-group" data-toggle="buttons">

    <label class="btn btn-primary active"><input type="radio" name="sex" value="男">男</label>

    <label class="btn btn-primary"><input type="radio" name="sex" value="女">女</label>

</div>

<form class="form-inline">

<!-- 在同一行内 -->

    <input type="text" name="abc" value="" class="form-control">

    <input type="submit" value="提交" class="btn btn-primary">

</form>

<!-- 内联表单 -->

<form class="form-inline" role="form">

    <div class="form-group">

        <label class="sr-only" for="email22">Email</label>

        <input type="email" class="form-control" id="email22" placeholder="Enter email">

    </div>

    <div class="checkbox">

        <label><input type="checkbox"> Remember me</label>

    </div>

    <button type="submit" class="btn btn-primary">Sign in</button>

</form>

<!-- 水平排列的表单 -->

<form class="form-horizontal" role="form">

<div class="form-group">

    <label for="email33" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

        <input type="email" class="form-control" id="email33" placeholder="Email">

    </div>

</div>

<div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

        <div class="checkbox">

        <label><input type="checkbox"> Remember me</label>

        </div>

    </div>

</div>

<div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

        <button type="submit" class="btn btn-primary">Sign in</button>

    </div>

</div>

</form>

搜索框：

<div class="input-group" style="width:200px;margin:0 auto;">

    <input type="text" class="form-control" placeholder="手机..." maxlength="11" >

    <div class="input-group-btn">

      <button type="submit" class="btn btn-primary">

         <span class="glyphicon glyphicon-search"></span>

      </button>

    </div>

</div>

正文导航按钮：

<div class="btn-group buttons">

    <a class="btn btn-primary" href="add.html"><span class="glyphicon glyphicon-plus"></span>添加</a>

    <a class="btn btn-default" href="list.html"><span class="glyphicon glyphicon-align-justify"></span>列表</a>

</div>

<!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

<![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代码的更多相关文章

less 经典范例 bootstrap 的 less 版本常用 less 代码
1. bootstrap 的 less 版本 2.less 文件分布 /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011 ...
legend3---lavarel常用操作代码
legend3---lavarel常用操作代码一.总结一句话总结: 要自己总结一下常用代码,这样才方便,也才有收获 1.路由示例:Route::get('/login','Home\Login\L ...
工作中总结的常用PHP代码
[目录] ◆PHP常用的代码 ◆HTML常用代码 [值传递和引用传递] [单例模式] [魔术常量] [代码调试(自定义一个简单的debug函数)] [thinkphp多表查询] [获取客户端IP地 ...
IOS开发效率之为Xcode添加常用的代码片段
IOS开发效率之为Xcode添加常用的代码片段原文地址:http://blog.csdn.net/pingchangtan367/article/details/30041285 tableview ...
IOS开发－OC学习－常用功能代码片段整理
IOS开发-OC学习-常用功能代码片段整理 IOS开发中会频繁用到一些代码段,用来实现一些固定的功能.比如在文本框中输入完后要让键盘收回,这个需要用一个简单的让文本框失去第一响应者的身份来完成.或者是 ...
记录C#常用的代码片段
时间一久,常用的代码会有点忘记,还是贴在这里方便查找! 1.将信息写入文件中 //将字符串写入到文本中 void writeToText(string msg) { try { msg = DateT ...
SAP FI CO模块常用事务代码
...
Bootstrap 代码
[Bootstrap 代码] Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种 ...
73种网页常用Javascript代码
73种网页常用Javascript代码转载自:前端丶灵魂工程师 1.后退前进 <input type="button" value="后退" o ...

随机推荐

如何使用油猴脚本不要vip就能观看各大视频网站如腾讯，爱奇艺等的vip视频
如何使用油猴脚本不要vip就能观看各大视频网站如腾讯,爱奇艺等的vip视频首先打开谷歌商店(这里需要fq,如不能fq的小伙伴请看上面写的Chrome怎么访问外网) 搜索Tampermonkey,点击 ...
Address already in use: JVM_Bind:80 异常的解决办法
java.net.BindException: Address already in use: JVM_Bind:80 异常的解决办法今天遇见了这个端口被占用问题然后各种百度先是说用命令 ne ...
随笔：关于Class.getSimpleName()
最近学习过程中,遇到了Class.getSimpleName()这个方法,就搜索了一些资料: API定义: Class.getName():以String的形式,返回Class对象的"实体& ...
jsp(待改)
##JSP 1.指令作用:用于配置JSP页面,导入资源文件 *书写格式 <%@ 指令名称属性1=值1,属性2=值2 ...%> *分类: *page :配置JSP页面的 #属性: c ...
Appium环境搭建——安卓模拟器（AVD）调试 2-运行Apk失败点的总结
如何优化AVD模拟器运行速度? 解决方法:开启IntelHAXM 查询intelhaxm是否已经开启: sc query intelhaxm 若开启成功,则如图所示若没有开启,可以通过BIOS打开, ...
AE插件:能量激光描边光效特效Saber Mac汉化版
与大家分享一款非常好用的AE插件Saber插件汉化版.videocopilot saber是一款能量激光描边光效特效AE插件,可以帮助用户制作出能量激光.传送门.霓虹灯.电流.光束.光剑等效果.小编现 ...
redis 设置分布式锁要避免死锁
1. jedis 中 setnx key value 虽然可以处理同步问题 (setnx 有返回值 1是key不存在把它设置进去,0是key已经存在了)但是 setnx设置完后程序的下一步有可能挂 ...
vue中直接修改props中的值并未给出警告，为啥？
问:vue中直接修改props中的值并未给出警告,为啥? 答:如果props传入的值是引用类型,在子组件中改变其元素,不改变引用,那么不报错: 如果是基本类型,那么在修改时浏览器控制台会有报错信息. ...
[踩坑系列]URLEncode 中对空格的编码有 “+”和“%20”两种
URL中的空格有时候被编码成%20,有时候被编码成加号+,曾经迷糊过一段时间,后来查了下资料才搞明白. 一个URL的基本组成部分包括协议(scheme),域名,端口号,路径和查询字符串(路径参数和锚点 ...
[ZZ] 深度学习三巨头之一来清华演讲了，你只需要知道这7点
深度学习三巨头之一来清华演讲了,你只需要知道这7点 http://wemedia.ifeng.com/10939074/wemedia.shtml Yann LeCun还提到了一项FAIR开发的,用于 ...