• !!!常用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="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优劣对比总结!

  • 相关阅读:
    编写你的应用程序(二)、原生客户端模块
    编写你的应用程序(一)、应用结构
    checkpoint机制,show engine innodb status
    InnoDB关键特性,innodb_old_blocks_time,锁,内存管理,latch争用
    Innodb引擎,MySQL修改参数
    MySQL数据库体系结构
    IT行业数据库分析
    生成一个千万行的表
    范式小知识
    MySQL触发器
  • 原文地址:https://www.cnblogs.com/qq21270/p/3790635.html
Copyright © 2020-2023  润新知