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

<!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. javascript通用代码合集

    1.逐一绑定操作到window.onload上 //func:新函数 function addLoadEvent(func){ //把现有的window.onload事件处理函数的值存入变量oldon ...

  2. Android开发（7）数据库和Content Provider

    问题聚焦: 思想:应用程序数据的共享 对数据库的访问仅限于创建它的应用程序,但是事情不是绝对的 Content Provider提供了一个标准的接口,可供其他应用程序访问和使用其他程序的数据 下面我们 ...

  3. HTTP协议图--HTTP 报文首部之首部字段（重点分析）

    1.首部字段概述 先来回顾一下首部字段在报文的位置,HTTP 报文包含报文首部和报文主体,报文首部包含请求行(或状态行)和首部字段. 在报文众多的字段当中,HTTP 首部字段包含的信息最为丰富.首部字 ...

  4. HTTP协议图--HTTP 协议报文结构

    1.HTTP 报文 用于 HTTP 协议交互的信息被称为 HTTP 报文.请求端(客户端)的 HTTP 报文叫做请求报文:响应端(服务器端)的叫做响应报文.HTTP 报文本身是由多行(用 CR[car ...

  5. SQL简单基础（1）

    对于SQL不再做过多的介绍,毕竟作为一个初学者对于SQL(结构化查询语言)也好,关系型数据库也好理解都并不是很深,只知道一些基本的概念. 本系列旨在介绍一些简单开发中用得上的SQL语句以及其使用方法, ...

  6. ssh整合之Session延迟加载问题的解决

    问题描述:在使用Hibernate和Struts是经常会遇到如下BUG: org.apache.struts2.json.JSONException: org.apache.struts2.json. ...

  7. 无法执行程序。所执行的命令为 "C:\Windows\Microsoft.NET\Framework64\v4.0.30319\csc.exe" /noconfig /fullpaths @"C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\b411ea32\b48a9fb\aun5r0xd.c

    解决方案 将应用程序池进程模型中的标识设为“LocalSystem”即可.

  8. Django template for 循环用法

    当列表为空或者非空时执行不同操作: {% for item in list %} ... {% empty %} ... {% endfor %} 使用forloop.counter访问循环的次数,下 ...

  9. ubuntu服务器下tomcat安装（不推荐使用apt-get）

    最近在阿里云服务器上装tomcat,一开始为了省事直接使用了apt-get安装,结果整个程序被拆开散到了好多地方,尤其是像网上说要把打包好了.war文件放到webapps文件夹下,但是开始并没有在/u ...

  10. 操作dict时避免出现KeyError的几种方法

    在读取dict的key和value时,如果key不存在,就会触发KeyError错误,如: Python t = { ', ', ', } print(t['d']) 就会出现: <code c ...