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. P3P解决cookie存取的跨域问题

    最近在做一个流量统计的东西的时候,偶然发现IE在对iframe里面的页面写Cookie的时候有一些安全限制,导致读取Cookie不成功,找了好长时间的解决办法,重要找到如下的办法: 1.页面里的COO ...

  2. [iOS]Objective-C 第一节课

    Objective-C 第一节课 本节课的主要内容 创建Objective-C的第一个工程 HelloWorld Objective-C中的字符串 创建Objective-C的第一个工程 打开Xcod ...

  3. 向datagridview 添加行

    datagridview 已经绑定数据源且控件的AllowUserToAddRows设置为false时. ((DataTable)dataGridView1.DataSource).Rows.Add( ...

  4. 字符串的妙用之拼出花样的sql

    条件写在前面 string sqlrequirement =""; if(dtp_sta.text==""&&dtp_end.text==&qu ...

  5. JS——无缝滚动

    1.描述——无缝滚动图片 2.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. 自动化运维 Ansible

    自动化运维 Ansible 特性 (1).no agents:不需要在被管控主机上安装任何客户端: (2).no server:无服务器端,使用时直接运行命令即可: (3).modules in an ...

  7. （总结）Linux的chattr与lsattr命令详解

    PS:有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的li ...

  8. (简单) POJ 1278 Catch That Cow，回溯。

    Description Farmer John has been informed of the location of a fugitive cow and wants to catch her i ...

  9. (中等) UESTC 360 Another LCIS ，线段树+区间更新。

    Description: For a sequence S1,S2,⋯,SN, and a pair of integers (i,j), if 1≤i≤j≤N and Si<Si+1<S ...

  10. MapReduce 简单的全文搜索

    上一个已经实现了反向索引,那么为什么不尝试下全文搜索呢.例如有了 Hello     file3.txt:1; MapReduce     file3.txt:2;fil1.txt:1;fil2.tx ...