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. PS2鼠标+LCD12864实验(调试未成功)

    此试验我一人调试许久都未成功,但发送ff时,读出来的数据确是对的,一开始让我窃喜,但发送f4时,读出来的数据确是错的,哎让苦恼啊,能力有限,只能先暂时就这样吧,那位什么还要贴出来呢,有两个原因: 1. ...

  2. java fx example

    http://www.java2s.com/Tutorials/Java/JavaFX/1500__JavaFX_WebEngine.htm

  3. Android网络开发之OkHttp--基本用法实例化各个对象

    1.实例化OkHttpClient对象,OkHttpClient包含了以下属性,以及set()和get()方法.但并没有包含具体的执行方法,详情见源码. //实例化OkHttpClent对象 priv ...

  4. android4.0 的图库Gallery2代码分析(一)

    最近迫于生存压力,不得不给人兼职打工.故在博文中加了个求点击的链接.麻烦有时间的博友们帮我点击一下.没时间的不用勉强啊.不过请放心,我是做技术的,肯定链接没病毒,就是我打工的淘宝店铺.嘻嘻.http: ...

  5. 深究Xcode的bitcode设置

    深究Xcode的bitcode设置 转发至:http://www.jianshu.com/p/f42a33f5eb61 前言 做iOS开发的朋友们都知道,目前最新的Xcode7,新建项目默认就打开了b ...

  6. ural1470 UFOs

    UFOs Time limit: 2.0 secondMemory limit: 64 MB Vasya is a ufologist and his duties include observing ...

  7. 计算机学院大学生程序设计竞赛（2015’12） 1001 The Country List

    #include<cstdio> #include<cstring> #include<cmath> #include<string> #include ...

  8. 汇总博客常见的api接口地址（windows live write）

    汇总博客常见的api接口地址(windows live write) 1. cnblogs 日志地址,直接输入 http://www.cnblogs.com/xxxxx/ api接口 http://w ...

  9. 【GO】关于GO的浅显总结

    最近看了下go的入门教程,被它的强大震撼了,第一印象感觉特点主要有如下几个吧: 1. 集c,python,erlang之长,和c同属静态语言,保证效率:语法如python一样简洁,库很强大:从erla ...

  10. 手机web——自适应网页设计（html/css控制） - 51CTO.COM

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...