Bootstrap编写的一个响应式网页

首先得在bootstrap下载一个包导入项目内，https://v3.bootcss.com/getting-started/#download。链接在这里！

Bootstrap：

Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
学过css和html的特别容易上手
快速开发 Web 应用程序和网站的前端框架

下载完成后解压放在项目中即可，如下面项目目录

然后这便是代码(图片网上随便找的)！

<!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-width, initial-scale=1"><title>Bootstrap 101 Template</title><link href="css/bootstrap.css" rel="stylesheet"><!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><script src="js/respond.js"></script><![endif]--><style type="text/css">#im1{height: 45px;width: 70px;}#im2{height: 230px;width: 160px;}hr{border: #00007f 1px solid;}</style></head><body><div class="container"><div class="row bg-info"><div class="col-xs-1 "><img id="im1" src="img/logo.PNG"></a></div><div class="col-xs-1 navbar-brand"><a href="#">HOME</a></div><div class="col-xs-1 navbar-brand"><a href="#">MTML</a></div><div class="col-xs-1 navbar-brand"><a href="#">CSS</a></div><div class="col-xs-1"><a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown">JS <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">HTML</a></li><li><a href="#">CSS</a></li><li><a href="#">JS</a></li></ul></div><div class="col-xs-3"></div><div class="col-xs-4"><form class="navbar-form navbar-right"><div class="form-group"><input type="text" class="from-control" placeholder="Search"/></div></form></div></div></div><h6></h6><div class="container"><div class="row"><div class="col-xs-12 col-sm-6 col-md-2 bg-danger text-danger"><form class=""><div class="form-group"><h6></h6><input type="text" placeholder="请输入...."/></div><div class="form-group"><h6></h6><input type="text" placeholder="请输入...."/></div></form><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea magni vel voluptatem dolore consectetur corporis quaerat velit provident a eaque perferendis veritatis quam reiciendis mollitia quidem voluptas minus. Ad optio!</p></div><div class="col-xs-12 col-sm-6 col-md-7 bg-info text-info"><img id="im2" src="img/a3.jpg" class="img-thumbnail"><img id="im2" src="img/a4.jpg" class="img-thumbnail"><img id="im2" src="img/a5.jpg" class="img-thumbnail"><img id="im2" src="img/a8.jpg" class="img-thumbnail"><h6></h6><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio repudiandae omnis nobis labore assumenda excepturi ad similique consequatur! Eveniet quam officiis id consequuntur nostrum ullam fugit commodi ducimus magni ab!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus tempore mollitia omnis aperiam? Saepe tenetur iure alias reiciendis temporibus possimus soluta inventore laboriosam veritatis molestiae fugiat ut fugit magni neque.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem architecto quae soluta totam repellat rerum suscipit possimus laborum sint labore delectus corporis mollitia excepturi error aspernatur autem neque nam beatae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit maiores temporibus nisi porro animi quae similique illum consequuntur laboriosam saepe ipsum id perferendis at provident nesciunt magni minus dolore odit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi ipsum illum quod reiciendis qui reprehenderit deserunt quaerat aliquam mollitia commodi dignissimos laudantium nulla deleniti placeat voluptates laborum fuga. Fugiat incidunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor maiores ut minima rerum obcaecati aliquid eveniet atque omnis esse commodi vero cupiditate nesciunt a eos magni? Obcaecati impedit dolores quibusdam.</p></div><div class="col-xs-3 bg-success text-success hidden-xs hidden-sm"><h6></h6><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium corrupti deleniti minima delectus ut expedita aliquid? Debitis nulla nesciunt velit quidem doloribus nihil perspiciatis illo harum deleniti enim officia excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae debitis blanditiis iste quidem natus ea inventore quas rerum eius ab! Consectetur repellendus est. Officia aliquam autem earum alias eaque corporis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor omnis ex ratione culpa in cum illo minus nihil veritatis repudiandae aliquam atque quis suscipit corrupti asperiores a nostrum fuga voluptatum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laborum molestiae delectus architecto inventore quam expedita nobis cumque pariatur maiores labore commodi. Fugit obcaecati enim sit quaerat eius molestias ex.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ipsam qui molestias eveniet consequuntur quam possimus officia ut voluptatem necessitatibus hic laboriosam modi alias autem excepturi tempora atque. Ullam est!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque porro aliquam debitis deserunt corporis est. Officiis veritatis dignissimos minima vel ut molestias culpa veniam quibusdam dolores nihil nemo eligendi sunt!</p></div></div><hr ></div><p class="text-center">&copy;2020-10-12 版本专属作者所有</p><script src="js/jquery-1.9.1.js"></script><script src="js/bootstrap.js"></script></body>
</html>

最后便是运行结果了！

（屏幕尺寸pc端）

（屏幕尺寸pad）

（屏幕尺寸手机端）

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

CSS——什么是响应式网页？如何实现一个响应式网页
响应式网页是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能.响应式布局是让所有的人能在这些设备上让网站运行正常. 媒体查询 CSS3中的增加了更多的媒体查询,就像if条件表达式一样 ...
12个最佳的响应式网页设计教程，轻松带你入门！
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
12个最佳的响应式网页设计教程，轻松带你入门
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
Bootstrap写一个简单的响应式网页
响应式网页响应式网页设计采用css的媒体查询技术,将包括弹性布局,弹性图片.媒体和媒体查询整合在一起,为响应式网页设计. 页面会随着窗口的尺寸变化做出相应的改变. 视口是浏览器显示的内容区域,不包括 ...
响应式网页设计工具：Bootstrap Studio for Mac
未来软件园为大家推荐一款可以快速进行响应式网站设计的Mac软件,Bootstrap Studio为大家提供了大量内置组件,使得大家只需要通过拖放方式就可以组装响应式网页,十分方便.Bootstrap ...
响应式布局（响应式网页的构成bootstrap框架）
一.响应式布局 1.概念响应式又叫自适应网页,可以根据网页窗口的调整而自动布局,不会导致页面效果的错乱,主要是针对移动端浏览器:通过响应式布局,可以使一套代码同时兼容多个尺寸的屏幕 2.响应式网页的 ...
零基础Bootstrap入门教程(4)--开发标准的响应式网页
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 创建标准HTML5页面 3. 添加响应式内容 4. 小结 1. 背景响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页, ...
使用BootStrap开发一个响应式的页面
1.1 需求开发一套页面,可以适用在PC端,Pad端,和手机端.不影响你的浏览的效果 1.2 分析技术分析 [BootStrap的概述] 1).BootStrap的概念 2).什么是响应式: 响应 ...
前端追梦人响应式网页设计
一. 响应式元素及媒介 1.1 基于宽度百分比的图像缩放 <!DOCTYPE html> <html lang="en"> <head>< ...

Bootstrap编写的一个响应式网页

首先得在bootstrap下载一个包导入项目内，https://v3.bootcss.com/getting-started/#download。链接在这里！

Bootstrap：

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

最新文章

热门文章