1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4. <title>Bootstrap 101 Template</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  7. <link href="css/bootstrap-responsive.css" rel="stylesheet">
  8. <link href="css/docs.css" rel="stylesheet">
  9. <link href="css/google-code-prettify.css" rel="stylesheet">
  10.  
  11. </head>
  12. <body>
  13.     <div class="container">
  14.         <div class="row">
  15.             <div class="span3 bs-docs-sidebar">
  16.                 <ul class="nav nav-list bs-docs-sidenav">
  17.                     <li><a href="#overview"><i class="icon-chevron-right"></i>
  18.                             预览</a></li>
  19.                     <li><a href="#transitions"><i class="icon-chevron-right"></i>
  20.                             过渡</a></li>
  21.                     <li><a href="#tableview"><i class="icon-chevron-right"></i>
  22.                             表格</a></li>
  23.                     <li><a href="#dropdowns"><i class="icon-chevron-right"></i>
  24.                             下拉菜单</a></li>
  25.                     <li><a href="#scrollspy"><i class="icon-chevron-right"></i>
  26.                             Scrollspy</a></li>
  27.                     <li><a href="#tabs"><i class="icon-chevron-right"></i> 选项卡</a></li>
  28.                     <li><a href="#tooltips"><i class="icon-chevron-right"></i>
  29.                             工具提示</a></li>
  30.                     <li><a href="#popovers"><i class="icon-chevron-right"></i>
  31.                             Popover</a></li>
  32.                     <li><a href="#alerts"><i class="icon-chevron-right"></i>
  33.                             警示</a></li>
  34.                     <li><a href="#buttons"><i class="icon-chevron-right"></i>
  35.                             按钮</a></li>
  36.                     <li><a href="#collapse"><i class="icon-chevron-right"></i>
  37.                             折叠</a></li>
  38.                     <li><a href="#carousel"><i class="icon-chevron-right"></i>
  39.                             旋转木马</a></li>
  40.                     <li><a href="#typeahead"><i class="icon-chevron-right"></i>
  41.                             预输入</a></li>
  42.                     <li><a href="#affix"><i class="icon-chevron-right"></i> 附件</a></li>
  43.                 </ul>
  44.             </div>
  45.  
  46.             <div class="span9">
  47.                 <div class="row-fluid">
  48.                     <h1>内容栏</h1>
  49.                 </div>
  50.                 <section id="overview">
  51.                     <div class="row-fluid">
  52.                         <p class="muted">
  53.                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;故事讲述<b>汤姆</b>从小就是个玩牌高手，所以他的好朋友，<i>肥皂、艾迪和培根</i>决定各凑两万五千英镑，让汤姆去参加一场黑社会高额赌金的牌局。
  54.  
  55.                         </p>
  56.                         <div class="text-right">
  57.                             <small>来自 <cite title="《娱乐周刊》">《娱乐周刊》</cite></small>
  58.                         </div>
  59.  
  60.                         <p class="text-warning">
  61.                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>汤姆</strong>从头到尾不知情，其实整个赌金根本就是个大骗局。于是汤姆不但输光所有的钱，还倒欠赌场主人五十万英镑。汤姆在一个星期内不能还清，他和他朋友们的手指和他老爸的酒吧都将不保。汤姆一伙想尽各种可能的凑钱办法，最后决定抢劫隔壁的毒犯。
  62.                         </p>
  63.  
  64.                         <p class="text-error">
  65.                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;而隔壁的毒犯同时也正计划抢劫他们的毒品供应商。汤姆一伙的计划听起来简单，但执行时却状况百出。突发的状况让这伙人不由得越陷越深。事情变得十分复杂，场面变得十分混乱。几个小混混发现整个事件已经发展到超出他们的想象，于是极力想逃脱，但是已经……
  66.                         </p>
  67.                         <address>
  68.                             <strong>王皓和小雪科技有限公司</strong><br> 山东，济南 经十西路 28723 号<br>
  69.                             159 6577 9823
  70.                         </address>
  71.                         <address>
  72.                             <strong>E-Mail</strong><br> <a href="#">
  73.                                 hello@example.com</a>
  74.                         </address>
  75.                         <p class="text-left">此致 敬礼</p>
  76.                         <p class="text-center">Franson</p>
  77.                         <p class="text-right">2016-06-09</p>
  78.                     </div>
  79.                 </section>
  80.                 <section id="transitions">
  81.                     比如
  82.                     <code>&lt;section&gt;</code>
  83.                     就应该是使用行内包装。<br>
  84.                     <pre>public class Student{<br>
  85.                     private String name;
  86.                         <br>}</pre>
  87.                 </section>
  88.                 <section id="tableview">
  89.                     <table class="table table-striped">
  90.                         <thead>
  91.                             <tr>
  92.                                 <th>First Name</th>
  93.                                 <th>Last Name</th>
  94.                                 <th>Username</th>
  95.                             </tr>
  96.                         </thead>
  97.                         <tbody>
  98.                             <tr>
  99.                                 <td>Wang</td>
  100.                                 <td>fusen</td>
  101.                                 <td>franson</td>
  102.                             </tr>
  103.                             <tr>
  104.                                 <td>Li</td>
  105.                                 <td>xiansheng</td>
  106.                                 <td>franson</td>
  107.                             </tr>
  108.                             <tr>
  109.                                 <td>Wang</td>
  110.                                 <td>fusen</td>
  111.                                 <td>franson</td>
  112.                             </tr>
  113.                         </tbody>
  114.                         <tfoot>
  115.                             <tr>
  116.                                 <td>Hu</td>
  117.                                 <td>min</td>
  118.                                 <td>amin</td>
  119.                             </tr>
  120.                         </tfoot>
  121.                     </table>
  122.                     <p>
  123.                         斑马纹表格
  124.                         <code>.table-striped</code>
  125.                         <code>.table-hover</code>
  126.                     </p>
  127.                     <table class="table table-striped table-bordered table-hover">
  128.                         <thead>
  129.                             <tr>
  130.                                 <th>First Name</th>
  131.                                 <th>Last Name</th>
  132.                                 <th>Username</th>
  133.                             </tr>
  134.                         </thead>
  135.                         <tbody>
  136.                             <tr>
  137.                                 <td>Wang</td>
  138.                                 <td>fusen</td>
  139.                                 <td>franson</td>
  140.                             </tr>
  141.                             <tr>
  142.                                 <td>Li</td>
  143.                                 <td>xiansheng</td>
  144.                                 <td>franson</td>
  145.                             </tr>
  146.                             <tr>
  147.                                 <td>Wang</td>
  148.                                 <td>fusen</td>
  149.                                 <td>franson</td>
  150.                             </tr>
  151.  
  152.                             <tr>
  153.                                 <td>Hu</td>
  154.                                 <td>min</td>
  155.                                 <td>amin</td>
  156.                             </tr>
  157.                         </tbody>
  158.                     </table>
  159.                     <p>
  160.                         被压缩的表格
  161.                         <code>.table-condensed</code>
  162.                     </p>
  163.                     <table
  164.                         class="table table-striped table-bordered table-hover table-condensed">
  165.                         <thead>
  166.                             <tr>
  167.                                 <th>First Name</th>
  168.                                 <th>Last Name</th>
  169.                                 <th>Username</th>
  170.                             </tr>
  171.                         </thead>
  172.                         <tbody>
  173.                             <tr>
  174.                                 <td>Wang</td>
  175.                                 <td>fusen</td>
  176.                                 <td>franson</td>
  177.                             </tr>
  178.                             <tr>
  179.                                 <td>Li</td>
  180.                                 <td>xiansheng</td>
  181.                                 <td>franson</td>
  182.                             </tr>
  183.                             <tr>
  184.                                 <td>Wang</td>
  185.                                 <td>fusen</td>
  186.                                 <td>franson</td>
  187.                             </tr>
  188.                             <tr>
  189.                                 <td>Hu</td>
  190.                                 <td>min</td>
  191.                                 <td>amin</td>
  192.                             </tr>
  193.                         </tbody>
  194.                     </table>
  195.                     <p>
  196.                         带颜色的行
  197.                         <code>.success .error .warning .info</code>
  198.                     </p>
  199.                     <table class="table table-striped table-bordered table-hover">
  200.                         <caption class="text-center text-info">
  201.                             <strong>用户列表<code>&lt;caption&gt;</code></strong>
  202.                         </caption>
  203.                         <thead>
  204.                             <tr>
  205.                                 <th>First Name</th>
  206.                                 <th>Last Name</th>
  207.                                 <th>Username</th>
  208.                             </tr>
  209.                         </thead>
  210.                         <tbody>
  211.                             <tr class="success">
  212.                                 <td>success</td>
  213.                                 <td>fusen</td>
  214.                                 <td>franson</td>
  215.                             </tr>
  216.                             <tr class="warning">
  217.                                 <td>warning</td>
  218.                                 <td>xiansheng</td>
  219.                                 <td>franson</td>
  220.                             </tr>
  221.                             <tr class="error">
  222.                                 <td>error</td>
  223.                                 <td>fusen</td>
  224.                                 <td>franson</td>
  225.                             </tr>
  226.                             <tr class="info">
  227.                                 <td>info</td>
  228.                                 <td>min</td>
  229.                                 <td>amin</td>
  230.                             </tr>
  231.                         </tbody>
  232.                     </table>
  233.                 </section>
  234.                 <form action="#">
  235.                     <fieldset>
  236.                         <legend>默认表单样式</legend>
  237.                         <label>用户名</label> <input type="text" placeholder="请输入用户名...">
  238.                         <span class="help-block">这里是区块级别的帮助性文字</span> <label
  239.                             class="checkbox"> <input type="checkbox">勾选一下
  240.                         </label> <input type="submit" class="btn" value="提交">
  241.                     </fieldset>
  242.                 </form>
  243.                 <form action="#" class="form-search">
  244.                     <fieldset>
  245.                         <legend>搜索表单</legend>
  246.                         <input type="text" class="search-query" placeholder="搜索内容...">
  247.                         <input type="submit" class="search-query btn" value="查询">
  248.                     </fieldset>
  249.                 </form>
  250.                 <form class="form-inline">
  251.                     <fieldset>
  252.                         <legend>行内表单</legend>
  253.                         <input type="text" class="input-small" placeholder="Email...">
  254.                         <input type="text" class="input-small" placeholder="密码...">
  255.                         <label class="checkbox"><input type="checkbox">记住我</label>
  256.                         <input type="submit" class="btn">
  257.                     </fieldset>
  258.                 </form>
  259.                 <form class="form-horizontal">
  260.                     <fieldset>
  261.                         <legend>水平表单</legend>
  262.                         <div class="control-group">
  263.                             <label class="control-label" for="inputEmail">Email</label>
  264.                             <div class="controls">
  265.                                 <input type="text" id="inputEmail" placeholder="Email">
  266.                             </div>
  267.                         </div>
  268.                         <div class="control-group">
  269.                             <label class="control-label" for="inputPassword">密码</label>
  270.                             <div class="controls">
  271.                                 <input type="password" id="inputPassword" placeholder="密码">
  272.                             </div>
  273.                         </div>
  274.                         <div class="control-group">
  275.                             <div class="controls">
  276.                                 <label class="checkbox"> <input type="checkbox">
  277.                                     记住我
  278.                                 </label>
  279.                                 <button type="submit" class="btn">登录</button>
  280.                             </div>
  281.                         </div>
  282.                     </fieldset>
  283.                 </form>
  284.                 <form class="form-horizontal">
  285.                     <fieldset>
  286.                         <legend>水平表单2</legend>
  287.                         <div class="controls">
  288.                             <label>Email</label> <input type="text" id="inputEmail"
  289.                                 placeholder="Email"> <label>密码</label> <input
  290.                                 type="password" id="inputPassword" placeholder="密码"> <label>自我介绍</label>
  291.                             <textarea rows=3></textarea>
  292.                             <label class="checkbox"> <input type="checkbox">
  293.                                 记住我
  294.                             </label>
  295.                             <button type="submit" class="btn">登录</button>
  296.                         </div>
  297.                     </fieldset>
  298.                 </form>
  299.                 <form>
  300.                     <fieldset>
  301.                         <legend>复选框与单选框</legend>
  302.                         <label class="checkbox"><input type="checkbox" value="">选项一</label>
  303.                         <label class="checkbox"><input type="checkbox" value="">
  304.                             选项二</label> <label class="color"> <input type="color">颜色选择
  305.                         </label> <br> <label class="radio"><input type="radio"
  306.                             name="options" value="">选择一</label> <label class="radio"><input
  307.                             type="radio" name="options" value="">选择二</label>
  308.                     </fieldset>
  309.                 </form>
  310.                 <form>
  311.                     <fieldset>
  312.                         <legend>行内复选框与单选框</legend>
  313.                         <label class="checkbox inline"><input type="checkbox"
  314.                             value="">选项一</label> <label class="checkbox inline"><input
  315.                             type="checkbox" value=""> 选项二</label> <label class="radio inline"><input
  316.                             type="radio" name="options" value="">选择一</label> <label
  317.                             class="radio inline"><input type="radio" name="options"
  318.                             value="">选择二</label>
  319.                     </fieldset>
  320.                 </form>
  321.                 <form>
  322.                     <fieldset>
  323.                         <legend>下拉框选项</legend>
  324.                         <select>
  325.                             <optgroup label="你的日常生活">
  326.                                 <option value="">吃饭</option>
  327.                                 <option value="">睡觉</option>
  328.                                 <option value="">打豆豆</option>
  329.                             </optgroup>
  330.                         </select><br> <select multiple="multiple">
  331.                             <optgroup label="你的日常生活">
  332.                                 <option value="">吃饭</option>
  333.                                 <option value="">睡觉</option>
  334.                                 <option value="">打豆豆</option>
  335.                             </optgroup>
  336.                         </select>
  337.                     </fieldset>
  338.                 </form>
  339.                 <div class="input-prepend input-append">
  340.                     <input class="span6" placeholder="输入数值..."
  341.                         id="appendedPrependedInput" type="text"> <input
  342.                         type="button" value="搜索" class="btn"> <input type="button"
  343.                         value="选项" class="btn">
  344.                 </div>
  345.                 <div class="input-append">
  346.                     <input class="span2" id="appendedDropdownButton" type="text">
  347.                     <div class="btn-group">
  348.                         <button class="btn dropdown-toggle" data-toggle="dropdown">
  349.                             搜索 <span class="caret"></span>
  350.                         </button>
  351.                         <ul class="dropdown-menu">
  352.                             <li>用户</li>
  353.                             <li>人物</li>
  354.                             <li>电影</li>
  355.                         </ul>
  356.                     </div>
  357.                 </div>
  358.                 <a href="#" class="btn">我是链接<i class="icon-search"></i></a>
  359.             </div>
  360.         </div>
  361.     </div>
  362.     <script src="js/jquery.js"></script>
  363.   <script src="js/application.js"></script>
  364.     <script src="js/bootstrap.min.js"></script>
  365. </body>
  366. </html>

bootstrap2.3.2常用标签的使用的更多相关文章

  1. HTML常用标签

    HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...

  2. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  3. HTML常用标签总结

    HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...

  4. html新增一些常用标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [刘阳Java]_MyBatis_映射文件的常用标签总结_第5讲

    MyBatis中常用标签的总结,简单给出自己的总结 MyBatis映射文件中的标签使用介绍1.<select>:用于编写查询语句用的标签 id:表示当前<select>标签的唯 ...

  6. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  7. HTML基础（一）——一般标签、常用标签和表格

    第一部分  HTML <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...

  8. HTML-学习笔记（常用标签）

    本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...

  9. 帝国CMS文章随机调用等一些常用标签

    1.帝国CMS文章随机调用等一些常用标签 [e:loop={'news',10,18,0,'newstime>UNIX_TIMESTAMP()-86400*7','onclick desc'}] ...

随机推荐

  1. 【原】win7下调整分区

    由于装系统时硬盘分区极度不合理,导致现在装一些比较大的开发软件根本不能装,但是又不想重装系统调整分区,而且还不想让已有的文件受到一点伤害,毕竟数据无价啊.几番搜索后,发现了一款比较好用的硬盘管理软件  ...

  2. 探究adroid活动

    Intent用处 隐式使用intent,在被启动的activity的manifest文件配置该活动 在出发活动建立intent时就写好和 网页浏览器用new intent 时用Intent.ACTIO ...

  3. 打造你的办公环境-email篇

    1. 配置安装 procmailr 和 getmail ///////////////////////////////// ignore the follow  /////////////////// ...

  4. Codeforces 475C Kamal-ol-molk&#39;s Painting 模拟

    主题链接:点击打开链接 意甲冠军:特定n*m矩阵 X代表色 .代表无色 随着x*y形刷子去涂色. 刷子每次能够→或↓移动随意步. 若可以染出给定的矩阵,则输出最小的刷子的面积 若不能输出-1 思路: ...

  5. mvp框架

    本文在于巩固基础 mvp框架的概念: MVP是MVC模式的另一个变种,MVP即可以应用到WEB项目中, 也可以应用到Winform项目中,它的方便的测试机制为大型复杂的企业级应用带来了福音,MVP模式 ...

  6. 将类数组对象(array-like object)转化为数组对象(Array object)

    用法:Array.prototype.slice.call(array-like object) // 创建一个类数组对象 var alo = {0:"a", 1:"b& ...

  7. nide.js(二)文件I/O

    文件I/O fs模块的基本用法 node.js中提供一个名为fs的模块来支持I/O操作,fs模块的文件I/O是对标准POSIX函数的简单封装. 1.writeFile函数的基本用法 文件I/O,写入是 ...

  8. MySqL触发器以及常用转换函数注意事项

    1,触发器(http://www.cnblogs.com/zzwlovegfj/archive/2012/07/04/2576989.html)       1.MYSQL中触发器中不能对本表进行 i ...

  9. 基于php常用正则表达整理（下）

    61        \n 匹配一个换行符.等价于 \x0a 和 \cJ.62        \r 匹配一个回车符.等价于 \x0d 和 \cM.63        \s 匹配任何空白字符,包括空格.制 ...

  10. Windows vista以上模拟Alt Ctrl Delete

    之前客户要求我们能够在windows登陆界面能够用指定账户批量控制机器登陆,然后用windows credentials provider(vista以上,xp需要用Gina)实现了这个功能,这期间遇 ...