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

随机推荐

Python学习笔记，day4
Python学习第四天一.装饰器函数调用顺序: 其他高级语言类似,Python 不允许在函数未声明之前,对其进行引用或者调用高阶函数: 满足下列条件之一就可成函数为高阶函数某一函数当做参数传入 ...
The listener supports no services
问题描述 sql> lsnrctl start 提示: The listener supports no services The command completed successfully ...
关于微软小娜Cortana（安卓版）
关于微软小娜,大家都知道是微软发布的全球第一款个人智能助理.它“能够了解用户的喜好和习惯”,“帮助用户进行日程安排.问题回答等”.今天我就向大家介绍一下安卓版的小娜. 首先,和电脑版的小娜一样,安卓版 ...
Javascript 2.9
对象:属性和方法属性:隶属于某个特定对象的变量方法:只有某个特定对象才能调用的函数对象和方法都用"."来访问: Object.property Object.method() 由 ...
postman测试请求参数中文乱码问题
用IDEA调试代码时,用postman测试请求url,发现post或者get请求中参数是中文的话,后台获取的参数是乱码, 一般两个方面发送请求的一方:postman的问题接受请求的一方:tomca ...
Excel常用公式
转载请注明来源"ExcelHome"并保留原文链接.固定链接:http://www.excelhome.net/lesson/article/excel/1897.html 1.I ...
c++ 创建线程以及参数传递
//创建线程,传递参数 DWORD dwThreadID = ; HANDLE hThread = CreateThread(NULL, , MonitorThreadFunction, , & ...
Rocketlab公司火箭Electron介绍
http://https://en.wikipedia.org/wiki/Rocket_Lab https://www.rocketlabusa.com/ Rocketlab(火箭实验室)是一家致力于 ...
MongoDB Sharding分片 shell 脚本
#!/bin/sh CONFIG_NAME=$ CONFIG_PORT=$ SERIAL_NUM=$ STORAGE_HOME=$ if [ ! -n "$CONFIG_NAME" ...
[ZZ] 如何在多版本anaconda python环境下转换spyder
https://www.zhihu.com/people/alexwhu/answers 使用anaconda的话,可以参考以下步骤: 1.打开anaconda navigator,选择左侧的环境菜单 ...