Bootstrap写一个简单的响应式网页

最新推荐文章于 2024-10-10 10:42:41 发布
最新推荐文章于 2024-10-10 10:42:41 发布
阅读量6.2k 收藏 73
点赞数 7
分类专栏： 前端框架 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mx_is_bang/article/details/103302157
版权
本文介绍了如何使用Bootstrap实现响应式网页设计，涉及到媒体查询、弹性布局和断点选择。通过引入Bootstrap框架，并展示不同屏幕尺寸下导航栏的样式变化，讲解了如何创建适应不同设备的网页布局。
摘要由CSDN通过智能技术生成
响应式网页

响应式网页设计采用css的媒体查询技术，将包括弹性布局，弹性图片、媒体和媒体查询整合在一起，为响应式网页设计。
页面会随着窗口的尺寸变化做出相应的改变。
视口是浏览器显示的内容区域，不包括工具栏标签栏。可以通过设置width来控制视口的大小，device-width为设备宽度。

<meta name= "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

响应式设计需要寻找一个临界点，当视觉效果不符合人的审美或影响了内容获取时对应的值，这个临界值是响应式设计的断点。
目前可被采用的响应式布局：
可切换的固定布局：以像素为基本单位，参考主流设备尺寸，设计几套不同的布局。
弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕和浏览器宽度，完美利用有效空间展现最佳效果。
混合布局：可以采用像素或百分比作为页面单位。

首先通过cdn引入框架，注意使用bootstrap的js文件前要引入jquery

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

导航栏

<nav class="navbar navbar-expand-lg n
最低0.47元/天 解锁文章
向日葵小班-赖东东
关注
专栏目录
自学web前端练手——用Bootstrap实现简易版响应式页面
lvshaoshishang的博客
03-28 833
主要采用了Bootstrap的栅格系统、导航条、按钮组、巨幕、列表组，今晚刚学这个也太好用了吧！！ 不用自己写代码只需要改成中文内容就行了O(∩_∩)O哈哈~ 效果如下： pc端显示效果如下： 调用F12点击切换设备工具栏后显示效果如下：（我自己用手机打开该页面测试过，就是下面这个效果） 代码如下： <!DOCTYPE html> <html lang="en"> &l...
Web前端大作业：基于bootstrap响应式页面，家具装修公司网站
qq_38515380的博客
04-09 319
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
编写bootstrap响应式页面 就这么简单
IT小智博客
12-19 9783
Bootstrap 是现在最流行的响应式 CSS 框架，它以移动设备优先，能够快速适应不同设备。使用它编写响应式页面快捷、方便，而且屏蔽了浏览器差异。使用了 Bootstrap 后，再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。 经过学习，我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍 Bootstrap，并且带领大家一起实现一个响应式页面。 图 1.
使用BootStrap搭建一个简单的网页界面
最新发布
weixin_65921319的博客
10-10 394
网页是分成12份的，对应不同的屏幕，使用不同的栅格系统类前缀。比如在
Bootstrap编写的一个响应式网页
BUG糕手的博客
10-12 2108
首先得在bootstrap下载一个包导入项目内，https://v3.bootcss.com/getting-started/#download。链接在这里！ Bootstrap： Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。 学过css和html的特别容易上手 快速开发 Web 应用程序和网站的前端框架 下载完成后解压放在项目中即可，如下面项目目录 然后这便是代码(图片网上随便找的)！ <!DOCTYPE html> <html lang.
bootstrap4 创建一个简单页面
biu的博客
03-29 5373
第一次尝试用前端框架写了一个简单页面。最重要的应该是先好好读一遍使用文档啊啊。先贴一波官方链接：http://www.bootcss.com/可以少走很多弯路_(:з」∠)_ 另外模板这个东西新手们打开看看也可以学到很多https://v4.bootcss.com/docs/4.0/examples/先贴一个预览图：页脚还有一点内容以下是html中的内容&lt;!DOCTYPE html&gt; ...
零基础Bootstrap入门教程(4)--开发标准的响应式网页
程序员大阳
02-18 2413
本文目录1. 背景2. 创建标准HTML5页面3. 添加响应式内容4. 小结 1. 背景 响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页，本篇就来讲解下如何使用Bootstrap构建符合标准规范的响应式网页。 2. 创建标准HTML5页面 首先创建一个标准的HTML5网页，代码如下： <!DOCTYPE html> <html> <head> <title>boostrap-responsive</title>
Bootstrap-个人简历响应式网页模板
06-08
这个“Bootstrap-个人简历响应式网页模板”充分利用了Bootstrap的核心特性，为创建一个专业且适应性强的个人简历网站提供了便捷的起点。 1. **响应式设计**：Bootstrap3.3.1版本内置了响应式网格系统，它允许网页...
HTML+CSS+JS+JQ+Bootstrap的跋涉旅行服务响应式网页.7z
06-28
本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建...
HTML+CSS+JS+JQ+Bootstrap的创意建筑设计响应式网页.7z
06-28
本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建...
HTML+CSS+JS+JQ+Bootstrap的汉堡专卖店响应式网页模板.7z
06-28
本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建...
利用 Bootstrap 模拟一个响应式页面
CodingmanNAN的博客
01-13 861
Bootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。
bootstrap快速开发响应式页面
桥本环奈
06-15 771
最近在用 Bootstrap做网页，Bootstrap提供的样式和组件很多，开发简单的页面也基本够用了。虽然使用里面的样式可能不能完全满足需求，但是可以在Bootstrap提供的样式基础上，自己重新写属性覆盖，也比之前的CSS完全靠手写高效得多了。还有一点就是使用Bootstrap开发响应式页面真的非常方便，不用去自己写媒体查询，不用设置页面在各种设备下的样式。Bootstrap以及提供了相应的类，只需要直接引用就可以。 Bootstrap版本：v3.3.7 编辑器：vscode 1、栅格系统 栅格系统
用Bootstrap网站主页(轮播图、导航栏、栅格系统)
weixin_622464的博客
11-11 3526
效果如图： 主要代码： index.html <!DOCTYPE html> <html lang="zh-CN"> <!--指定为中文-中国--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
bootstrap模板成品响应式网站大作业
m0_69931255的博客
05-10 495
原创了一个以人物ip介绍为主题，以Loopy露比小海狸为内容的bootstrap框架网页设计，网站具有响应式(电脑端，平板端，手机端都可适应)。7个页面，页面之间可相互跳转，不想要的页面D elete。有首页，人物介绍，周边，相册，留言，登录，注册等等页面。dw、hb、vs等软件都可打开可运行，网页内文字图片素材随时可自行替换。风格简约可爱，代码结构简单，符合初学者水平。
bootstrap响应式布局练习
a88480的博客
10-16 804
bootstrap响应式布局练习 在三种不同的屏幕下呈现不同的效果 大屏(pc端) 小屏下(平板) 超小屏(手机) html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht
移动端作业3：利用bootstrap实现响应式滑动菜单
weixin_47065927的博客
09-17 790
这里只需引用bootstrap.min.css插件即可 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>响应式滑动菜单</title>
大学生bootstrap框架网页作业成品 bootstrap响应式网页制作模板 学生家乡网页bootstrap框架网站作品 html静态网页设计制作 dw静态网页成品模板素材网页
qq_38514511的博客
03-27 793
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
使用BootStrap搭建主页
qq_1114382703的博客
05-04 1380
使用Bootstrap来搭建主页
用bootstrap写一个响应式网页
04-18
很高兴为你服务！关于你的问题，我可以提供一些基本的指导。 Bootstrap是一个非常流行的响应式设计框架，可以协助你构建适用于桌面、平板电脑和手机等不同大小屏幕的网页。以下是一些基本的用法： 1. 在你的HTML文档中引入Bootstrap库： ```html <!-- 最新版本的Bootstrap库 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script> ``` 2. 使用Bootstrap提供的类来构建网页布局和样式： ```html <!-- 基本网页结构 --> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">网页标题</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于</a> </li> <li class="nav-item"> <a class="nav-link" href="#">联系我们</a> </li> </ul> </div> </nav> </header> <main> <div class="container-fluid"> <div class="row"> <div class="col-md-6">内容区1</div> <div class="col-md-6">内容区2</div> </div> </div> </main> <footer>版权声明</footer> </body> ``` 以上是Bootstrap的基本使用方法，你可以参考官方文档进行更深入的了解，祝你编写成功！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值