bootstrap世界探索2——萬物的起源(網格系統）

時間  2019-11-12
標籤 bootstrap 世界 探索 萬物 起源 網格 系統 欄目 Bootstarp 简体版
原文   原文鏈接

       萬物的起源是很是神奇的，誰又能想到小小的細胞（文字排版）竟能構建大千世界。css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap-grid.css">
    <link rel="stylesheet" href="css/bootstrap-reboot.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <style type="text/css">

    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/bootstrap.js"></script>

</head>
<body>
<div class="container"><!--container用於佈局-->
    <h1>1212</h1><!--h1到h6，字體愈來愈小-->
    <h1 class="display-1">1212</h1><!--display-1到display-4愈來愈小-->
    <h1>h1 標題 <small>副標題</small></h1><!--small元素用於字號更小的顏色更淺的文本-->
    <h2>1212</h2>
    <p><mark>高亮</mark></p><!-- <mark> 爲黃色背景及有必定的內邊距-->
     <p><abbr>底部虛線</abbr></p><!--<abbr> 元素的樣式爲顯示在文本底部的一條虛線邊框:-->

    <blockquote class="blockquote"><!-- 引用內容，如名人名言-->
        <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
        <footer class="blockquote-footer">From WWF's website</footer>
    </blockquote>
    <dl><!-- 引用內容-->
        <dt>Coffee</dt><!--加粗-->
        <dd>- black hot drink</dd><!--不加粗-->
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>
    <p> <code>span</code></p><!--code存放代碼元素-->
    <p><kbd>ctrl + p</kbd></p><!--kbd字體加黑顯示-->
    <pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre><!--pre所佔行數不變，而p會發生變化-->
    <p class="font-weight-bold">Bold text.</p><!--加粗文本-->
    <p class="font-weight-normal">Normal weight text.</p><!--普通文本-->
    <p class="font-weight-light">Light weight text</p><!--更細的文本-->
    <p class="font-italic">Italic text.</p><!--斜體文本-->
    <p class="lead">This paragraph stands out.</p><!--lead讓段落更加突出-->
    <p class="small">This paragraph is smaller.</p><!--指定更小文本 (爲父元素的 85% )-->

    <h2>排版</h2>
    <p class="text-left">左對齊</p>
    <p class="text-right">右對齊</p>
    <p class="text-center">居中對齊文本</p>
    <p class="text-justify text-right">text-justify設定文本對齊,段落中超出屏幕部分文字自動換行</p>
    <p class="text-nowrap">段落中超出屏幕部分不換行</p>
    <p class="text-lowercase">Lowercased text.</p><!--設定文本小寫-->
    <p class="text-uppercase">Uppercased text.</p><!--設定文本大寫-->
    <p class="text-capitalize">Capitalized text.</p><!--設定單詞首字母大寫-->
    <ul class="list-unstyled"><!--移除默認的列表樣式，列表項中左對齊 ( <ul> 和 <ol> 中)。 這個類僅適用於直接子列表項 (若是須要移除嵌套的列表項，你須要在嵌套的列表中使用該樣式)-->
        <li>Coffee</li>
        <li>Tea
            <ul>
                <li>Black tea</li>
                <li>Green tea</li>
            </ul>
        </li>
        <li>Milk</li>
    </ul>
    <ul class="list-inline"><!--將全部列表項放置同一行-->
        <li class="list-inline-item">Coffee</li>
        <li class="list-inline-item">Tea</li>
        <li class="list-inline-item">Milk</li>
    </ul>
    <pre class="pre-scrollable">Text in a pre element
  is displayed in a fixed-width
  font, and it preserves
  both      spaces and
  line breaks.</pre><!--使 <pre> 元素可滾動，代碼塊區域最大高度爲340px,一旦超出這個高度,就會在Y軸出現滾動條-->
</div>
</div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程