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

<!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. No value specified for 'Date'错误

    今天使用 BeanUtils.copyProperties(m,n);  遇到  No value specified for 'Date'  这个错误,以前用的时候都不需要加 try 今天使用发现需 ...

  2. 使用mathjax在博客中完美显示数学公式，支持PC，手机浏览器

    在博客园的设置选项里 有页头HTML的框内输入: <script type="text/javascript" src="http://cdn.mathjax.or ...

  3. 解决WPF图片模糊最佳方法

    对于图片显示模糊相信很多人都遇到过,其实,有些图片会因为垂直分辨率/水平分辨率不同而造成在WPF界面上显示出现模糊. WPF默认是96Dpi,但有些图片可能是72DPI甚至更低或更高,这样就会出现图片 ...

  4. 面向对象进阶----->反射 getattr 和hasattr方法

    判断一个对象有没有血缘关系:isinstance() 里面写的是字类对象和父类名用来判断他们的关系 issubclass()是用来判断两个类是不是有继承的关系 ,括号内 写字类名和父类名  可以判断出 ...

  5. 测试你的 In-app Billing 程序

    测试你的 In-app Billing 程序 为了保证 In-app Billing 可以在你程序中正常使用,你应该在把应用程序发布到Google Play之前进行测试.早期的测试有助于确保用户对于你 ...

  6. JSON与对象的序列化与反序列化

    一.利用JavaScriptSerializer 类 System.Web.Script.Serialization空间,位于System.Web.extensions.dll中. JavaScrip ...

  7. c++的路上，我坚信，我可以 -----第四次作业体会

    第四次作业 传送门 1.浅谈"新对象"sstream和stack 第四次作业,就是在第三次作业上作修改,上周周末,我刚刚才完成了第三次作业,但是知道了队列如何应用,面对这次的sta ...

  8. host 'xx' is not allowed to connect to this MySql server

    update mysql.user set host = '%' where user = 'root'; FLUSH PRIVILEGES; select * from mysql.user;

  9. Ubuntu 12.04中MyEclipse 10.6+下载+安装+破解

    至于MyEclipse在Ubuntu的安装教程网上很多,那我为什么我还写这篇文章呢?这次重装Ubuntu之后, 在安装MyEclipse 10.6过程中遇到了一个问题,所以把MyEclipse的安装方 ...

  10. Java工具类(util) 之01- 数学运算工具(精确运算)

    数学运算工具(精确运算) /** * * @author maple * */ public abstract class AmountUtil { private AmountUtil() { } ...