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. Smali文件语法解析

    大家都应该知道APK文件其实就是一个MIME为ZIP的压缩包,我们修改ZIP后缀名方式可以看到内部的文件结构,例如修改后缀后用RAR打开鳄鱼小顽皮APK能看到的是(Google Play下载的完整版版 ...

  2. PHP运行方式

    原文链接:http://www.cnblogs.com/xia520pi/p/3914964.html 1.运行模式 关于PHP目前比较常见的五大运行模式: 1)CGI(通用网关接口 / Common ...

  3. Laravel5 model create使用

    1.在laravel的Eloquent ORM中,默认表会有created_at.updated_at两个字段,因此在使用create函数时若表无这两个字段会出错,可以设置 public $times ...

  4. 像51一样操作STM32的IO（转）

    源:像51一样操作STM32的IO //-------------------------------------------------------------------------------- ...

  5. javascript中最常用的方法

    平时在工作中时常需要一些方法,下面列举几个最常用的几个方法. 1. indexOf(searchvalue,fromindex) 该方法用于查找一个字符串是否包含了另一个字符串 indexOf() 方 ...

  6. XCode里的模拟器到底在哪里？我的App被放到哪里了？如何寻找真机的沙盒文件?

    一. 开发iOS,必然少不了和XCode这个家伙打交道.平时我们调试自己的App的时候,最常用到的就是模拟器Simulator了,调试的时候,我们的App会自动被XCode安装到模拟器中去,不过: 你 ...

  7. [转]20个令人惊叹的桌面Docker容器

    大家好,今天我们会列出一些运行在Docker容器中的很棒的桌面软件,我们可以在自己的桌面系统中运行它们.Docker 是一个开源项目,提供了一个可以打包.装载和运行任何应用的轻量级容器的开放平台.它没 ...

  8. 直流电机驱动PWM频率（转）

    源:直流电机驱动PWM频率 1.没有统一的标准,其实PWM的频率和你的电机感抗和你需要的速度响应时间有很大的关系.一般的电机用14K就足够了.当然自需要简单的调速可以随便选. 如果电机转速比较高,感抗 ...

  9. STM32 定时器用于外部脉冲计数（转）

    源:STM32 定时器用于外部脉冲计数 STM32 定时器(一)——定时器时间的计算 STM32的定时器是灰常NB的,也是灰常让人头晕的(当然是对于白菜来说的). STM32中的定时器有很多用法: ( ...

  10. cocos2d-x---开篇介绍

    关于cocos2d-x这一游戏引擎,现在受到了手机游戏开发者的青睐.其实cocos2d一开始是由于cocos2d-iphone的成功,然后带动各类开源项目越来越火.由苹果独家的Objective-C到 ...