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

<!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. [2014年学习计划之RoR系列] 第二步 – 熟悉Ruby语言 (2/n) Blocks and Iterators (代码块和迭代器)

    [就算没有含金量,也请尊重原创, 转载自我的独立博客http://brucejia.net] Blocks and Iterators (代码块和迭代器) 代码块和迭代器是Ruby语言中比较有特点的东 ...

  2. Mac 下VIM配置

    Mac下VIM配置 首先,我们去这里下载MacVim,也可用这个网址:(http://code.google.com/p/macvim/),进入后的界面如下: ____________________ ...

  3. 在centos6.x上安装teamviewer

    首先下载公钥: # wget http://www.teamviewer.com/link/?url=354858 # rpm --import TeamViewer_Linux_PubKey.asc ...

  4. centos7安装lua语言环境

    Linux 上安装 Lua 安装非常简单,只需要下载源码包并在终端解压编译即可. 官网地址:http://www.lua.org/download.html 我这里安装的是:lua-5.3.0.tar ...

  5. Java.lang 包 （包装类、String类、Math类、Class类、Object类）

    Java 的核心 API(Application Programming Interface)是非常庞大的,这给开发者带来了很大的方便. java.lang 包是 Java 的核心类库,它包含了运行 ...

  6. iframe加载方案及性能

    普通方法加载iframe 在onload之后加载iframe setTimeout来加载iframe 友好型iframe加载 转载地址:翻译文章-iframe异步加载技术及性能 英文原文:Iframe ...

  7. python不用正则过渡括号

  8. Failed to read Class-Path attribute from manifest of jar file:/XXX问题

    java.lang.IllegalStateException: Failed to read Class-Path attribute from manifest of jar file:/XXX ...

  9. 了解Session的本质

    有一点我们必须承认,大多数web应用程序都离不开session的使用.这篇文章将会结合php以及http协议来分析如何建立一个安全的会话管理机制. AD: 有一点我们必须承认,大多数web应用程序都离 ...

  10. 《metasploit渗透测试魔鬼训练营》学习笔记第七章--社会工程学

    五.社工工程学     5.1社会工程系框架          5.1.1信息搜集                 maltego是一个高度自动化的信息搜集工具,集成在BT5中,如果国内网络环境使用时 ...