bootstrap 基本页面元素，代码，列表

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
  7. </head>
  8. <body>
  9. <p class="btn-primary">
  10.     页面元素：h1, small, p, .lead, .text-right, .text-center, .text-justify,
  11.     .text-uppercase, .text-right, abbr, address, blockquote
  12. </p>
  13. <h1>This is h1<small>This is small in h1, small font-size is 80%</small></h1>
  14. <p class="lead">This is lead paragraph</p>
  15. <p>This is normal paragraph 1</p>
  16. <p>This is normal paragraph 2</p>
  17. <p class="text-right">
  18. <strong>This is Strong tag</strong>
  19. </p>
  20. <p class="text-center">
  21. <small>This is small tag</small>
  22. </p>
  23. <p class="text-justify">
  24.     <em>This is em tag</em>
  25. </p>
  26. <p class="text-uppercase">
  27.     <cite>This is cite tag</cite>
  28. </p>
  29. <abbr title='this is abbr title'>this is abbr message</abbr>
  30. <address class="text-right">
  31.     <strong>This is strong</strong><br>
  32.     <strong>This is strong2</strong>
  33. </address>
  34. <blockquote>
  35.     <p>This is a P in Blockquote</p>
  36. </blockquote>
  37. <blockquote>
  38.     <p>This is a P 2 in Blockquote</p>
  39.     <small>This is a small in blockquote</small>
  40.     <cite>This is a cite in blockquote</cite>
  41. </blockquote>
  42. <p class="btn-primary">
  43.     列表元素：ul>li, ol>li, .list-unstyled, .list-inline, dl>dt+dd, .dl-horizontal
  44. </p>
  45. <ul class="list-unstyled">
  46.     <li>this is first</li>
  47.     <li>this is second</li>
  48.     <li>this is third</li>
  49. </ul>
  50. <ol class="list-unstyled">
  51.     <li>this is first</li>
  52.     <li>this is second</li>
  53.     <li>this is third</li>
  54. </ol>
  55. <ul class="list-inline">
  56.     <li>this is first</li>
  57.     <li>
  58.         <ul class="list-unstyled">
  59.             <li>this is a</li>
  60.             <li>this is b</li>
  61.             <li>this is c</li>
  62.         </ul>
  63.     </li>
  64. </ul>
  65. <dl>
  66.     <dt>this is dl's dt</dt>
  67.     <dd>this is dl's dd</dd>
  68.     <dt>this is dl's dt</dt>
  69.     <dd>this is dl's dd</dd>
  70. </dl>
  71. <dl class="dl-horizontal">
  72.     <dt>this is dl's dt</dt>
  73.     <dd>this is dl's dd</dd>
  74.     <dt>this is dl's dt 's long long long long content</dt>
  75.     <dd>this is dl's dd</dd>
  76. </dl>
  77. <p class="btn-primary">
  78. 代码表示：code, kbd, pre
  79. </p>
  80. <code>this is code</code>
  81. <kbd>this is kbd</kbd>
  82. <pre>this is pre.
  83. and this is pre too</pre>
  84. <pre class="pre-scrollable">
  85.     this is pre scrollable.
  86.     this is pre scrollable.
  87.     this is pre scrollable.
  88.     this is pre scrollable.
  89.     this is pre scrollable.
  90.     this is pre scrollable.
  91.     this is pre scrollable.
  92.     this is pre scrollable.
  93.     this is pre scrollable.
  94.     this is pre scrollable.
  95.     this is pre scrollable.
  96.     this is pre scrollable.
  97.     this is pre scrollable.
  98.     this is pre scrollable.
  99.     this is pre scrollable.
  100.     this is pre scrollable.
  101.     this is pre scrollable.
  102.     this is pre scrollable.
  103.     this is pre scrollable.
  104.     this is pre scrollable.
  105.     this is pre scrollable.
  106. </pre>
  107.  
  108. <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
  109. <script type="text/javascript" src="dist/js/bootstrap.js"></script>
  110. </body>
  111. </html>

bootstrap 基本页面元素，代码，列表的更多相关文章

  1. 关于iframe调用父页面元素操作

    在iframe子页面获取父页面元素 代码如下: //在iframe子页面获取父页面元素 $.('#objld', parent.document); //在父页面获取iframe子页面的元素 $(&q ...

  2. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  3. iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素

    一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...

  4. iframe子页面获取父页面元素的方法

    在iframe子页面获取父页面元素 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: $("#objid" ...

  5. Java&Selenium自动化测试实现页面元素、页面对象及测试代码分离

    一.摘要 本篇博文将介绍自动化测试实现页面元素.页面对象及测试代码分离在自动化框架中的实现 二.解析页面元素定位信息 首先,将页面元素与实际的代码分离,首先我们将页面元素定位信息和定位表达式保存在属性 ...

  6. jQuery 判断页面元素是否存在的代码

    在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  7. jsp中Java代码中怎么获取jsp页面元素

    举例,页面元素<td><input   value="${sl }" type="text" id="sl" name=& ...

  8. angularjs中向html页面添加内容节点元素代码段的两种方法

    第一种方式:原生JS向html页面添加内容节点元素代码段: <!DOCTYPE html> <html> <head> <meta charset=" ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：将页面元素所包含的文本内容替换为背景图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. StartUML 各种类图的例子

    1.UML分为: 1)静态建模:系统基础和系统固定框架结构,这些图形往往是“静态”的. 类图(Class Diagram):常用来分析业务概念 用例图(Use Case Diagram):常用 对象图 ...

  2. 基于Redis的在线用户列表解决方案

    前言: 由于项目需求,需要在集群环境下实现在线用户列表的功能,并依靠在线列表实现用户单一登陆(同一账户只能一处登陆)功能: 在单机环境下,在线列表的实现方案可以采用SessionListener来完成 ...

  3. locks

    grep 'parking to wait for' gs2_jstack_141203.txt |  uniq -c | sort -n查看哪个锁出现次数最多 http://blog.csdn.ne ...

  4. POJ 2251 Dungeon Master（地牢大师）

    p.MsoNormal { margin-bottom: 10.0000pt; font-family: Tahoma; font-size: 11.0000pt } h1 { margin-top: ...

  5. strlen sizeof strcat strcpy区别

      strlen(p): 能计算出p指向字符串的长度(以当前p的位置开始),不包含终止字符'\0': p可以声明为char* p或者char p[],这两种形式strlen均能正确计算. sizeof ...

  6. HDU 5620 KK's Steel

    想了一下发现是斐波那契数列.....水题 #include <stdio.h> #include <algorithm> #include <string.h> # ...

  7. :after和:before中的content（放入icon）

    作者:zccst 最近见到一种图标写在content里的用法,觉得很新奇.查了一下是webfont. 问题:以下是我看到的一段css的源代码,其实就是在分享到为微博的时候的图标 a#end_cc, a ...

  8. MIPI-1

    未来的产品都将朝着移动的方向发展,例如智能手机.数码相机.摄像机.平板电脑.媒体播放器.游戏机等,这些产品需要能执行多任务,包括处理多个不同的传感器如麦克风.图像传感器.磁罗盘.三轴加速度计和精细的触 ...

  9. Session监听事件的处理

    设置Session监听  在web.xml文件中: <listener> <listener-class>cjq.login.listener.UpdateLogOutTime ...

  10. 分页。php 引用代码

    <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private $lis ...