1.文字
- p标签(段落)
- small标签(让文字呈现灰色)
- em标签(文字斜体)
- blokcquote标签(文字内容为引用时用该标签)
- class=”pull-right"右浮动
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>start</title> 6 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css"> 7 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> 8 <script type="text/javascript" src="../js/bootstrap.js"></script> 9 <meta name="viewport" content="width=device-width,initial-scale=1"/> 10 <!--[if lt IE 9]> 11 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 12 <![endif]--> 13 </head> 14 <body> 15 <h1 class="page-header">CSS<small>常用的CSS</small></h1> 16 <p>From fairest creatures we desire increase,<strong>重要文字</strong>That thereby beauty's rose might never die,<em>斜体文字</em> 17 But as the riper should by time decease, His tender heir might bear his memory:But thou contracted to thine own bright eyes, 18 Within thine own bud buriest thy content,And tender churl mak'st waste in niggarding:Pity the world, or else this glutton be, 19 To eat the world's due, by the grave and thee</p> 20 <blockquote><p>Within thine own bud buriest thy content,And tender churl mak'st waste in niggarding:Pity the world, or else this glutton be</p> 21 <small class="pull-right"><cite>莎士比亚</cite></small></blockquote> 22 </body> 23 </html>
显示效果：
2.列表
- ul 无序列表
- ol 有序列表
- dl 自定义列表
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>start</title> 6 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css"> 7 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> 8 <script type="text/javascript" src="../js/bootstrap.js"></script> 9 <meta name="viewport" content="width=device-width,initial-scale=1"/> 10 <!--[if lt IE 9]> 11 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 12 <![endif]--> 13 <style> 14 dl dd{text-indent:2%;} 15 </style> 16 </head> 17 <body> 18 <h1 class="page-header">列表<small>无序列表，有序列表，描述列表</small></h1> 19 <h2>无序列表</h2> 20 <ul> 21 <li>first</li> 22 <li>second</li> 23 <li>third</li> 24 <li>forth</li> 25 <li>fifth</li> 26 </ul> 27 <h2>有序列表</h2> 28 <ol> 29 <li>first</li> 30 <li>second</li> 31 <li>third</li> 32 <li>forth</li> 33 <li>fifth</li> 34 </ol> 35 <h2>描述列表</h2> 36 <dl class="dl-horizontal"> 37 <dt>first</dt> 38 <dd>1</dd> 39 <dt>second</dt> 40 <dd>2</dd> 41 <dt>third</dt> 42 <dd>3</dd> 43 <dt>forth</dt> 44 <dd>4</dd> 45 <dt>fifth</dt> 46 <dd>5</dd> 47 </dl> 48 </body> 49 </html>
显示效果:
3.表格标签
- 普通表格
- 条纹表格
- 带边框表格
- 压缩式表格
这几种表格是可以叠加在一起的
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>start</title> 6 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css"> 7 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> 8 <script type="text/javascript" src="../js/bootstrap.js"></script> 9 <meta name="viewport" content="width=device-width,initial-scale=1"/> 10 <!--[if lt IE 9]> 11 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 12 <![endif]--> 13 <style> 14 dl dd { 15 text-indent: 2%; 16 } 17 </style> 18 </head> 19 <body> 20 <h1 class="page-header">表格<small><table></small></h1> 21 22 <div class="container"> 23 <h2>普通表格</h2> 24 <table class="table table-hover"> 25 <thead > 26 <th>星期一 </th> 27 <th>星期二 </th> 28 <th>星期三 </th> 29 <th>星期四 </th> 30 <th>星期五 </th> 31 <th>星期六 </th> 32 </thead> 33 <tr > 34 <td>y</td> 35 <td>s</td> 36 <td>y</td> 37 <td>y</td> 38 <td>w</td> 39 <td>j</td> 40 </tr> 41 <tr > 42 <td>s</td> 43 <td>s</td> 44 <td>d</td> 45 <td>l</td> 46 <td>h</td> 47 <td>j</td> 48 </tr> 49 <tr > 50 <td>h</td> 51 <td>y</td> 52 <td>t</td> 53 <td>j</td> 54 <td>y</td> 55 <td>j</td> 56 </tr> 57 <tr > 58 <td>z</td> 59 <td>y</td> 60 <td>t</td> 61 <td>l</td> 62 <td>d</td> 63 <td>j</td> 64 </tr> 65 </table> 66 <h2>条纹表格</h2> 67 <table class="table table-hover"> 68 <thead > 69 <th>星期一 </th> 70 <th>星期二 </th> 71 <th>星期三 </th> 72 <th>星期四 </th> 73 <th>星期五 </th> 74 <th>星期六 </th> 75 </thead> 76 <tr > 77 <td>y</td> 78 <td>s</td> 79 <td>y</td> 80 <td>y</td> 81 <td>w</td> 82 <td>j</td> 83 </tr> 84 <tr > 85 <td>s</td> 86 <td>s</td> 87 <td>d</td> 88 <td>l</td> 89 <td>h</td> 90 <td>j</td> 91 </tr> 92 <tr > 93 <td>h</td> 94 <td>y</td> 95 <td>t</td> 96 <td>j</td> 97 <td>y</td> 98 <td>j</td> 99 </tr> 100 <tr > 101 <td>z</td> 102 <td>y</td> 103 <td>t</td> 104 <td>l</td> 105 <td>d</td> 106 <td>j</td> 107 </tr> 108 </table> 109 <h2>带边框表格</h2> 110 <table class="table table-bordered"> 111 <thead > 112 <th>星期一 </th> 113 <th>星期二 </th> 114 <th>星期三 </th> 115 <th>星期四 </th> 116 <th>星期五 </th> 117 <th>星期六 </th> 118 </thead> 119 <tr > 120 <td>y</td> 121 <td>s</td> 122 <td>y</td> 123 <td>y</td> 124 <td>w</td> 125 <td>j</td> 126 </tr> 127 <tr > 128 <td>s</td> 129 <td>s</td> 130 <td>d</td> 131 <td>l</td> 132 <td>h</td> 133 <td>j</td> 134 </tr> 135 <tr > 136 <td>h</td> 137 <td>y</td> 138 <td>t</td> 139 <td>j</td> 140 <td>y</td> 141 <td>j</td> 142 </tr> 143 </table> 144 <h2>压缩式表格</h2> 145 <table class="table table-bordered table-condensed"> 146 <thead > 147 <th>星期一 </th> 148 <th>星期二 </th> 149 <th>星期三 </th> 150 <th>星期四 </th> 151 <th>星期五 </th> 152 <th>星期六 </th> 153 </thead> 154 <tr > 155 <td>y</td> 156 <td>s</td> 157 <td>y</td> 158 <td>y</td> 159 <td>w</td> 160 <td>j</td> 161 </tr> 162 <tr > 163 <td>s</td> 164 <td>s</td> 165 <td>d</td> 166 <td>l</td> 167 <td>h</td> 168 <td>j</td> 169 </tr> 170 <tr > 171 <td>h</td> 172 <td>y</td> 173 <td>t</td> 174 <td>j</td> 175 <td>y</td> 176 <td>j</td> 177 </tr> 178 </table> 179 </div> 180 </body> 181 </html>