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

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">

</head>

<body>

<p class="btn-primary">

    页面元素：h1, small, p, .lead, .text-right, .text-center, .text-justify,

    .text-uppercase, .text-right, abbr, address, blockquote

</p>

<h1>This is h1<small>This is small in h1, small font-size is 80%</small></h1>

<p class="lead">This is lead paragraph</p>

<p>This is normal paragraph 1</p>

<p>This is normal paragraph 2</p>

<p class="text-right">

<strong>This is Strong tag</strong>

</p>

<p class="text-center">

<small>This is small tag</small>

</p>

<p class="text-justify">

    <em>This is em tag</em>

</p>

<p class="text-uppercase">

    <cite>This is cite tag</cite>

</p>

<abbr title='this is abbr title'>this is abbr message</abbr>

<address class="text-right">

    <strong>This is strong</strong><br>

    <strong>This is strong2</strong>

</address>

<blockquote>

    <p>This is a P in Blockquote</p>

</blockquote>

<blockquote>

    <p>This is a P 2 in Blockquote</p>

    <small>This is a small in blockquote</small>

    <cite>This is a cite in blockquote</cite>

</blockquote>

<p class="btn-primary">

    列表元素：ul>li, ol>li, .list-unstyled, .list-inline, dl>dt+dd, .dl-horizontal

</p>

<ul class="list-unstyled">

    <li>this is first</li>

    <li>this is second</li>

    <li>this is third</li>

</ul>

<ol class="list-unstyled">

    <li>this is first</li>

    <li>this is second</li>

    <li>this is third</li>

</ol>

<ul class="list-inline">

    <li>this is first</li>

    <li>

        <ul class="list-unstyled">

            <li>this is a</li>

            <li>this is b</li>

            <li>this is c</li>

        </ul>

    </li>

</ul>

<dl>

    <dt>this is dl's dt</dt>

    <dd>this is dl's dd</dd>

    <dt>this is dl's dt</dt>

    <dd>this is dl's dd</dd>

</dl>

<dl class="dl-horizontal">

    <dt>this is dl's dt</dt>

    <dd>this is dl's dd</dd>

    <dt>this is dl's dt 's long long long long content</dt>

    <dd>this is dl's dd</dd>

</dl>

<p class="btn-primary">

代码表示：code, kbd, pre

</p>

<code>this is code</code>

<kbd>this is kbd</kbd>

<pre>this is pre.

and this is pre too</pre>

<pre class="pre-scrollable">

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

    this is pre scrollable.

</pre>

<script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>

<script type="text/javascript" src="dist/js/bootstrap.js"></script>

</body>

</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. java socket 多线程网络传输多个文件

    http://blog.csdn.net/njchenyi/article/details/9072845 java socket 多线程网络传输多个文件 2013-06-10 21:26 3596人 ...

  2. JQuery实现两侧浮动广告

    1.描述 两侧浮动显示广告 2.要点 其实就是一直在变浮动广告距顶部的值. 3.代码 <!DOCTYPE html> <html> <head> <meta ...

  3. hibernate---一对一单向主键关联(不重要)

    比如, husband的id参考wife的id husband.java: package com.bjsxt.hibernate; import javax.persistence.Entity; ...

  4. cakephp 2.0 源码解读（一）

    lib - Cake -basic.php -bootstrap.php -Cache -Config -Configure -Controller -Core -Error -Event -I18n ...

  5. vector与ArrayList、hashmap与hashtable区别

    一.vector与ArrayList区别     首先要说明的是vector和arraylist都是list的实现类,都是代表链表的数据结构.     java.util.Vector;  类中 pa ...

  6. Quick Cocos2dx 版本更新

    呵呵,不出所料,我又把项目的quick x版本从2.2.1升级到2.2.3了,不知道下次升级到3.x回事神马时候呢,好期待的说. 话说运行2.2.3的player的时候,老是提醒我显卡不支持openg ...

  7. java web系统优化, mysql查询优化

    1. 采用数据库连接池技术 2. 优化sql语句格式, 比如用PreparedStatement代替Statement, 前者避免重复编译, 后者每次都需要对数据库进行解析编译, 降低数据库的访问效率 ...

  8. Eclipse 的 git 插件操作 "代码提交"以及"代码冲突"

    面向对象:曾经使用过SVN的同学. (因为Git 它 可以说是双重的SVN (本地一个服务器,远程一个服务器)),提交代码要有两次步骤,先提交到本地服务器,再把本地服务器在提交到远程服务器. 所以连S ...

  9. CDOJ 1268 Open the lightings

    组合数学题.好难啊,请教了Xiang578大神&&看了他题解才会的...... 甩上题解链接:http://blog.csdn.net/xinag578/article/details ...

  10. isKindOfClass,isMemberOfClass使用备忘

    isMemberOfClass 判断是否是属于这类的实例isKindOfClass 判断是否是这个类或者这个类的子类的实例 if ([teacher isKindOfClass:[Teacher cl ...