世界到底是什么?其实世界很简单,正所谓一花一世界,一树一菩提,世界就在我们身边。造物神是伟大的,在我看来无论是HTML,css,js都可以看作是一个世界,但是他们是构成宏观世界不可或缺的,正如IU框架boostrap离不开jQuery,无数小世界才能编制成美丽的宏观大世界。让我们先来见识一下bootstrap内的山川河流(网格系统)吧!

1.通过以下代码Bootstrap 自动布局将行分为相等宽度的列(可以超过12):

<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

2.大家可以试试下面的,你会发现很有趣的事情呦!

<div class="row">
<div class="col-7">.col-4</div><!--col-4代表所占网格数-->
<div class="col-3 offset-4">.col-md-4 .offset-md-4</div><!--col-3代表所占网格数,offset-4代表左边会多出4个网格,一行最多不能超过12个否则会换行-->
</div>

以上就是山川河流的骨架(网格系统),有了骨架,如果没有生灵万物的存在,又怎么能称作是山川,又怎么能称作是河流呢?

详情请走进下期万物的起源(文字排版)

bootstrap世界探索1——山川河流(文字排版)的更多相关文章

  1. bootstrap世界探索2——万物的起源(网格系统)

    万物的起源是非常神奇的,谁又能想到小小的细胞(文字排版)竟能构建大千世界. <!DOCTYPE html> <html lang="en"> <hea ...

  2. OpenJudge计算概论-文字排版

    /*====================================================================== 文字排版 总时间限制: 1000ms 内存限制: 65 ...

  3. (转)iOS7界面设计规范(10) - UI基础 - 文字排版与配色

    明天就是周四了.貌似前几天还在恨周一呢.话说今天几乎开了一整天的会,正经事情没做多少:这种感觉比一整天从早到晚12个小时的忙碌于一件事情还要让人感到疲惫的对叭?那今天的iOS7设计规范更新又是一篇很简 ...

  4. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

  5. [转] iOS文字排版(CoreText)那些事儿

    文章转载自 http://www.cocoachina.com/applenews/devnews/2014/0521/8504.html iOS文字排版(CoreText)那些事儿 转自阿毛的蛋疼地 ...

  6. 【html】文字排版

    Web开发过程中文字排版,默认的情况下,行末的长单词会撑开容器. 我们想要的是(像word一样.能够自动换行.既不撑大容器.也不强制拆开行末单词.并且不会隐藏行末单词的多余字母) ①不能撑开容器 ②完 ...

  7. iOS开发-UITextView文字排版

    UITextView文本排版 1.配置NSMutableParagraphStyle NSMutableParagraphStyle *MParaStyle = [[NSMutableParagrap ...

  8. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  9. IT兄弟连 HTML5教程 CSS3属性特效 文字排版

    direction定义文字排列方式,所有浏览器都兼容这个属性,有两个可选值rtl和ltr.文字排版的参数说明如表1所示. 表1  CSS3文字排版参数说明 上表所示,ltr是初始值,表示left-to ...

随机推荐

  1. 【 PostgreSQL】十条实用数据库SQL优化建议

    基于PostgreSQL,总结几条常用的查询操作的优化建议,部分也适用于Oracle等数据库. 1.选择合适的分布键 分布键选择不当会导致重分布.数据分布不均等,而数据分布不均会使SQL集中在一个se ...

  2. 乘风破浪:LeetCode真题_020_Valid Parentheses

    乘风破浪:LeetCode真题_020_Valid Parentheses 一.前言 下面开始堆栈方面的问题了,堆栈的操作基本上有压栈,出栈,判断栈空等等,虽然很简单,但是非常有意义. 二.Valid ...

  3. Oracle与EntityFramework(EF)的一些事情

    概要 Oracle 和EF 一起用的时候总会有各种问题,这里总结一下解决办法. 模式 Schema 用过Oracle的人应该知道,其实Oracle的用户名一般就是它的模式名称,如果你在用databas ...

  4. OC基础数据类型-NSValue

    1.NSValue:将指针等复杂的类型存储为对象 struct sct { int a; int b; }sctt; NSValue * value = [[NSValue alloc] initWi ...

  5. Codeforces Round #441 (Div. 2)【A、B、C、D】

    Codeforces Round #441 (Div. 2) codeforces 876 A. Trip For Meal(水题) 题意:R.O.E三点互连,给出任意两点间距离,你在R点,每次只能去 ...

  6. IPUtils 工具类

    package com.hxqc.basic.dependency.util; import org.apache.commons.lang.StringUtils; import javax.ser ...

  7. Django创建基本流程

    Django创建基本流程 1.创建工程:django-admin startproject 工程名 2.创建应用:python manage.py startapp 应用名 3.激活项目:修改sett ...

  8. 1、Web Service-开始入坑(基础简介)

    1.关于Schema 具体介绍:https://baike.baidu.com/item/Schema/15286221?fr=aladdin 几个重要的知识点: 2.HTTP协议 具体介绍看博文:h ...

  9. WEB安全 php+mysql5注入防御(二)

    第四天: 一.新的注入函数: ascii() substring("string",n,m)                     n>=1 limit n,m      ...

  10. 【问题】 百度地图marker不在中心点处

    问题: var map = new BMap.Map("mapshow"); map.centerAndZoom(point, 15); 显示百度地图时,map.centerAnd ...