基于Bootstrap3制作响应式布局网站（一）

最新推荐文章于 2024-08-01 00:22:38 发布
最新推荐文章于 2024-08-01 00:22:38 发布
阅读量3.5w 收藏 71
点赞数 19
分类专栏： web开发 文章标签： bootstrap 响应式 网页布局 前端 网站
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maxwell_nc/article/details/45791745
版权
本文介绍了如何使用Bootstrap3创建响应式布局网站，包括响应式布局的概念、Bootstrap下载与配置，尤其是本地和CDN配置方式。此外，文章详细讲解了栅格系统的工作原理，帮助读者理解如何利用栅格实现不同屏幕尺寸下的布局调整。
摘要由CSDN通过智能技术生成

前言

原创文章，欢迎转载，请保留出处。
有任何错误、疑问或者建议，欢迎指出。
我的邮箱:Maxwell_nc@163.com

现在的上网设备十分多，每种设备的分辨率都不一样，传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局，而Bootstrap的出现使得网站开发更加简单快捷。Bootstrap是Twitter推出的一个用于前端开发的开源工具包，其中的一个特性就是支持响应式布局。

何为响应式布局

我们可以查阅百度百科得到比较权威的解析：

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

看下下面的两种设备浏览显示的效果：

大屏

上面的是当设备宽度大于768px时，下面则是在小屏幕显示的效果

小屏

侧边栏和导航条都被隐藏，通过按钮显示

弹出侧边栏

下载Bootstrap3

首先我们使用的开发平台是Windows7+Eclipse for J2EE
首先要下载Bootstrap3，可以到Bootstrap中文网下载，只需要下载用于生产环境的 Bootstrap，感兴趣还可以下源码研究：
http://v3.bootcss.com/getting-started/#download
另外要注意，要使用Bootstrap必须要有JQuery，可以从Bootstrap中文网的CDN里面保存jquery的压缩版即可，地址是：
http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js
准备后就开始配置项目

最低0.47元/天 解锁文章
Maxwell_nc
关注
专栏目录
基于Bootstrap3制作响应式布局网站（三）
成长之路
05-29 6872
前两篇已经简单地介绍了Bootstrap的基本特性和原理，接下来我们来实现一般网站都需要的导航栏，显而易见的例子就是CSDN本身就有两种导航栏。文章主要分为顶部导航栏和侧边导航栏两个部分。这里是实现的都是响应式的导航栏。原创文章，欢迎转载，请保留出处。 有任何错误、疑问或者建议，欢迎指出。 我的邮箱:Maxwell_nc@163.com
css3+html5 响应式布局网站模板
10-15
css3+html5 响应式布局网站模板，绝对会让喜欢
第一次使用bootstrap3做的响应式网站
weixin_30675967的博客
02-14 141
第一次使用bootstrap3,发现对移动支持得不错，可以很快的开发出一个支持移动和PC端的网站 作为一个后台程序员觉得得界面做得还可以， 按以前是只能自己看看了 时间线来自国外网站，使用到的css如下 .timeline { list-style: none; padding: 20px 0 20px; position: relative; ...
响应式 Web 设计指南（二）
最新发布
龙哥盟
08-01 403
原文：zh.annas-archive.org/md5/50CFC4166B37BD720D7E83B7A7DE4DFD 译者：飞龙 协议：CC BY-NC-SA 4.0 第五章：使用 Bootstrap 开发投资组合网站 Bootstrap (getbootstrap.com/) 是最坚固的前端开发框架之一。它具有令人惊叹的功能，如响应式网格、用户界面组件和 JavaScript 库，让我们能够快速构建响应式网站。 Bootstrap 如此受欢迎，以至于 Web 开发社区积极支持它，通过开发各种形式的
37个极具创意的响应式布局网站
精彩人生
07-13 1710
Responsive设计，在国内称为响应式布局。由于终端设置越来越来，以前那些桌面设计不在满足于当今潮流的Web设计。于是在Web设计中推出一种新的设计理念，那就是响应式的Web设计，这种设计意味着网站能根据不同的媒介，使用Web页面不仅能在标准的电脑屏幕上浏览，还能在各种不同的智能手机和平板电脑上浏览。更确切的说，原则可以让一个在1292像素显示的四列布局，在1025像素宽度的屏幕上显示成两列，
Bootstrap-03-响应式布局
Void的博客
03-01 269
Bootstrap的响应式布局原理 什么是响应式布局 所谓响应式布局：为了保证不同分辨率的终端的正常布局——一个网站能够兼容多个终端（不是为每个终端做一个特定的版本）旨在为不同终端的用户提供更加舒适的界面和更好的用户体验 bootstrap的响应式布局-例子 bootstrap针对不同设备的分辨率设置不同的阈值，xs、sm、md、lg 同样的内容对于笔记本这样的设备，以及在小屏幕上会有不一样的效果 比如以下的html： <div class="container"> &
bootstrap响应式网页布局
老徐的博客只有干货
05-04 2436
bootstrap可以说是没有布局和审美概念的后端狗的福利。使用它的栅格系统可以轻松的对网页进行布局，而且可以做到响应式的布局。看起来很酷，接下来我就会总结自己在开发博客系统中用到的知识点及实战案例给大家，作为一个专栏管理。 知识点 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。 container:用于固定宽度并支持响...
基于Bootstrap3的响应式布局网站教程源码（二）
05-22
基于Bootstrap3的响应式布局网站教程源码（二），基础入门，适合新手，有齐全的注释，详细教程参考我的博文。除了博文所写之外，我还更新了如何制作BOX的源码。 为了防止有些人不知道怎么用，我还不厌其烦的讲解下...
基于Bootstrap3制作响应式布局网站（四）
成长之路
06-05 2844
前一篇介绍了如何利用Bootstrap3制作响应式的导航栏，本篇简单地介绍如何实现导航栏跳转。当然这个跳转并非简单的a标签加上herf属性，而是实现一种不用刷新整个页面的跳转。 原创文章，欢迎转载，请保留出处。 有任何错误、疑问或者建议，欢迎指出。 我的邮箱:Maxwell_nc@163.com
bootstrap响应式星巴克网站
11-19
这个“bootstrap响应式星巴克网站”项目，显然是一个基于Bootstrap框架创建的示例网站，旨在模仿星巴克的官方网站，为开发者提供一个学习和实践响应式设计的平台。 首先，我们要了解Bootstrap的核心概念。Bootstrap...
27个手机网站源码（响应式布局）
04-20
1，微官网美食订餐html5触屏响应式手机wap网站订餐模板 2，仿Midifan新闻触屏版手机wap新闻网站模板解压密码联系旺旺sunzhipeng1234 3，Ocean微官网触屏版html5响应式手机wap网站模板 4，微官网html5触屏响应式手机wap网站模板 5，Epsilon Elements触屏版html5响应式手机wap网站模板 6，凤凰汽车触屏版html5手机wap汽车网站模板
20份经典bootstrap、响应式网页源码。没事可以练练，不错的
01-28
20份经典bootstrap、响应式网页源码。没事可以练练，不错的
bootstrap左右结构项目模版(是响应式布局)
05-14
详情请看http://www.jq22.com/jquery-info4155
bootstrap实现响应式登录页面
08-28
bootstrap实现响应式登录页面
bootstrap 响应式网页demo
01-09
bootstrap 响应式网页demo bootstrap 响应式网页demo源码 一共四个demo，可供参考
响应式网站布局类型
互零网络科技有限公司
08-27 393
许多人对如何构建响应式布局网站了解不多。 实际上，这种类型的网站会根据用户浏览站点所使用的设备来生成页面布局尺寸，从而自动适应这些设备。 无论是与网站兼容还是与用户的需求兼容，都会给用户体验带来意想不到的影响，响应式网站已成为网站建设的标准。 鉴于其作用，理解这三种响应式网站布局也很重要。 1.在固定模式下灵活切换布局 网站类型 该响应主要是根据市场上使用的设备的大小，可以灵活地调整页面以形成多个页面布局设计，然后可以检查最佳尺寸并 根据设备的屏幕尺寸选择。 尽管这种响应式网站具有构建网站成本的优势
响应式布局
sally18的博客
08-20 2052
前言 响应式布局指的是同一页面在不同的屏幕尺寸下游不同的布局，传统的开发方式是PC端开发一套，手机端开发一套，而使用响应式开发布局只要开发一套代码就够了，缺点就是CSS 比较重。 响应式布局表现： 响应式布局优缺点： 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计方案， 多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混.
数据响应式原理
shenzhenya的博客
01-07 471
数据响应式原理响应式处理入口 响应式处理入口
基于bootstrap和html5制作一个网站
12-04
我们可以使用Bootstrap的网格系统来实现网站的响应式布局，确保网站可以在不同设备上都有良好的展示效果。 同时，Bootstrap还提供了各种样式和组件，比如按钮、表单、卡片、导航栏等，可以帮助我们美化网站的外观，...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值