bootstrap世界探索2——万物的起源(网格系统）

最新推荐文章于 2022-10-03 23:18:55 发布

dengqiao3522

最新推荐文章于 2022-10-03 23:18:55 发布

阅读量125

点赞数

原文链接：http://www.cnblogs.com/zlsh-web/p/10418364.html

版权

万物的起源是非常神奇的，谁又能想到小小的细胞（文字排版）竟能构建大千世界。

<!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>

转载于:https://www.cnblogs.com/zlsh-web/p/10418364.html

dengqiao3522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap世界探索2——万物的起源(网格系统）

万物的起源是非常神奇的，谁又能想到小小的细胞（文字排版）竟能构建大千世界。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link r...
复制链接

扫一扫