twitter_bootstrap_第二章
来源:互联网 发布:网络语言的利与弊作文 编辑:程序博客网 时间:2024/05/16 04:56
通过前面的了解,大家都看到 bootstrap 的css 框架效果,很不错吧 !那么我们开始下面的学习。
1、bootstrap 框架使用
Bootstrap 是基于 html5 的 css 框架所以 。 要引导利用HTML元素和CSS属性,需要使用HTML5 doctype。一定要包括它开始在你的项目的每一个空白的页面。
2、使用bootstrap的排版(Layout)
在bootstrap中有两种布局方式,分别是固定布局和不固定布局。
2.1、固定布局
固定布局会在页面上创建以 (940,宽)居中的单一的单元。效果如下
代码如下
2.2、不固定布局
不固定布局,不必要担宽度的问题。默认情况下宽度与页面相等等。这里为大家列举经典的一行两列布局小例。 效果如下
代码如下:
3、bootstrap 中的grid介绍
在bootstrap中的grid 也是一种布局器 。 grid跟布局同样分为两种固定和不固定。grid分别的使用 .row 和 .row-fluid 的布局。
3.1、Grid固定(940px 宽度)
Grid默认是以固定(940px 宽度)进行12 列的划分的,间距 30 px 宽。效果如下
代码:
3.2、Gird不固定
在Gride中使用不固定的(.row-fluid)是通过整个页面的宽度进行12 列的划分。间距以2.5641%; 宽度有进行的 。效果如下
3.3、Grid多样化
聪明的朋友很快就会发现在grid 中 span1 ….span2 可以灵活多的使用。下面是bootstrap中例子
3.4、Grid位移
我们使用 grid 时候,感觉跟 html table 标签差不多一样。有的朋友可能会想到如果我想隐藏几列那应该怎么办了。先来看看下面的代码。你可能会它是能隐藏列的
效果如下
offset1—offset12
分别用于填充列的。 通过几次尝试发现加上offset 都会从左边开始填充。
3.5、Grid嵌套
在 grid 嵌套里的 span1….span12 不能加了入 border: 1px; 样式 。 可能会导至换行等别情况 。 下面效果
代码
代码地址
http://pan.baidu.com/share/link?shareid=95726&uk=1862801370
原文
http://www.oljeo.com/index.php/bootstrap/4.html
- twitter_bootstrap_第二章
- twitter_bootstrap_第三章
- 第二章 --- 第二节
- 【第二章 第二节】
- 第二章第二题
- 第二章第二题
- 第二章第二题
- 第二章
- 第二章
- 第二章
- 第二章
- 第二章
- 第二章
- 第二章
- 《第二章》
- 第二章
- 第二章
- 第二章
- 通往Mauritius的道路(典型的Dijkstra算法应用)
- acm_hdu_1.1 有感
- HostMonitor是一款功能强大的运维管理软件
- ACM足球赛
- 【笔试与面试】顶点软件群体面试
- twitter_bootstrap_第二章
- hdu 2830 Matrix Swapping II
- POJ 1050 DP
- VC控件使用小结
- Window7 + Vmware + Ubuntu : 上网和VmwareTools(菜鸟可以看看,因为是我这个菜鸟总结的)
- python-mysql基本用法
- 两个玻璃球和100层楼的问题
- 数组和指针
- java math.ceil() floor()