!!!常用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 ...

随机推荐

如何将maven配置在eclipse上
如何将maven配置在eclipse上安装maven:(需要确保你已经安装了jdk) 去apache官网下载maven:http://maven.apache.org/download.cgi 下载 ...
Nginx配置之负载均衡、限流、缓存、黑名单和灰度发布
一.Nginx安装(基于CentOS 6.5) 1.yum命令安装 yum install nginx –y(若不能安装,执行命令yum install epel-release) 2. 启动.停止和 ...
《python for data analysis》第九章，数据聚合与分组运算
# -*- coding:utf-8 -*-# <python for data analysis>第九章# 数据聚合与分组运算import pandas as pdimport nump ...
Linux上使用源代码安装软件
做web开发的时候老是把颜色码忘记了，特地来写个博客，以后方便找。
对照表英文代码形像颜色 HEX格式 RGB格式 LightPink 浅粉色 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩红 # ...
[JAVA]字节数组流
import java.io.*; public class ByteArrayStream { public static void main(String[] args) { byte[] dat ...
python实现将字符串中以大写字母开头的单词前面添加“_”下划线
在工作中写测试用例代码生成的时候,函数命令考虑采用参数文件的名称来命名,但是发现文件命名是驼峰的写写法,所以想按照字符串中的大写字母做分割,每个单词前面添加下划线,主要考虑采用正则的模式来匹配,替换然 ...
Spring Boot 全局异常处理
Spring Boot版本 1.5 @ControllerAdvice public class GlobalExceptionHandler extends ResponseEntityExcept ...
盘点海口最好吃的西餐厅top10
Top 1:主厨的餐桌餐厅地址:龙华区海秀路九号民航宾馆一楼大堂主厨的餐桌Chef's Table是三位志同道合的大厨一起携手开办的西餐厅,正宗的西式料理.浓郁的浪漫气息,都是Chef's Tab ...
【转】/etc/rc.d/rc与/etc/rc.d/init.d的关系介绍
/etc/rc.d/init.d这个目录下的脚本就类似与windows中的注册表,在系统启动的时候执行.程序运行到这里(init进程读取了运行级别),相信从命名的角度大家也能猜到该运行/etc/rc. ...