bootstrap编写响应式页面

最新推荐文章于 2023-02-16 11:25:40 发布
最新推荐文章于 2023-02-16 11:25:40 发布
阅读量675 收藏 2
点赞数

Bootstrap 是现在最流行的响应式 CSS 框架，它以移动设备优先，能够快速适应不同设备。使用它编写响应式页面快捷、方便，而且屏蔽了浏览器差异。使用了 Bootstrap 后，再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。

经过学习，我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍 Bootstrap，并且带领大家一起实现一个响应式页面。
图 1. 移动优先，适应不同设备

一、安装
最简单的方式是直接在网页中引用内容分发网络（CDN）提供的 Bootstrap，当用户访问网页时，会从就近的服务器上获取资源。

清单 1. 从内容分发网络上获取 Bootstrap

?
1
2
3
4
5
6
7
8
9
10
11
<!-- Latest compiled and minified CSS -->
<link rel= "stylesheet" href= "bootstrap/3.3.4/css/bootstrap.min.css
" >
 
<!-- Optional theme -->
<link rel= "stylesheet" href= "bootstrap/3.3.4/css/bootstrap-theme.min.css
" >
 
<!-- Latest compiled and minified JavaScript -->
<script src= "bootstrap/3.3.4/js/bootstrap.min.js" >
</script>

还可以选择下载 Bootstrap 在本地部署。用户可以下载页面下载完整的 Bootstrap，也可以在定制页面根据项目需要，选择项目用到的功能，编译并下载一个简化版的 Bootstrap。下载完成后得到一个 zip 文件，解压后的目录结构如下所示：

清单 2. Bootstrap 目录结构

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

这里我们主要关注三个简化后的文件：bootstrap.min.css 是 Bootstrap 的主要组成部分，包含了大量要用到的 CSS 类；bootstrap-theme.min.css 包含了可选的 Bootstrap 主题；bootstrap.min.js 提供了一些JavaScript 方法，需要注意的是 Bootstrap 依赖于 jQuery，因此使用 bootstrap.min.js 前必须引入 jQuery。和使用内容分发网络一样，我们使用相对路径在自己的页面中引入相应的 CSS 和 JavaScript。在实际开发中，我们常常使用 Bootstrap 提供的模板作为起点，该模板引入了响应式页面需要的元数据和 Bootstrap，开发者可在此基础之上编写自己的响应式页面：

清单 3. Bootstrap 基础模板

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
<!-- The above 3 meta tags *must* come first in the head; any other
  head content must come *after* these tags -->
< title >Bootstrap 101 Template</ title >
 
<!-- Bootstrap -->
< link href = "css/bootstrap.min.css" rel = "stylesheet" >
 
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</ head >
< body >
< h1 >Hello, world!</ h1 >
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></ script >
<!-- Include all compiled plugins (below), or include individual files as needed -->
< script src = "js/bootstrap.min.js" ></ script >
</ body >
</ html >

二、CSS
Bootstrap 首先是一个 CSS 框架，它预定义了很多 CSS 类，开发者只需要为 HTML 元素添加适当的 CSS 类，就能得到想要的样式，可以完成页面的布局、排版等功能。Bootstrap 提供的 CSS 功能异常强大，本文将重点放在其提供的网格系统上，对于其他功能，只在应用时顺便提及。您若想了解更多功能，可参考官方文档。
容器
使用 Bootstrap 布局时，需要将 HTML 元素包含在一个容器（.Container）里，Bootstrap 提供了两种容器：.container 和 .container-fluid。前者将内容固定宽度居中显示，后者让内容横向撑满整个浏览器窗口，如下所示：

清单 4. .container 和 .container-fluid

?
1
2
3
4
5
6
7
8
9
10
11
< div class = "container" >
< p >“小时候每当我生病，母亲都会为我冲一杯咖啡，她温柔地说：“外国人都喝这个的。
”幼小的我总害怕咖啡，酸甜苦涩交错。如今我走遍米萝、上岛、星巴克都找不到小时候喝的那个味道，
直到那天我喝了一杯板蓝根。” </ p >
</ div >
 
< div class = "container-fluid" >
< p >“小时候每当我生病，母亲都会为我冲一杯咖啡，她温柔地说：“外国人都喝这个的。”
幼小的我总害怕咖啡，酸甜苦涩交错。如今我走遍米萝、上岛、星巴克都找不到小时候喝的那个味道，
直到那天我喝了一杯板蓝根。” </ p >
</ div >

下图是显示在浏览器中的样子：

图 2. 容器


网格系统
和我们在《编写第一个响应式页面》中设计的网格系统一样，Bootstrap 也将页面分为行（.row），每行 12 列（.col-md-*）。行必须包含在容器里，根据屏幕大小不同，列又分为.col-xs-、.col-sm-、.col-md-、.col-lg-，分别对应手机(<768px)、平板(≥768px)、中等屏幕电脑(≥992px)和大屏幕电脑(≥1200px)。其中出现的这些像素称为临界点，每当浏览器大小或屏幕尺寸从一个临界点到达另一个临界点时，相应的 CSS 类就会起作用，页面布局就会发生变化。详见下图：

图 3.网格系统

怎么理解上面这个表格呢？假如在电脑上浏览页面，需要将页面分为三列，分别占行宽的 1/4、2/4、1/4，则可编写代码如下：

清单 5. 一行分三列

?
1
2
3
4
5
< div class = "row" >
< div class = "col-md-3" >.col-md-3</ div >
< div class = "col-md-6" >.col-md-6</ div >
< div class = "col-md-3" >.col-md-3</ div >
</ div >

打开浏览器，可以看到它们各自占据了 12 列中的 3、6、3 列，加起来恰好是 12 列。如果我们缩小浏览器窗口，直到其小于 970px，此时会发现变成了三行，堆在一起显示。除过.col-xs-，其他 CSS 类的行为都一样，在屏幕尺寸小于其临界点时，会堆起来显示，只有在屏幕尺寸大于其临界点时，才按列显示，而.col-xs- 在任何情况下都按列显示。
对应不同屏幕尺寸的 CSS 类可以混合使用，比如我想让一个页面在电脑上显示 3 列，在手机上显示成 2 列，则可编写代码如下，在手机上，第三列会换行到下一行显示，并且占据行宽的一半：
清单 6. 在电脑和手机上显示不同数量的列

?
1
2
3
4
5
< div class = "row" >
< div class = "col-xs-6 col-md-3" >.col-md-3</ div >
< div class = "col-xs-6 col-md-6" >.col-md-6</ div >
< div class = "col-xs-6 col-md-3" >.col-md-3</ div >
</ div >

如果希望在所有设备上显示相同的列，只需要定义最小尺寸的.col-xs- 即可，布局会自动扩展到更大尺寸，反之则不成立：
清单 7. 所有设备上显示同数量的列

?
1
2
3
4
< div class = "row" >
< div class = "col-xs-6" >.col-xs-6</ div >
< div class = "col-xs-6" >.col-xs-6</ div >
</ div >

还可以给列一定的偏移量，比如第一列占行宽的 1/4，我们希望第二列向右偏移 6 列，占用行末的 3 列：
清单 8. 列偏移

?
1
2
3
4
< div class = "row" >
< div class = "col-md-3" >.col-md-3</ div >
< div class = "col-md-3 col-md-offset-6" >.col-md-3</ div >
</ div >

列的顺序也可以通过.col-md-push-* 和 .col-md-pull-* 调整，它们的含义是将某元素向后推或向前拉若干列，开发者可使用该特性，将重要内容在手机显示时，拉到前面：
清单 9. 推拉列

?
1
2
3
4
< div class = "row" >
< div class = "col-md-9 col-md-push-3" >.col-md-9 .col-md-push-3</ div >
< div class = "col-md-3 col-md-pull-9" >.col-md-3 .col-md-pull-9</ div >
</ div >

更让人兴奋的是，这种网格系统还可以嵌套，这样就能进行各种各样复杂的布局了:
清单 10. 嵌套

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< div class = "row" >
< div class = "col-sm-9" >
Level 1: .col-sm-9
< div class = "row" >
< div class = "col-xs-8 col-sm-6" >
Level 2: .col-xs-8 .col-sm-6
</ div >
< div class = "col-xs-4 col-sm-6" >
Level 2: .col-xs-4 .col-sm-6
</ div >
</ div >
< div class = "col-sm-3" >
Level 1: .col-sm-3
</ div >
</ div >
</ div >

上面的代码总体上分成两列，其中第一列又嵌套了两列。
Bootstrap 的网格功能为网页布局提供了各种可能性，而且使用起来非常简单，下面我们不妨通过一个案例，看看使用 Bootstrap 编写一个响应式页面是多么简单。

三、实战
假设现在要实现一个如下面的图片所示的网页：
图 4. 网页设计

首先，我们先将网页元素划分成相应的行和列，下图是作者的划分：
图 5. 将网页设计划分成行和列

据此，定义我们的 HTML 结构，并添加适当的 Bootstrap CSS 类：
清单 11. 定义 HTML 结构

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
< div class = "container" >
< div class = "row" >
< div class = "col-md-3" >
< img src = "http://placehold.it/150x150" >
</ div >
< div class = "col-md-9" >
< h1 >Jane Doette</ h1 >
< h3 >front-end ninja</ h3 >
</ div >
</ div >
< hr >
< div class = "row" >
< div class = "col-md-12" >
< img src = "http://placehold.it/950x350" >
</ div >
</ div >
< div class = "row" >
< div class = "col-md-12" >
< h2 >Featured Work</ h2 >
</ div >
</ div >
< div class = "row" >
< div class = "col-md-4" >
< img src = "http://placehold.it/250x250" >
< h2 >applify</ h2 >
< a href = "https://github.com/udacity/applify" >https://github.com/udacity/applify</ a >
</ div >
< div class = "col-md-4" >
< img src = "http://placehold.it/250x250" >
< h2 >sunflower</ h2 >
< a href = "https://github.com/udacity/sunflower" >https://github.com/udacity/sunflower</ a >
</ div >
< div class = "col-md-4" >
< img src = "http://placehold.it/250x250" >
< h2 >bokeh</ h2 >
< a href = "https://github.com/udacity/bokeh" >https://github.com/udacity/bokeh</ a >
</ div >
</ div >
</ div >

作者编写上述代码花了不到 10 分钟，由于没有图片，作者使用了网上提供的占位图片。在浏览器里打开该页面，已经接近设计了，但字体、大小写、排版还与设计不符。接下来就要进行微调，浏览 Bootstrap 文档，可以发现相关的 CSS 类，最终完成的效果如下图所示：
图 6. 实现效果


更有意思的是，当你缩小浏览器窗口，或者从手机上访问该页面时，会发现它已经是一个简单的响应式页面了


原文地址：http://blog.csdn.net/zhihui1017/article/details/53735613

执2017
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
20分钟成功编写bootstrap响应式页面 就这么简单
11-23
使用它编写响应式页面快捷、方便，而且屏蔽了浏览器差异。使用了 Bootstrap 后，再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。 经过学习，我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将...
利用Bootstrap制作产品着陆页（响应式布局）
最新发布
Zhang_wang_yun的博客
04-06 1747
利用Bootstrap制作产品着陆页（响应式布局）
实现响应式网页设计
m0_49551563的博客
09-02 3681
利用 CSS 和 JavaScript 自动根据设备屏幕尺寸调整页面的布局和样式的网页，主要解决固定宽度和影响布局的元素的问题。
编写bootstrap响应式页面 就这么简单
IT小智博客
12-19 9722
Bootstrap 是现在最流行的响应式 CSS 框架，它以移动设备优先，能够快速适应不同设备。使用它编写响应式页面快捷、方便，而且屏蔽了浏览器差异。使用了 Bootstrap 后，再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。 经过学习，我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍 Bootstrap，并且带领大家一起实现一个响应式页面。 图 1.
网页设计与制作（项目二--响应式页面制作）
qq_54350870的博客
10-11 1178
1
bootstrap支付宝充值html,jQuery+Bootstrap手机端支付宝金额充值表单页面代码
weixin_35740814的博客
06-23 609
js代码var $amountInput = $('[type="number"]');var amount = '';var $getId = $('[type="hidden"]');var getparse=ParaMeter();$getId.val(getparse.id);$(".quick_amount p").off("click").on("click", function ()...
运用jQuery和bootstrap编写的前端html响应式页面-时倾零食铺子
11-16
运用bootstrap jQuery Wow.js 页面个数6个: 首页、列表页、关于页、新闻页、内容页
Bootstrap响应式登录界面模板
06-15
Bootstrap响应式登录界面模板，提供简单的响应式登录界面。
Bilibili:基于Bootstrap响应式的仿哔哩哔哩网站，包括登陆注册，首页及弹幕视频播放页面
05-14
基于html+css+Bootsrtap+jquery+javascript响应式的仿哔哩哔哩动画网站 弹幕视频使用video.js插件 user:123 pwd:321
7.响应式网页(BootStrap)
wusandaofwy的博客
07-25 493
响应式网页(BootStrap),引入css和js,介绍部分标签.
怎么用bootstrap写响应式的网页
weixin_42593701的博客
02-16 632
Bootstrap是一种流行的前端框架，可以帮助您快速创建响应式的网页。以下是使用Bootstrap编写响应式网页的基本步骤： 引入Bootstrap：在HTML文档中添加Bootstrap的CSS和JavaScript文件。您可以从Bootstrap官网下载这些文件，也可以使用CDN链接来加载它们。 布局容器：在HTML文档中创建一个容器元素，例如。容器将在不同屏幕大小的情况下自动调整其宽度...
利用 Bootstrap 模拟一个响应式页面
CodingmanNAN的博客
01-13 813
Bootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。
使用Bootstrap框架制作响应式移动网页
g20083959的博客
07-14 7615
Bootstrap在开发响应式移动页面方面是最流行的HTML，CSS，和JS框架。在官方网站上分别展示在CSS,Componts,还有JS的相关组件。本文详细介绍通过bootstrap框架制作一个精美的网页（内容方面参考慕课网的相关资料） 其中顶部页面的导航栏部分点击“特点”可以实现小标兰，点击“关于可以弹出介绍性的文字”图片可以实现滚动效果。最主要的功能是当页面缩放时，网页中所有的元素都能自适应
bootstrap快速开发响应式页面
桥本环奈
06-15 706
最近在用 Bootstrap做网页，Bootstrap提供的样式和组件很多，开发简单的页面也基本够用了。虽然使用里面的样式可能不能完全满足需求，但是可以在Bootstrap提供的样式基础上，自己重新写属性覆盖，也比之前的CSS完全靠手写高效得多了。还有一点就是使用Bootstrap开发响应式页面真的非常方便，不用去自己写媒体查询，不用设置页面在各种设备下的样式。Bootstrap以及提供了相应的类，只需要直接引用就可以。 Bootstrap版本：v3.3.7 编辑器：vscode 1、栅格系统 栅格系统
前端工程师还不会做响应式HTML5网站？这个模板你应该好好看看
xunmaw001的博客
01-30 488
例如：一套代码多端使用，降低企业投入成本已经是刚需，对于前端程序员来说学会如何编写响应式代码尤为重要，接下来给大家讲解一个现成的响应式官网模板。提示：以下是本篇文章正文内容，下面案例可供参考响应式设计（RWD，Responsive Web Design）是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面，随着屏幕尺寸的改变，自适应地改变页面布局。
Bootstrap设计可响应式的移动网页
weixin_62190821的博客
10-07 2074
picture>标签包含标签和标签，根据不同设备屏幕的宽度，显示不同的图片。实现此效果主要是利用媒体查询技术中的 media 关键字，获取当前设备屏幕的宽度，根据不同的设备宽度，改变表格的样式，将表头有横向排列变成纵向排列。通过利用媒体查询技术中的media 关键字，获取当前设备屏幕的宽度，根据不同的设备将不重要的列设置为：display：none，从而隐藏指定的列。利用媒体查询技术中的 media 关键字，获取当前设备屏幕的宽度，根据不同的设备显示不同的 CSS样式。
零基础Bootstrap入门教程(4)--开发标准的响应式网页
程序员大阳
02-18 2316
本文目录1. 背景2. 创建标准HTML5页面3. 添加响应式内容4. 小结 1. 背景 响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页，本篇就来讲解下如何使用Bootstrap构建符合标准规范的响应式网页。 2. 创建标准HTML5页面 首先创建一个标准的HTML5网页，代码如下： <!DOCTYPE html> <html> <head> <title>boostrap-responsive</title>
Bootstrap编写的一个响应式网页
qq_45572615的博客
10-12 1932
首先得在bootstrap下载一个包导入项目内，https://v3.bootcss.com/getting-started/#download。链接在这里！ Bootstrap： Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。 学过css和html的特别容易上手 快速开发 Web 应用程序和网站的前端框架 下载完成后解压放在项目中即可，如下面项目目录 然后这便是代码(图片网上随便找的)！ <!DOCTYPE html> <html lang.
Bootstrap写一个简单的响应式网页
mx_is_bang的博客
11-28 6021
响应式网页 响应式网页设计采用css的媒体查询技术，将包括弹性布局，弹性图片、媒体和媒体查询整合在一起，为响应式网页设计。 页面会随着窗口的尺寸变化做出相应的改变。 视口是浏览器显示的内容区域，不包括工具栏标签栏。 响应式设计需要寻找一个临界点，当视觉效果不符合人的审美或影响了内容获取时对应的值，这个临界值是响应式设计的断点。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值