Bootstrap全局CSS样式（排版样式）

2021-09-22 17:34:32 阅读：116 来源： 互联网

一、版式排版

标题
页面主体
内联文本元素
对齐
改变大小写
缩略语
地址
引用
列表
描述

二、代码实现

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <meta charset="utf-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6     <mata http-equiv="X-UA-Compatible" content="IE=edge">
  7     <link rel="stylesheet" href="css/bootstrap.css">
  8     <script src="js/bootstrap.js"></script>
  9     <script src="js/jquery.js"></script>
 10     <title>bootstrap</title>
 11     <style>
 12       hr{
 13         border: 1px solid gray;
 14       }
 15     </style>
 16   </head>
 17   <body>
 18       <!-- 标题 -->
 19     <h1>你好Bootstrap</h1>
 20     <h2>你好Bootstrap</h2>
 21     <h3>你好Bootstrap</h3>
 22     <h4>你好Bootstrap</h4>
 23     <h5>你好Bootstrap</h5>
 24     <h6>你好Bootstrap</h6>
 25     <hr>    
 26     <!-- 页面主体 通过添加.lead 类可以让段落突出显示-->
 27     <p>这是页面主体</p>
 28     <p class="lead">这是页面主体</p>
 29     <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
 30     <hr>
 31     <!-- 内联文本元素 -->
 32     <span>普通文本</span>
 33     <mark>标记文本</mark>
 34     <del>被删除的文本</del>
 35     <s>无用文本</s>
 36     <ins>插入文本</ins>
 37     <u>带下划线的文本</u>
 38     <span>普通文本</span><small>小号文本</small>
 39     <strong>着重</strong>
 40     <em>斜体</em>
 41     <hr>
 42     <!-- 对齐 -->
 43     <p class="text-left">左对齐</p>
 44     <p class="text-center">居中对齐</p>
 45     <p class="text-right">右对齐</p>
 46     <p class="text-justify">两端对齐</p>
 47     <p class="text-nowrap">文本超出后不换行</p>
 48     <hr>
 49     <!-- 改变大小写 -->
 50     <p class="text-lowercase">Lowercased text.</p>
 51     <p class="text-uppercase">Uppercased text.</p>
 52     <p class="text-capitalize">Capitalized text.</p>
 53     <hr>
 54     <!-- 缩略语 -->
 55     <abbr title="attribute的缩写">attr</abbr>
 56     <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
 57     <hr>
 58     <!-- 地址 -->
 59     <address>
 60       <strong>Twitter, Inc.</strong><br>
 61       1355 Market Street, Suite 900<br>
 62       San Francisco, CA 94103<br>
 63       <abbr title="Phone">P:</abbr> (123) 456-7890
 64     </address>
 65     <address>
 66       <strong>Monica.zhao</strong><br>
 67       <a href="mailto:#">first.last@example.com</a>
 68     </address>
 69     <hr>
 70     <!-- 引用 -->
 71     <blockquote>
 72           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 73     </blockquote>
 74     <blockquote  class="blockquote-reverse">
 75       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 76       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 77     </blockquote>
 78     <hr>
 79     <!-- 列表 -->
 80     <ul>
 81         <li>111</li>
 82         <li>222</li>
 83         <li>333</li>
 84     </ul>
 85     <br>
 86     <ol>
 87         <li>111</li>
 88         <li>222</li>
 89         <li>333</li>
 90     </ol>
 91     <br>
 92     <ul class="list-unstyled">
 93         <li>无样式列表</li>
 94         <li>无样式列表</li>
 95     </ul>
 96     <br>
 97     <ul class="list-inline">
 98         <li>内联列表</li>
 99         <li>内联列表</li>
100     </ul>
101     <br>
102     <!-- 描述 -->
103     <dl>
104       <dt>粗体标题1</dt>
105       <dd>标准描述性文字</dd>
106     </dl>
107     <dl>
108       <dt>粗体标题2</dt>
109       <dd>标准描述性文字</dd>
110     </dl>
111     <!-- 描述（水平排列） -->
112     <dl class="list-group-horizontal-sm">
113       <dt class="list-group-item">粗体标题1</dt>
114       <dd class="list-group-item">标准描述性文字,屏幕尺寸大于768显示</dd>
115     </dl>
116   </body>
117 </html>

标签：样式,Bootstrap,列表,粗体,对齐,文本,CSS,你好
来源： https://www.cnblogs.com/AnnLing/p/15320826.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Bootstrap全局CSS样式（排版样式）