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

响应式网页

响应式网页设计采用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 navbar-dark bg-dark "><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarText"><ul class="navbar-nav mr-auto"><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><li class="nav-item"><a class="nav-link" href="#">人物评价</a></li></ul></div>
</nav>

在屏幕尺寸较大时

缩小窗口的大小

最开始做的时候无论屏幕大小都是窄屏这样显示，参考Bootstrap做响应式导航栏意识到最开始

页面代码

<div class="container"><h2 id="title">问卷调查</h2><form><!--第一行--><div class="row"><div class="col-lg-6 col-md-12"><!--左边--><div class="form-group"><label for="email">邮件地址</label><input type="email" class="form-control" id="email" placeholder="邮箱地址"></label></div><div class="form-group"><label for="username">昵称</label><input type="text" class="form-control" id="username" placeholder="您的昵称"></label></div><div class="form-group"><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="sex" id="sex_male" value="m" checked><label class="form-check-label" for="sex_male">男</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="sex" id="sex_female" value="f" checked><label class="form-check-label" for="sex_female">女</label></div></div><div class="form-group"><label for="birth">出生日期</label><input type="date" class="form-control" id="birth"></label></div></div><div class="col-lg-6 col-md-12"><!--右边--><h5 id="prefer">请选择所有你喜欢的作品</h5><div class="row"><div class="col-6 col-md-6 col-lg-3 movie"><label for="movie_1"><img src="./img/i1.jpg"></label><div class="form-check"><input class="form-check-input position-static" type="checkbox" id="movie_1"value="1"></div></div><div class="col-6 col-md-6 col-lg-3 movie"><label for="movie_2"><img src="./img/i1.jpg"></label><div class="form-check"><input class="form-check-input position-static" type="checkbox" id="movie_2"value="2"></div></div><div class="col-6 col-md-6 col-lg-3 movie"><label for="movie_3"><img src="./img/i1.jpg"></label><div class="form-check"><input class="form-check-input position-static" type="checkbox" id="movie_3"value="3"></div></div><div class="col-6 col-md-6 col-lg-3 movie"><label for="movie_4"><img src="./img/i1.jpg"></label><div class="form-check"><input class="form-check-input position-static" type="checkbox" id="movie_4"value="4"></div></div></div></div></div><!--第二行--><div class="row"><div class="col-12"><div class="form-group"><label for="reason">请说明你的理由</label><textarea class="form-control" id="reason" rows="3"></textarea></div><div class="form-group"><button type="submit" class="btnbtn-primary">提交</button></div></div></div></form>
</div>

宽屏幕时

窄屏幕时

关于布局
开始定义一个容器container
每一行row都要在容器里面
在每一行（row）里面有12列，可以根据页面需要进行左右划分。

Bootstrap写一个简单的响应式网页相关推荐

【小河今学 | Bootstrap-v3+animate+wow】制作一个简单的响应式网站
7.29 今天的作业是响应式企业官网开发,包括nav.home.bbs.html5.BootStrap.course.app.contact.footer等9个部分. 本来应该昨天就做好的,拖延症犯了 ...
java响应式导航栏原理_一个简单的响应式导航栏
背景导航对于一个网站重要性,不言而喻.网站上导航一般都置于网站的顶端,每一个导航项都直接详细的列出来,但如果需要去适配移动端的话这样简单粗暴的方法就不大可行了,因为受移动端屏幕宽度所限,在电脑端完美 ...
BootStrap框架的使用及响应式网页布局
1.BootStrap 概念:将常见效果进行统一封装后形成的框架. 特点:基于框架开发,效率高,稳定性高. 关于Bootstrap:前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合 ...
响应式网页设计工具：Bootstrap Studio for Mac
未来软件园为大家推荐一款可以快速进行响应式网站设计的Mac软件,Bootstrap Studio为大家提供了大量内置组件,使得大家只需要通过拖放方式就可以组装响应式网页,十分方便.Bootstrap ...
响应式布局（响应式网页的构成bootstrap框架）
一.响应式布局 1.概念响应式又叫自适应网页,可以根据网页窗口的调整而自动布局,不会导致页面效果的错乱,主要是针对移动端浏览器:通过响应式布局,可以使一套代码同时兼容多个尺寸的屏幕 2.响应式网页的 ...
响应式移动端框架_简单，响应式，移动优先导航
响应式移动端框架我们将构建一个简单的响应式网站导航. 我们的解决方案将帮助我们强调页面的内容 ,可以说是设计移动设备时的重中之重. 不会涉及JavaScript,我们将通过Mobile First方 ...
深入了解Vue 2响应式原理，并手写一个简单的Vue
1. Vue 2的响应式原理 Vue.js 一个核心思想是数据驱动.所谓数据驱动是指视图是由数据驱动生成的,对视图的修改,不会直接操作 DOM,而是通过修改数据.vue.js里面只需要改变数据,Vue ...
用bootstrap写一个简洁的网页
在最近两周,我学习了bootstrap前端开发框架来快速制作一个网页,以往自己用html,css等学习的网页知识来写一个网页,往往需要挺长的时间.这次用bootstrap写的这个demo前后大概用了2 ...
响应式网页设计简单入门
Overview: 构造基本的HTML页面动态加载样式表 Viewport 字体缩放侧边栏导航菜单图片自适应其他总结说到响应式网页设计(Responsive web design),最近 ...

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

响应式网页

Bootstrap写一个简单的响应式网页相关推荐

最新文章

热门文章