预热

学习要点

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的更多相关文章

  1. 423 重温Java Script and jQuery 葵花宝典 Bootstrap

    Bootstrap需要引的三个文件 <link rel="stylesheet" href="css/bootstrap.css">    表格元素 ...

  2. 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

    Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...

  3. 使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

    翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑 Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案 ...

  4. 重温Java Web的技术细节

    目录 一.背景 二.请求与响应 2.1.Http请求 2.2.Http响应 三.ServletConfig 3.1 测试ServletConfig参数 四.ServletContext 4.1 测试S ...

  5. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  6. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  7. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  8. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  9. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. ASP.Net MVC开发基础学习笔记:三、Razor视图引擎、控制器与路由机制学习

    一.天降神器“剃须刀” — Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留 ...

  2. MySQL 体系结构

    标签:MYSQL/数据库/查询原理/体系结构 概述 学习一门数据库系统首先得了解它的架构,明白它的架构原理对于后期的分析问题和性能调优都有很大的帮助,接下来就通过分析架构图来认识它. 目录 概述 架构 ...

  3. .NET 新标准介绍

    本文介绍如何使用 .NET 标准,更容易地实现向 .NET Core 迁移.文中会讨论计划包含的 APIs,跨构架兼容性如何工作以及这对 .NET Core 意味着什么. 如果你对细节感兴趣,这篇文章 ...

  4. 【WP开发】加密篇:单向加密

    单向加密,简单地说就是对数据进行哈希处理,平时我们见得较多的有MD5.SHA1等,都属于单向加密.上一篇文章中,老周跟大家扯了有关双向加密的事,本文咱们就扯一下单向加密吧. 要对数据进行哈希处理也不是 ...

  5. JavaScript 面向对象继承的实现

    <script type="text/javascript"> function Animal () { this.species="Animal" ...

  6. Detach Volume 操作 - 每天5分钟玩转 OpenStack(55)

    上一节我们成功地通过 attach 操作为 instance 添加了 volume,而与之相对的操作是 detach,就是将 volume 从 instance 上卸载下来. 下图是 Detach 操 ...

  7. SQL Server-数据库架构和对象、定义数据完整性(二)

    前言 本节我们继续SQL之旅,本节我们如题来讲讲一些基本知识以及需要注意的地方,若有不妥之处,还望指出,简短的内容,深入的理解,Always to review the basics. 数据库架构和对 ...

  8. 关于SubSonic3.0插件更新字符串过长引发的System.Data.SqlClient.SqlException的异常修复

    最近公司客服提交了个BUG,说是更新产品详细信息时,有的可以有的更新不了,前段时间一直没空所以暂时放下,刚才又出现这个问题,所以马上处理了一下. 打开项目解决方案,进入DEBUG模式,拿到操作的数据提 ...

  9. 【CSS进阶】原生JS getComputedStyle等方法解析

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  10. wireshark常用的过滤器设置

     过滤源ip.目的ip.在wireshark的过滤规则框Filter中输入过滤条件.如查找目的地址为192.168.101.8的包,ip.dst==192.168.101.8:查找源地址为ip.src ...