BootStrap入门到实战：BootStrap全局CSS样式- 文本排版和样式设置、 HTML5特殊文本标签的应用




<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 实例 - 文本排版与样式设置</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>我的网站 <small>小标题</small></h1>
      <p class="text-left">左对齐文本</p>
      <p class="text-center">居中文本</p>
      <p class="text-right">右对齐文本</p>
      <p class="text-justify">自动调整文本对齐。这段文本使用了justify实现了自动两端对齐。</p>
      <p class="text-nowrap">不换行文本</p>
      <mark>高亮文本</mark>
      <del>被删除文本</del>
      <ins>被插入文本</ins>
      <strong>重要文本</strong>
      <em>强调文本</em>
      <abbr title="这是一个缩写">abbr标签示例</abbr>
      <address><strong>我的网站, Inc.</strong><br>1235 广州市 广州市<br>中国</address>
      <blockquote>
        <p>这是一个长的引用示例。这是一个长的引用示例。这是一个长的引用示例。这是一个长的引用示例。这是一个长的引用示例。这是一个长的引用示例。</p>
      </blockquote>
    </div>
 
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要 jQuery) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 包含所有已编译的插件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

这个代码实例展示了如何使用Bootstrap的全局CSS样式来改善网页的文本排版和样式，包括标题、段落、缩写、块引用、地址、缩写、强调、删除线、插入线、大字体、小字体、对齐文本等元素。同时，示例中也包含了必要的HTML5文档类型声明和字符编码设置。

BootStrap入门到实战：BootStrap全局CSS样式- 文本排版和样式设置、 HTML5特殊文本标签的应用

评论已关闭

推荐阅读