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

随机推荐

vb.net
vb.net 教程: https://www.yiibai.com/vb.net/vb.net_overview.html vb.net 教程 https://www.w3cschool.cn/vb_ ...
Resin安装配置
在linux下安装Resin过程整理下载Resin, http://caucho.com/products/resin/download#download 检查JDK是否安装,环境是否配置 ...
camelcase-hankerrank
int camelcase(string s) { int cnt=0; int a; for(int i=0;i<s.size();i++) { a=s[i]; if(65<=a& ...
SpringMVC和Struts2区别比较
区别1: Struts2 的核心是基于一个Filter即StrutsPreparedAndExcuteFilterSpringMvc的核心是基于一个Servlet即DispatcherServlet( ...
python 基础之python的六大标准数据类型
一:Number 数字类型(int float bool complex) 1.整型: (正整数 0 负整数)#(1)二进制用0b表示intvar = 0b1010print(intvar)pr ...
windows攻击实验
实验目的:使用Metaspoit攻击MS08-067,提交正确得到远程Shell过程的截图(不少于5张) 靶机:192.168.11.231 攻击机:192.168.11.131 实验步骤: 1.首先 ...
1、链表之增、删、查实现（C语言）
一.功能描述: 可以创建节点并添加到链表中.查看链表中的所有节点.并可以删除特定的节点二.代码实现 1.主函数main主要实现的是从后台键入不同的字符,执行对应的函数来实现特定的操作代码如下: in ...
使用透视表pivot_table
使用透视表pivot_table 功能:从一张大而全的表格中提取出我们需要的信息来分析 import pandas as pd unames = ['user_id', 'gender', 'age' ...
从创业者角度看《印度合伙人 Padman》后的一点感受
最近对印度电影颇有兴趣,周末在家看了<印度合伙人 Padman>.本文试着从一名创业者视角,谈谈个人的一点看法. 0.故事简介引用自 https://movie.douban.com/s ...
UHF RFID，高频RFID开发参考资料
ISO18000-6C电子标签百科 http://baike.baidu.com/item/ISO18000-6C%E7%94%B5%E5%AD%90%E6%A0%87%E7%AD%BE/80500 ...