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>
时间: 2024-11-05 10:50:34

bootstrap 基本页面元素,代码,列表的相关文章

easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素       代码如下:       $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('# objId') 这样调用方法就不会报错 如: parent.$('# objId').tabs("add", { title: title, content: content, closabl

转 easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素      代码如下:      $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('#objId') 这样调用方法就不会报错 如: parent.$('#objId').tabs("add", { title: title,      content: content,      c

iframe子页面获取父页面元素的方法

取得iframe中元素的方法有很多,在本文为大家介绍下在iframe子页面获取父页面元素的方法,下面有个不错的示例,感兴趣的朋友可以参考下 在iframe子页面获取父页面元素 代码如下: 复制代码代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: 复制代码代码如下: $("#objid", document.iframes('iframe').document) 或 复制代码代码如下: $(document.get

C#查找列表中所有重复出现元素代码

C#查找列表中所有重复出现元素代码 public T[] GetDuplicates(T inputValue) {   List<T> duplicates = new List<T>( );   for (int i = 0; i < this.Count; i++)   {     if (this[i].Equals(inputValue))     {       duplicates.Add(this[i]);     }   }//codego.net   re

jsp页面使用javascript添加页面元素示例代码

<body>    <input type="button" value="test" onclick="javascript:a();">    <table id="tab">      <tr>       <td>1</td>       <td><input name="11" type="text

使用linq计算元素在列表中出现的次数c#代码

c#使用linq计算元素在列表中出现的次数,调用方法非常简单,和sql语句很像 //codego.net计算的次数一个项目出现在这个列表 public static int CountTimes<T>(this List<T> inputList, T searchItem){return ((from t in inputList where t.Equals(searchItem) select t).Count());}

python列表操作:追加元素到列表的代码

将做工程过程中常用的内容做个收藏,如下的内容是关于python列表操作:追加元素到列表的内容. scores = ["1","2","3"] # add a score score = int(raw_input("What score did you get?: ")) scores.append(score) # list high-score table for score in scores: print score

Bootstrap &lt;基础二十八&gt;列表组

列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的列表组</title> <link href="/boo

HTML5 增强的页面元素

一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = document.getElementById("num1").valueAsNumber; 七.HTML5 增强的页面元素 1.figure.figcaption <figure> 标签规定独立的流内容(图像.图表.照片.代码等等).figure 元素的内容应该与主内容相关,但如果被删除,