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. HDU 3652(数位DP)

    题目链接:B-number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  2. HDU 5166 Missing number 简单数论

    Missing number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) [ ...

  3. ZjDroid工具介绍及脱壳详细示例

    前提条件: 1.Root手机一部 2.需要通过Xposed installer(http://dl.xposed.info/latest.apk)安装Xposed Framework; 一.ZjDro ...

  4. PAT (Advanced Level) 1005. Spell It Right (20)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  5. openstack controller ha测试环境搭建记录（十三）——配置cinder（控制节点）

    在任一控制节点创建用户:mysql -u root -pCREATE DATABASE cinder;GRANT ALL PRIVILEGES ON cinder.* TO 'cinder'@'loc ...

  6. 把View转化成Image

    + (UIImage *) imageWithView:(UIView *)view { UIGraphicsBeginImageContextWithOptions(view.bounds.size ...

  7. github 更新fork分支

    在github上开发代码的时候我们习惯的是fork一个分支,然后修改再往主分支push request,这样就可以保证多人开发, 但是随着时间的推移,自己fork的版本和主分支的版本差异越来越大; 这 ...

  8. html页面头部里的meta

    作者:zccst html中的http-equiv属性应用详解 一.简介 http-equiv 属性 -- HTTP协议的响应头报文 此属性出现在meta标签中 此属性用于代替name,HTTP服务器 ...

  9. python web开发基本概念

    参考了廖雪峰的Python博客. web请求顺序: 浏览器发送一个http请求 服务器收到请求后,生成一个html文档. 服务器将html文档作为http相应的body发送给浏览器 浏览器收到http ...

  10. iReport折线图

    1.拖动组件面板chart到Summary   2.右击-->chart data  单出   3.   4.X轴和Y轴必须是数字 series:系列 连续,串联 category:类型.部门. ...