Bootstrap教程(4)--开发标准的响应式网页

简介: 本文目录1. 背景2. 创建标准HTML5页面3. 添加响应式内容4. 小结

1. 背景

响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页,本篇就来讲解下如何使用Bootstrap构建符合标准规范的响应式网页。


2. 创建标准HTML5页面

首先创建一个标准的HTML5网页,代码如下:


<!DOCTYPE html>

<html>


<head>

   <title>boostrap-responsive</title>

   <meta charset="utf-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width,initial-scale=1">

</head>


<body>

</body>


</html>


注意其中<!DOCTYPE html>是为了告诉浏览器,当前文档是HTML5文档。


<meta http-equiv="X-UA-Compatible" content="IE=edge">告诉IE浏览器,以尽可能高的仿真版本显示当前网页。所谓仿真版本,指的是IE浏览器可以仿照运行的其他版本的IE,如下图:

image.png

<meta name="viewport" content="width=device-width,initial-scale=1">改行代码则指示了页面的初始宽度为设备宽度,初始缩放比例为100%,这样的话能支持网页在屏幕较小但DPI较高的设备(例如iPhone)上正确显示。


3. 添加响应式内容

首先添加对Bootstrap支持。



<head>

   <title>boostrap-responsive</title>

   <meta charset="utf-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width,initial-scale=1">

   <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

   <!-- 引入jQuery -->

   <script src=" https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

   <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

</head>


注意Bootstrap对响应式的支持,是通过控制网格列在不同容器宽度下占据不同的列数来实现的。


当浏览器容器宽度小于768像素时,Bootstrap会采用.col-xs-开头的列。

当浏览器容器宽度处于[768,992)是,将采用.col-sm-开头的列。

当浏览器容器宽度处于[992,1200)是,将采用.col-md-开头的列。

当浏览器容器宽度大于1200是,将采用.col-lg-开头的列。


注意上面四个宽度尺寸,实际上对应的是手机、平板、小型PC显示器、大型PC显示器,但是随着显示设备的发展,目前这样的预设已经不再精准,需要根据实际情况来具体设置。


好的,有了上面的理论基础,我们来实现一个可以同时支持电脑显示器和手机显示器的网页,代码如下:


<body>

   <div class="container-fluid">

       <div class="row">

           <div class="col-sm-12 col-md-3">

               <img src="bootstrap-logo.jpg" />

           </div>

           <div class="col-sm-12 col-md-3">

               <img src="bootstrap-logo.jpg" />

           </div>

           <div class="col-sm-12 col-md-3">

               <img src="bootstrap-logo.jpg" />

           </div>

           <div class="col-sm-12 col-md-3">

               <img src="bootstrap-logo.jpg" />

           </div>

       </div>

   </div>

</body>


按照上面的设置,当屏幕尺寸较大时,会采用.col-md-3的列显示方式,所以每个图片会占据3/12容器宽度,效果如下:

image.png而当屏幕尺寸较小时,会采用.col-sm-12的列显示方式,所以每个图片会占据12/12,即全部的容器宽度,效果如下:

image.png

4. 小结

Bootstrap实现响应式网页的方式十分简洁优雅,用同一套代码,就能支持各类不同分辨率的设备,优秀!

相关文章
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
|
3月前
|
JavaScript 前端开发
BootStrap在Vue中的安装使用详细教程
这篇文章提供了在Vue项目中安装和使用Bootstrap的详细教程,包括安装jQuery、引入Bootstrap、配置Webpack以及在项目中进行测试和查看效果的步骤。
BootStrap在Vue中的安装使用详细教程
|
3月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
47 0
|
4月前
|
开发框架 前端开发 JavaScript
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
|
3月前
|
存储 JavaScript 前端开发
【Vue.js的神秘力量】一键解锁:如何让Bootstrap和Vuex成为你的开发超能力?
【8月更文挑战第30天】Vue.js是一个轻量且灵活的JavaScript框架,易于上手且功能强大。为提高开发效率和应用交互性,常需集成第三方库。本文介绍如何在Vue.js项目中集成Bootstrap和Vuex,及其它常见第三方库。Bootstrap提供响应式设计和预制组件,通过安装插件和引入CSS/JS即可集成;Vuex作为官方状态管理库,通过安装并创建store来管理组件状态。此外,Vue.js还可轻松集成Axios和Vue Router等库,提升HTTP请求和页面路由功能。合理选择和集成第三方库能显著提升开发效率,但需保持代码可维护性和可读性。
31 0
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(七):分页 & 列表组
Bootstrap 5 保姆级教程(七):分页 & 列表组