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

随机推荐

Ubuntu18.04下make menuconfig缺少ncurses库
kent@hu:~/work/03-kernel/linux-4.15.1$ make menuconfig *** Unable to find the ncurses libraries or t ...
CS萌新的汇编学习之路(其实是老师作业呵呵哒)Learning of Assembly Language
第一节课学习汇编语言,做笔记,做笔记 1.概念首先是汇编语言这门课程的定义以及对于学习高级语言.深入理解计算机系统的作用软硬件接口机器语言汇编语言高级语言关系机器语言和汇编语言可移植性差 ...
2019CVTE技术支持软件编程2
题目:有8位数密码,加密规则如下:第一步取最后一位数:第二部将倒数第二位数放到最前形成一个新数,再取新数最后一位,以此循环取完所有数为止:如98698426,密码为64982689,时间复杂度为O(N ...
使用iSCSI服务部署网络存储
在<canvas>上绘制img（drawImage()）时需要注意的事
<canvas>标签相当于是一个画布,css决定画布的样式(这块画布的背景颜色.大小等),脚本(一般使用JavaScript)就是画笔,我们可以在这个画布上绘制线条.形状.文字.图片等. ...
numpy 和tensorflow 中的乘法
矩阵乘法:tf.matmul() np.dot() ,@ 逐元素乘法:tf.multiply() np.multiply()
Django学习笔记之URL与视图cookie和session
cookie和session cookie:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了 ...
[IDEA]IDEA设置注释模板
IDEA的注释模板有类注释模板和方法注释模板两种,下面分别介绍: 一.类注释模板菜单路径:File->Settings->Editor->File and Code Templat ...
spring事务详解（三）源码详解
系列目录 spring事务详解(一)初探事务 spring事务详解(二)简单样例 spring事务详解(三)源码详解 spring事务详解(四)测试验证 spring事务详解(五)总结提高一.引子 ...
1、IT人思维之投资开篇 - IT人思维之投资
在IT圈中,很多人的认识就只在于工作中获取收益,这个观点是狭隘的,本身就不符合投资领域的内容.所以,在工作之余,笔者就对投资领域的内容进行的分析和收集整理相关的投资方面的内容,一方面对笔者自己的投资方 ...