Bootstrap 2.3.2学习
1.下载架包,下载编译好的文件,文件目录结构如下所示:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
添加min代表:对没有添加min的文件压缩而得到的压缩版。
使用bootstrap开发页面大体布局如下:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 101 Template</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
- </head>
- <body>
- <h1>Hello, world!</h1>
- <script src="http://code.jquery.com/jquery.js"></script>
- <script src="js/bootstrap.min.js"></script>
- </body>
- </html>
2.开发中必须使用HTML5文档类型:每个页面都应如下格式
对于中文来讲lang=”ch-CN”
- <!DOCTYPE html>
- <html lang="en">
- ...
- </html>
3.默认栅格系统,默认为12列,形成一个940px宽的容器;
.row 代表一行, .span*代表站的列数,例如2列.span2
当你的屏幕是940px是,分成12列代表铺面全屏
<div class=”row”>
<div class=”span1” style=”background-color:red”></div>
<div calss=”span1” style=”background-color:red”></div>
</div>
.offset*代表偏移量向右偏
<div class=”row”>
<div class=”span1 offset1” style=”background-color:red”></div>
<div class=”span1” style=”background-color:red”></div>
</div>
显示效果只会出现一个红快,原因,第一个<div>向右偏移一个单位时把第二个<div>覆盖。
4.嵌套列:嵌套列就是在已有的.span下再次使用.row .span*。要注意子类中的列的和不能超过父类的列数。
<div class=”row”>
<div class=”span3”>
<div class=”row” >
<div class=”span1”> </div>
<div class=”span2”></div>
</div>
</div>
</div>
5.流式栅格系统:
它采用百分比而不是像素。它和固定栅格系统一样拥有响应式布局的能力,这就保证了对于
不同的分辨率和设备作出适当的调整。
用法:将.row改为.row-fluid,其他的不变.span*,.offset*
在使用.row-fluid时里面的所有列都可以看为可分为12列,出于页面显示整齐,如果使用流式,
就一直使用不要掺固定。
6.布局:
固定布局.container,使用该布局的宽度是940px。
<div class=”container”>
</div>
流式布局:.container-fluid,它的宽度根据使用屏幕来定。
<div class=”container-fluid”>
</div>
7.响应式设计
使用响应式设计时,在页面中添加一个<meta>和引入对应额响应式的样式
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
该特性一般在使用出才添加。
8.基本的样式:
<h1>到<h6>都可以使用
bootstrap定义了全局font-size是14px,line-height是20px,这些样式都应用到了<body>和所有的段落上。
另外,对<p>还定义了1/2行高(默认为10px)的底部外边局(margin)属性。
.lead使段落突出
<p class=”lead”> 突出</p>
对不需要强调的使用small标签。
<small>….</small>
加粗<strong>…</strong>
斜体<em>….</em>
文本对齐方式:.text-left,.text-center,.text-right
Bootstrap 2.3.2学习的更多相关文章
- 桂电在线-转变成bootstrap版3(记录学习bootstrap)
继续上文 正文菜单 html: <!-- 菜单块 --> <div class="on-light" id="menus"> <s ...
- 桂电在线-转变成bootstrap版2(记录学习bootstrap)
下载bootstrap框架https://github.com/twbs/bootstrap 或者 http://getbootstrap.com/ 拷贝模板 修改基本模板 语言zh-cn,标题,描述 ...
- 基于jQuery,bootstrap的bootstrapValidator的学习(一)
bootstrap:能够增加兼容性的强大框架. 因为移动端项目需要数据验证,就开始学习了bootstrapValidator . 1.需要引用的文件: css: bootstrap.min.css b ...
- Bootstrap基本类和组件学习二
一.联系方式:(自带鼠标的移动动画) 1.头文件CSS <link rel="shortcut icon" href="favicon.ico"> ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- Bootstrap下拉单学习
<!DOCTYPE HTML><html><head><link rel="stylesheet" href="/stylesh ...
- Bootstrap相关优质项目学习清单
1:编码规范 by @mdo编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范 http://codeguide.bootcss.com/ 2:快速.可靠.安全的依赖管理工具.Yarn 缓存了 ...
- bootstrap学习总结-css样式设计(二)
首先,很感谢各位园友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的h ...
- 快速学习bootstrap前台框架
W3c里的解释 使用bootstrap需要注意事项 1. 在html文件第一行要加上<!doctype html>[s1] 2. 导入bootstrap.min.css文件 3. 导 ...
随机推荐
- [转]用man查看命令帮助时, 括号中的数字表示的意思
当提及如'rn(1)', 'ctime(3)'时,它们看上去像某种函数调用,但不是. 这些数字表示可在"Unix manual"中的哪一部分找到对应的文档. 数字对应的文档如下: ...
- SQL必知必会笔记(1)
去SQL AXDB 中Query数据 Open the SQL > Connect > Select AXDB > new Query select REFID, ITEMID, R ...
- SQL Server :Stored procedures存储过程初级篇
对于SQL Server,我是个拿来主义.很多底层的原理并不了解,就直接模仿拿着来用了,到了报错的时候,才去找原因进而逐步深入底层.我想,是每一次的报错,逼着我一点点进步的吧. 近期由于项目的原因,我 ...
- hough变换
//c.h typedef unsigned char BYTE;typedef unsigned short WORD;typedef unsigned int DWORD;typedef long ...
- WEB前端研发工程师编程能力成长之路(1)(转)
WEB前端研发工程师编程能力成长之路(1) [背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧: 如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧: ...
- 【最后一篇API译文】Android开发-API指南- Contacts Provider
Contacts Provider 今年加入了某字幕组,加之杂事颇多,许久未添新文了,惭愧之极. 在听闻 Google 即将重返中国后,近日忽又发现官方网站正在放出 API 中文版,比如本文.当然不是 ...
- Orchard官方文档翻译(二) 安装 Orchard
原文地址:http://docs.orchardproject.net/Documentation/Installing-Orchard 想要查看文档目录请用力点击这里 最近想要学习了解orchard ...
- 数据结构(一)之HelloWord
最近由于学习上面的需要,要重新的看看数据结构方面的知识!当然,我觉得数据结构也非常的重要,下面是我的学习的一点小小的记录,以备日后的查看! 我的环境: 1:操作系统:windows7 2:编码环境:M ...
- 洛谷P1459 三值的排序 Sorting a Three-Valued Sequence
P1459 三值的排序 Sorting a Three-Valued Sequence 166通过 369提交 题目提供者该用户不存在 标签USACO 难度普及- 提交 讨论 题解 最新讨论 那么 ...
- C#实现文件下载的几种方法
//WriteFile实现下载 protected void Button2_Click(object sender, EventArgs e) { /* using System.IO; */ st ...