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

<!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. PRINCE2的优势有哪些？

    PRINCE2之所以迅速发展的原因之一是许多企业认识到建立适合自己企业的项目管理标准是一项耗时耗财的工作. 他们至少要花费6-12个月.成千上万个工时来建立一套方法,而这只是最初的成本. 之后他们必须 ...

  2. CPU硬件辅助虚拟化技术

    目前主要有Intel的VT-x和AMD的AMD-V这两种技术.其核心思想都是通过引入新的指令和运行模式,使VMM和Guest OS分别运行在不同模式(ROOT模式和非ROOT模式)下,且Guest O ...

  3. C#中的特殊数据类型

    一.c#中的特殊数据类型 C#中特殊数据类型有class类型.结构类型.数组类型.枚举类型.集合类型.委托类型.事件.Lambda表达式.接口类型. 1.class类型 1.1类定义 class St ...

  4. [转]实现Hive数据同步更新的shell脚本

    引言: 上一篇文章<Sqoop1.4.4 实现将 Oracle10g 中的增量数据导入 Hive0.13.1 ,并更新Hive中的主表>http://www.linuxidc.com/Li ...

  5. C# winfrom DataGridView用法

    DataGridView列的宽度自动调整,可以使用DataGridView.AutoSizeColumnsMode属性实现. 下面的代码就是列的宽度根据Header和所有单元格的内容自动调整的. // ...

  6. maven dependendency

    登录|注册     zhengsj的专栏       目录视图 摘要视图 订阅 [公告]博客系统优化升级     [收藏]Html5 精品资源汇集     博乐招募开始啦       Maven De ...

  7. C#/Entity Frame Core 使用Linq 进行分页 .Skip() .Take() 的使用方法

    一般使用格式为 int pagesize = 分页大小(每一页大小)int pageindex = 第几页(一般这个变量是随循环递增的) 使用方法.Skip(pagesize*pageindex).T ...

  8. Asp.Net MVC Identity 2.2.1 使用技巧（六）

    使用用户管理器之角色管理 一.建立模型,这里我们其实在之前的技巧(五)已经建好了. 二.建立控制器RolesAdminController 1.在controllers文件夹上点右键>添加> ...

  9. LNMP-day2-进阶

    部署LNMP环境 http://www.cnblogs.com/wazy/p/8386493.html 安装部署wordpress #下载wordpress [root@locahost downlo ...

  10. DB_NAME DB_UNIQUE_NAME 和 SID 的理解

    1. DB_NAME 表示数据库名称,DB_NAME 会保持在数据文件头.控制文件.REDO文件里,所以更改DB_NAME不能仅仅修改spfile ,还需要用nid 来进行更改,并且更改后还需要手工做 ...