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

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

图 1.移动优先，适应不同设备

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

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

还可以选择下载 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 基础模板

Bootstrap 101 Template

Hello, world!

bootstrap 页面分成三列_20分钟成功编写bootstrap响应式页面就这么简单相关推荐

显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...
python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)...
昨日内容回顾 ajax //get post 两种方式做请求get 主要是获取数据 post 提交数据同一个路由地址既可以是get请求也可以是post请求一个路由对应一个函数get请求acce ...
bootstrap响应式页面的一些感想
bootstrap的栅格系统很好用,将整个页面分成了12份,然后随着页面的宽度变化可以跟随着一块变化但是!不能设定页面的宽度,设定宽度的话,他就会把这个宽度分成12份.不能实现响应式页面. < ...
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面 tips 在不同设备中显示的样式页面布局思路 html css tips 这个页面里的图片忒难看,实际可以换一换在不同设备中显 ...
css考核点整理（十一）-响应式开发经验，响应式页面的三种核心技术是什么
响应式开发经验,响应式页面的三种核心技术是什么转载于:https://www.cnblogs.com/yingwo/p/4120389.html
移动端开发-响应式页面
声明现在开发中,响应式页面使用地会比较少.今天对我们来说,最大的收获是: 学会如何去使用前端 UI 框架. 媒体查询 Bootstrap 框架,学会怎么去用,而不是怎么去做东西,因为后面有更好的框架 ...
关于响应式页面的几种处理方法
2021-01-12 我本来还看了一些网页设计的课程,本来想找里面的一部分内容来着,结果怎么也找不到当时的笔记了,唉怪我自己没收好,生气一.使用框架实现响应式做响应式最简单方便的就是用现成的框架或 ...
移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
html5/css3响应式页面开发总结
一,自适应和响应式的区别自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

bootstrap 页面分成三列_20分钟成功编写bootstrap响应式页面就这么简单

Hello, world!

bootstrap 页面分成三列_20分钟成功编写bootstrap响应式页面就这么简单相关推荐

最新文章

热门文章

bootstrap 页面分成三列_20分钟成功编写bootstrap响应式页面 就这么简单

Hello, world!

bootstrap 页面分成三列_20分钟成功编写bootstrap响应式页面 就这么简单相关推荐

最新文章

热门文章

bootstrap 页面分成三列_20分钟成功编写bootstrap响应式页面就这么简单

bootstrap 页面分成三列_20分钟成功编写bootstrap响应式页面就这么简单相关推荐