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

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

bootstrap世界探索2——万物的起源(网格系统）的更多相关文章

  1. bootstrap世界探索1——山川河流（文字排版）

    世界到底是什么?其实世界很简单,正所谓一花一世界,一树一菩提,世界就在我们身边.造物神是伟大的,在我看来无论是HTML,css,js都可以看作是一个世界,但是他们是构成宏观世界不可或缺的,正如IU框架 ...

  2. Bootstrap 4正式发布还有意义吗？

    历经三年开发,前端框架Bootstrap 4正式发布了.然而今天的Web世界已经和当初Mark Otto发布Bootstrap时的情况大为不同,一些开发者由此质疑它的更新是否还有意义. V4版本的主要 ...

  3. 深入理解BootStrap之栅格系统（布局）

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  4. 菜鸟随谈 Bootstrap 框架

    乃菜鸟也,尚来浅谈 Bootstrap!!! 人不努力就跟咸鱼有什么区别? 你想当咸鱼吗? 反正我不想!! 我是一个Java后台端的一个简单且普通的码农,对于原生的Html5这一块,只有略懂一丢丢,一 ...

  5. 优秀的WEB前端开发框架：Bootstrap！

    其实早就对Bootstrap有所耳闻,大概了解这哥们是做WEB前端的 但直到昨天以前,还没有对他产生任何深入了解的兴趣 冷落他的主要原因还是觉得会束缚手脚,毕竟自己多年来在WEB前端的积累一直没有停滞 ...

  6. 编程哲学之 C# 篇：007——如何创造万物

    上帝拥有创建万物的能力,本文介绍创造万物的道,让你也拥有上帝般创造万物的能力! 道 中国哲学家,道家学派创始人--老子,在<道德经>写到: 道生一,一生二,二生三,三生万物 那么,是什么 ...

  7. Bootstrap布局基础

     1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  8. Go语言: 万物皆异步

    来源:https://www.jianshu.com/p/62c0cd107da3 同步和异步.阻塞和非阻塞 首先要明确的是,同步(Synchronous)和异步(Asynchronous),阻塞(B ...

  9. BootStrap的栅格式布局

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

随机推荐

  1. 使用 js 实现文本过多时隐藏部分文本

    使用 js 实现文本过多时隐藏部分文本 情景描述: 有时候我们需要显示部分文字,就像 QQ 空间这样,先显示部分文字,加一个[查看全文],让用户选择是否查看全部 解决方法: 第一步:在一个 id 为 ...

  2. Google论文系列(2) MapReduce

    思想 map函数:处理一组key/value对进而生成一组key/value对的中间结果 reduce函数:将具有相同Key的中间结果进行归并 实现 环境 普通带宽,上千台机器(失败变得正常),廉价硬 ...

  3. QT5连接Mysql

    摘要 在Qt 5中已经提供了对MySQL数据库的默认支持,要想使用该数据库,需要先进行数据库的安装, 这里我们介绍下在Windows系统中MySQL数据库的安装和简单使用.   Qt如何利用Mysql ...

  4. SQL查询含有%号的字段

    select * from EMS_ANNOUNCEMENT where 1=1  and title like '%\%%'  escape '\'

  5. Selenium2+python自动化

    一.打开网站1.第一步:从selenium里面导入webdriver模块2.打开Firefox浏览器(Ie和Chrome对应下面的)3.打开百度网址二.设置休眠1.由于打开百度网址后,页面加载需要几秒 ...

  6. 怎么知道是哪个div被点击了

    怎么知道是哪个div被点击了 不在div中加onclick等事件调用函数 ,用事件监听函数,但是如果div中的div被点击了,addEventListener得到了两个监听事件,我想点击div里的di ...

  7. C语言程序员必读的5本书

    本文由 伯乐在线 - programmer_lin 翻译自 fromdev.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. 你正计划着通过看书来学习C语言吗?“书籍是人类最忠诚的朋友“.海明威一定 ...

  8. Mac原生Terminal快速登录ssh

    1. 创建rsa key 在终端中输入以下命令: ssh-keygen -t rsa 完成之后可以在~/.ssh目录下找到公钥和私钥     如果你与我一样有使用gitlab,那么这个秘钥应该已经存在 ...

  9. BZOJ1079:[SCOI2008]着色方案(DP)

    Description 有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci个木块. 所有油漆刚好足够涂满所有木块,即c1+c2+...+ck=n.相邻两个 ...

  10. Kali-linux攻击路由器

    前面介绍的各种工具,都是通过直接破解密码,来连接到无线网络.由于在一个无线网络环境的所有设备中,路由器是最重要的设备之一.通常用户为了保护路由器的安全,通常会设置一个比较复杂的密码.甚至一些用户可能会 ...