重温Bootstrap
预热
★ 学习要点
1. 理解其GridSystem(栅格排版); 2. 熟悉其所提供的各种CSS样式及显示效果; 3. 知道提供了哪些直接可用的UI组件,以及如何使用JavaScript去调整其交互特性; |
★ 引用注意点
(1) 在<head>部分需要添加bootstrap所使用的样式表文件; (2) BOOtstrap使用jQuery,因此需要在引用Bootstrap的JavaScript文件前,先引入jQuery的JavaScript文件 |
页面布局
♣ Boostrap的“网格系统(Grid System)”
Bootstrap把页面分为 12 列,通过给HTML块元素指明它所占的列数
使用Bootstrap网格系统实现页面布局的要求:
1. “行(.row)”必须放在拥有“.container”样式类的元素中; 2. 每行可以划分为若干列,各列的宽度之和要等于 12。比如,给三个列使用con--xs-4样式类,则意味着这三个列将三等分页面的宽度; 3. 要现实的内容必须放到“列(.col)”中,只有这样列才能够成为行的子元素; |
示例
♣ Bootstrap的响应式Web设计
§实现办法 1
不同分辨率,可以应用不同的CSS样式
§实现办法 2
可以给同一个HTML元素设定不同分辨率下采用不同的布局方式
示例
对比两种实现响应式Web设计的办法,我们发现实现:
办法 1 需要针对不同显示设备制作不同的页面,工作量比较大;
办法 2 只需要对需要响应式的HTML元素进行不同显示屏下的样式类的使用就可以实现响应式布局;
因此,办法 2 是当下实现“响应式设计”的主要手段。
页面布局的调整
- 列的偏移
可以使用“col-??-offset-?”设定某列向右偏移若干列
示例
提示:offset右偏移的空间可以被其他列占据。
- 列的嵌套
原理:一个“列(.col)”中,可以再嵌套一个“行(.row)”,由此形成一种“大块套小块”的网页布局模式。
示例
提示:即使再嵌套的行列中,布局仍然遵循“网格系统(Grid System)”的12列等分。
- 列的push(推)和pull(拉)
可以使用“.col-??-push-?”、“.col-??-pull-?”之类样式,让某一列内容“偏移”到另外一个位置,如果原位置上已有内容,则两者会折叠(类似position属性值为absolute时的效果)
示例
.col-md-pull-3
.col-md-push-3
- 浮动
使用.pull-left或.pull-right使特定的元素向左或向右浮动
示例
.pull-left
.pull-right
使用.clearfix清除页面元素的浮动
PS:对于.clearfix的使用,这个我不太清楚,就不做讲述了。期盼路过的大神指点迷津…
- 让块元素实现居中显示
☀ 办法 1
原理 可将页面元素设置为“display:block”,并通过设置左右margin值为auto使其居中,同时需要设定相应的宽度,如果页面元素的宽度不设置,那么页面元素的宽度默认为浏览器视口(viewport)的宽度,这样就无法体现出居中的效果。
示例
☀ 办法 2
原理 将块元素放到Grid System的行列中,占据特定的列,然后,通过Grid System所提供的“.col-??-offset-?”样式类,让内容居于中部,这是最好的实现方式。
了解Bootstrap内置样式
- 处理图片
“.img-responsive”样式类可以使图片随屏幕尺寸自动缩放
示例
- 实现图片边框
“.img-rounded”、“.img-circle”和“.img-thumbnail”实现图片边框的控制。
示例
- 添加图片标题(caption)
示例
- 显示或隐藏元素
通过“.show”和“.hidden”、“.invisible”可以强制显示或隐藏任一页面元素。
提示:隐藏和不显示是不同的,具体可以参考《visiblity与display》这篇博文。
总结
Bootstrap本身并不复杂,使用它做出来的网站是否没关易用,不是技术问题,而是设计者的审美问题。
参考资料
《Bootstrap使用基础》 金老师的教育网站
重温Bootstrap的更多相关文章
- 423 重温Java Script and jQuery 葵花宝典 Bootstrap
Bootstrap需要引的三个文件 <link rel="stylesheet" href="css/bootstrap.css"> 表格元素 ...
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...
- 使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑 Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案 ...
- 重温Java Web的技术细节
目录 一.背景 二.请求与响应 2.1.Http请求 2.2.Http响应 三.ServletConfig 3.1 测试ServletConfig参数 四.ServletContext 4.1 测试S ...
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap(四)
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- Microsoft .NET Framework 4.0.3版下载
适用于 Microsoft .NET Framework 4 的更新 4.0.3,其中包含一系列新增功能,用于满足高端客户的功能需求和重要 .NET Framework 方案的需求. http://w ...
- 浅谈Android应用保护(一):Android应用逆向的基本方法
对于未进行保护的Android应用,有很多方法和思路对其进行逆向分析和攻击.使用一些基本的方法,就可以打破对应用安全非常重要的机密性和完整性,实现获取其内部代码.数据,修改其代码逻辑和机制等操作.这篇 ...
- 架构之路(七)MVC点滴
我们目前正在开发中的是任务管理系统,一个前端复杂的项目,所以我们先从MVC讲起吧. WebForm 随着ASP.NET MVC的兴起,WebForm已成昨日黄花,但我其实还很想为WebForm说几句. ...
- 如何给CentOS安装字体库
很多时候,我们需要做一些图像生成工作(譬如验证码之类的),这时候,我们一般都需要用到系统的字体库.但事情却总非尽善人意,我们所使用的Linux操作系统无法像Windows操作系统那样足够“旗舰”,字体 ...
- 微信小程序DEMO初体验
小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...
- Mycat配置及使用详解.
首先我们来看下什么是Mycat:MyCat:开源分布式数据库中间件, 这里定义的很简单, 就是分布式数据库的中间件. 其实Mycat 是可以时mysql进行集群的中间件, 我们可以对mysql来分库分 ...
- Atitit.软件开发的几大规则,法则,与原则Principle v3
Atitit.软件开发的几大规则,法则,与原则Principle v31.1. 修改历史22. 设计模式六大原则22.1. 设计模式六大原则(1):单一职责原则22.2. 设计模式六大原则(2):里 ...
- HTML5系列:HTML5绘图
1. canvas元素基础 canvas元素是HTML5中新增的一个重要元素,专门用来绘制图形. 在页面中使用canvas元素绘制图形需要经过的三个步骤: 步骤一 使用canvas元素创建一个画布区 ...
- [转]用C/C++扩展PHP详解
原文:http://www.imsiren.com/archives/547 一个简单的扩展模块 PHP非常容易扩展,因为它提供了我们想用的所有API. 如果要新建一个扩展,需要在PHP源码中执行ex ...
- nodejs 使用fs实现多级联动
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0gAAAEdCAIAAAC5WdDhAAAgAElEQVR4nO3da3Mc153f8X4feq5lFR