一、响应式开发

1.框架含义

2.响应式

3.响应式尺寸划分

二、Bootstrap简介

1.Bootstrap概念

2.查阅Bootstrap文档

3.Bootstrap的使用

（1）创建文件夹结构

（2）创建HTML骨架结构

（3）引入相关样式文件

（4）书写内容

4.Bootstrap布局容器

（1）container 类

（2）container-fluid 类

三、Bootstrap栅格系统

1.选项参数(类前缀)

2.列嵌套

3.列偏移

4.列排序

四、响应式工具

五、阿里百秀首页案例

一、响应式开发

1.框架含义

框架就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

2.响应式

响应式需要一个父级做为布局容器(.container)，来配合自己元素来实现变化效果。

原理：在不同屏幕下，通过媒体(PC/iPad/手机端)查询来改变布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式的变化。

3.响应式尺寸划分

屏幕类型	设置宽度为
超小屏幕（手机，<768px）	100%
小屏幕（平板，>=768px）	750px
中等屏幕（桌面显示器，>=992px）	970px
大屏幕（大桌面显示器，>=1200px）	1170px
举例	CSS @media screen and (min-width:768px ) { .container {width: 750px;} /布局容器（768px以上的屏幕，container的宽度为750px）/ }

二、Bootstrap简介

1.Bootstrap概念

Bootstrap是基于HTML、CSS、JS的UI前端框架，使得Web开发更加快捷。

2.查阅Bootstrap文档

中文官网	http://www.bootcss.com/
官网	http://getbootstrap.com/
推荐使用	http://bootstrap.css88.com/

3.Bootstrap的使用

（1）创建文件夹结构

（2）创建HTML骨架结构

（3）引入相关样式文件

写在HTML的<head>中
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>//bootstrap.min.css是压缩过的文件(体积小)，bootstrap.css是未压缩的文件

（4）书写内容

1）可以直接用Bootstrap预先定义好的样式(官网 —> 全局CSS样式 —> 将想要的图标的类名复制粘贴到HTML的<body>的标签中，作为class的属性值)；

2）组件、字体图标

3）JavaStrap插件

4）定制

5）可以修改Bootstrap原来的样式，注意权重问题，主要靠class来定义样式。

4.Bootstrap布局容器

Bootstrap需要为页面内容和栅格系统包裹一个容器。

（1）container 类

.container是响应式布局的容器，是Bootstrap预定义好的类，固定宽度，自带左右padding值15px

清除自带左右padding值15px 的方法：

container 里套用 row ，这两个的padding相互中和；
重设container的padding值（重叠性）；

（2）container-fluid 类

流式布局容器，百分百宽度

占据全部视口(viewport)的容器

适合单独做移动端开发

（3）row 类

自带左右padding值-15px

三、Bootstrap栅格系统

栅格系统将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。

Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，再把container划分为12等份。

1.选项参数(类前缀)

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

1）如果孩子的份数相加等于12，则孩子能占满整个container的宽度；

2）如果孩子的份数相加小于12，则孩子占不满整个container的宽度，最后一个孩子后边会有空白；

3）如果孩子的份数相加大于12，则包含多余列的元素将作为一个整体单元被另起一行排列。

举例：<div class="container"><div class="row"><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>  // 多类名// 在大屏上占3/12份；在中屏上占4/12份；在小屏上占6/12份；在超小屏上占12/12份// 大屏上1行4个孩子；中屏上1行3个孩子；小屏上1行2个孩子；超小屏上1行1个孩子<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div></div></div>

2.列嵌套

一行有3个盒子，再将第一个盒子分为2个盒子<div class="container"><div class="row"><div class="col-md-5">    //还将父级看作12份<div class="row">     // 列嵌套再加一个class="row"，可以取消父元素的padding值，而且高度自动和父级一样高<div class="col-md-8">a</div><div class="col-md-4">b</div></div></div><div class="col-md-4">2</div><div class="col-md-3">3</div></div></div>

3.列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移*列。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

上图代码：左右盒子大小各占3列，右侧盒子向右偏移6列<div class="container"><div class="row"><div class="col-md-3">左侧</div><div class="col-md-3 col-md-offset-6">右侧</div></div></div>占8列的盒子居中<div class="container"><div class="row"><div class="col-md-8 col-md-offset-2"></div></div></div>

4.列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列的顺序。

上图变换代码：将右侧盒子拉到左边，将左侧盒子推到右边<div class="container"><div class="row"><div class="col-md-7 col-md-push-5">左侧</div>  //将左侧盒子向右边推5列<div class="col-md-5 col-md-pull-7">右侧</div>  //将右侧盒子向左边拉7列</div></div>

四、响应式工具

.visible在某种屏幕上显现；.hidden在某种屏幕上隐藏起来。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面 (≥992px)	大屏幕桌面 (≥1200px)
`.visible-xs`	可见	隐藏	隐藏	隐藏
`.visible-sm`	隐藏	可见	隐藏	隐藏
`.visible-md`	隐藏	隐藏	可见	隐藏
`.visible-lg`	隐藏	隐藏	隐藏	可见
`.hidden-xs`	隐藏	可见	可见	可见
`.hidden-sm`	可见	隐藏	可见	可见
`.hidden-md`	可见	可见	隐藏	可见
`.hidden-lg`	可见	可见	可见	隐藏

五、阿里百秀首页案例

1.中屏幕和大屏幕一致时，将列定义为 col-md-* 即可；

2.先布局md以上的pc端布局，最后再修改小屏幕和超小屏幕的特殊布局样式。

下面为该项目(SDFJ)的HTML和CSS代码：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>时代峰峻</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/><link rel="stylesheet" type="text/css" href="css/index.css"/><link rel="icon" type="image/x-icon" href="images/logo.jpg" />
</head>
<body><div class="container"><div class="row"><header class="col-md-2"><!--logo图--><div class="logo"><a href="#"><img src="data:images/logo.png"  class="hidden-xs"/>   <!--class="hidden-xs"在超小屏幕下隐藏图片，用文字取代原来的位置--><span class="visible-xs">时代峰峻</span></a></div><!--导航栏--><div class="nav"><ul><li><a href="#"><img src="data:images/Four-leaf.png"/> TFBOYS</a></li><li><a href="#"><img src="data:images/popcorn.png"/> TNT</a></li><li><a href="#"><img src="data:images/TFfamily.png"/> TF FAMILY</a></li><li><a href="#"><img src="data:images/关于我们.png"/> ABOUT US</a></li></ul></div></header><article class="col-md-7"><!--新闻缩略图（5个盒子）--><div class="new clearfix">  <!--clearfix是定义好的类，可以清除new的浮动--><ul><li><a href="#"><img src="data:images/TFboys.jpg"/><p class="big">TSBOYS十年之约</p></a></li><li><a href="#"><img src="data:images/TNT合照.jpg"/><p>TNT二周年演唱会，活力开唱！</p></a></li><li><a href="#"><img src="data:images/TFfamliy.jpg"/><p>十二个小丸子团建活动</p></a></li><li><a href="#"><img src="data:images/文轩.jpg"/><p>《世界上另一个我》的小甜蜜，你get到了吗？</p></a></li><li><a href="#"><img src="data:images/翔霖.jpg"/><p>《为你受尽冷风吹》写尽三年的别离</p></a></li></ul></div><!--发表文章--><div class="publish"><div class="row">  <!--第一条--><div class="col-sm-9">   <!--在超小屏幕下，只留下标题和阅读量--><a href="#"><h3>TFBOYS又发糖了！王俊凯王源包场《长津湖》不愧是千玺的好兄弟</h3><p class="text-muted hidden-xs">溢美之娱 发布于 2021-09-29 14:05</p>  <!--class="text-muted" bootstrap辅助类 设置文字颜色--><p class="hidden-xs">易烊千玺的新电影《长津湖》就要上映了，这部电影是和吴京、朱亚文、胡军等人合作的，阵容强大，引人期待。</p><p class="text-muted">阅读(20133) 评论(202+万) 赞(2500+万)</p></a></div><div class="col-sm-3 pic hidden-xs"><a href="#"><img src="data:images/长津湖.jpg"/></div></div><div class="row">  <!--第二条--><div class="col-sm-9"><a href="#"><h3>TFBOYS又发糖了！王俊凯王源包场《长津湖》不愧是千玺的好兄弟</h3><p class="text-muted hidden-xs">溢美之娱 发布于 2021-09-29 14:05</p>  <!--class="text-muted" bootstrap辅助类 设置文字颜色--><p class="hidden-xs">易烊千玺的新电影《长津湖》就要上映了，这部电影是和吴京、朱亚文、胡军等人合作的，阵容强大，引人期待。</p><p class="text-muted">阅读(20133) 评论(202+万) 赞(2500+万)</p></a></div><div class="col-sm-3 pic hidden-xs"><a href="#"><img src="data:images/长津湖.jpg"/></div></div><div class="row">  <!--第三条--><div class="col-sm-9"><a href="#"><h3>TFBOYS又发糖了！王俊凯王源包场《长津湖》不愧是千玺的好兄弟</h3><p class="text-muted hidden-xs">溢美之娱 发布于 2021-09-29 14:05</p>  <!--class="text-muted" bootstrap辅助类 设置文字颜色--><p class="hidden-xs">易烊千玺的新电影《长津湖》就要上映了，这部电影是和吴京、朱亚文、胡军等人合作的，阵容强大，引人期待。</p><p class="text-muted">阅读(20133) 评论(202+万) 赞(2500+万)</p></a></div><div class="col-sm-3 pic hidden-xs"><a href="#"><img src="data:images/长津湖.jpg"/></div></div><div class="row">  <!--第四条--><div class="col-sm-9"><a href="#"><h3>TFBOYS又发糖了！王俊凯王源包场《长津湖》不愧是千玺的好兄弟</h3><p class="text-muted hidden-xs">溢美之娱 发布于 2021-09-29 14:05</p>  <!--class="text-muted" bootstrap辅助类 设置文字颜色--><p class="hidden-xs">易烊千玺的新电影《长津湖》就要上映了，这部电影是和吴京、朱亚文、胡军等人合作的，阵容强大，引人期待。</p><p class="text-muted">阅读(20133) 评论(202+万) 赞(2500+万)</p></a></div><div class="col-sm-3 pic hidden-xs"><a href="#"><img src="data:images/长津湖.jpg"/></div></div><div class="row wu">  <!--第五条--><div class="col-sm-9"><a href="#"><h3>TFBOYS又发糖了！王俊凯王源包场《长津湖》不愧是千玺的好兄弟</h3><p class="text-muted hidden-xs">溢美之娱 发布于 2021-09-29 14:05</p>  <!--class="text-muted" bootstrap辅助类 设置文字颜色--><p class="hidden-xs">易烊千玺的新电影《长津湖》就要上映了，这部电影是和吴京、朱亚文、胡军等人合作的，阵容强大，引人期待。</p><p class="text-muted">阅读(20133) 评论(202+万) 赞(2500+万)</p></a></div><div class="col-sm-3 pic hidden-xs"><a href="#"><img src="data:images/长津湖.jpg"/></div></div></div></article><aside class="col-md-3 finally"><a href="#" class="banner"><img src="data:images/TFlogo.png"/></a><a href="#" class="hot"><span class="btn btn-primary">热搜</span><h4 class="text-primary">欢迎加入TF家族</h4>   <!--bootstrap辅助类颜色--><p class="text-muted">2013年，公司通过网络新媒体成功推出国内第一支青少年偶像组合TFBOYS，跻身国内当红偶像组合之列，成功开创了国内网络造星的新纪元 。2019年推出旗下第二代少年男团-TNT时代少年团，正火力全开，占领娱乐市场。2018年8月29日，时代峰峻正式启动三代练习生养成项目-少年进化/TF-TransFrom计划。</p></a></aside></div></div>
</body>
</html>

@media screen and (min-width: 1280px) {.container{width: 1280px;}
}
body {background-color: #f5f5f5;}     /*后背景为灰色*/
.container {background-color: #fff;}  /*前景为白色*/ul {list-style-type: none; margin: 0; padding: 0;}/*左*/
.logo {text-align: center;
}
.logo a img {/*width: 100%;*/      /*无论图片的大小，变成响应式的*/max-width: 100%;      /*图片最大为原来的大小，不会缩放*/}
.logo a {text-decoration: none; color: #000; font-family: '字魂64号-萌趣软糖体'; font-size: 30px;
}
header {padding-left: 0!important;}  /*header与.container权重*/
.nav {background-color: #f6f6f6; border-bottom: 1px solid #eee;}
.nav a {display: block;  height: 50px;text-decoration: none; color: #666;padding-left: 20px; line-height: 50px;font-size: 16px;}
.nav a:hover {background-color: #fff; color: #333;}
.nav a img {width: 25px;}/*中-上*/
.new ul li {float: left; width: 25%; height: 128px; padding-right: 10px; margin-bottom: 10px;}  /*.new ul li比.new ul li:first-child权重低，所以第一个盒子不会受影响*/
/*第一个盒子*/
.new ul li:first-child {width: 50%; height: 266px;}
/*.new ul li a:first-child p {line-height: 41px; padding-left: 10px; font-size: 17px;}*/
.new ul li a .big{font-size: 17px; line-height: 41px; padding-left: 10px;}
.new ul li a img {width: 100%; height: 100%;}
.new ul li a {text-decoration: none; position: relative; display: block; width: 100%; height: 100%;}
.new ul li a p {position: absolute; bottom: 0; left: 0;background: rgba(0,0,0,0.5); font-size: 10px; color: #fff;width: 100%; height: 41px; margin-bottom: 0; padding: 5px 10px;}/*中-下*/
.publish .row {border-top: 1px solid #ccc;}
.publish .wu {border-bottom: 1px solid #ccc;}
.publish a {text-decoration: none; color: #000;}
.publish .pic {height: 155px; margin: 20px 0px;}
.publish img {width: 100%; height: 100%;}/*右-上*/
.banner img {width: 100%;}/*右-下*/
.hot {display: block;margin-top: 20px;padding: 0 20px 10px;border: 1px solid #ccc;
}
.hot span {border-radius: 0;  /*将按钮的圆角取消*/margin-bottom: 15px; /*将按钮与标题之间的距离变大*/
}
.finally a{text-decoration: none;
}
.hot h4:hover {font-size: 20px;}
.hot p {font-size: 12px;}/*在小屏幕和超小屏幕下*/
@media screen and (max-width: 991px) {.nav li {                     /*nav的li浮动起来，排成一行并平分*/float: left;width: 25%;}article {margin-top: 10px;}   /*nav与article分开*/
}
/*在超小屏幕下*/
@media screen and (max-width: 767px) {.nav li a {font-size: 12px;}           /*nav的文字大小和图标大小有变化*/.nav a img {width: 15px;}.new ul li:first-child {width: 100%;}  /*第一个盒子独占一行*/.publish h3 {font-size: 14px;}         /*修改标题字号大小*/.publish p {font-size: 8px;}           /*修改阅读量字号大小*/
}

Bootstrap 响应式开发(2021.10.13)相关推荐

微金所页面制作（Bootstrap 响应式开发栅格布局响应式布局）
该页面适用于 PC端和移动端,在响应式开发的媒体查询下能够适配所有屏幕. 一.页面效果二.结构样式说明 (需引入bootstrap 相关样式文件) 结构分为八块: 头部块:.wjs_header ...
关于响应式开发的设计规范
◆ ◆ ◆ 一.响应式开发知识要点本段内容由艾艺前端技术部Jay给大家分享: 现在都流行说做响应式开发,然而什么是响应式开发呢? 专业术语-响应式简单来说,就是页面应该有能力去自动响应用户的设 ...
Web前端快速开发 Bootstrap 响应式UI框架
文章目录前言 Bootstrap介绍 Bootstrap3 Bootstrap 响应式UI框架使用布局容器栅格系统响应式工具类 bootstrap4 bootstrap5 变化的内容前言 ...
Bootstrap响应式Web开发笔记01——基础入门
Bootstrap响应式Web开发笔记01--基础入门 Bootstrap响应式Web开发笔记02--移动端页面布局 Bootstrap响应式Web开发笔记03--Bootstrap栅格系统 Boot ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
Bootstrap响应式Web开发(一)
Bootstrap响应式Web开发(一) 目录 Bootstrap响应式Web开发(一) 一.Bootstrap的概念.特点及组成二.浏览器三.Visual Studio Code 四.移动端开发 ...
bootstrap之响应式开发-栅栏系统
响应式开发原理就是使用媒体查询针对不同宽度的设备进行样式布局和样式的设置,从而适配不同设备的目的. 设备划分尺寸区别响应式尺寸划分超小屏幕(手机) <768px 100% 小屏设备(平板 ...
用rem来做响应式开发
电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap的.但前一个项 ...
springboot 使用webflux响应式开发教程（二）
本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作 webservice websocket 创建项目,artifactId = tradin ...

Bootstrap 响应式开发(2021.10.13)

一、响应式开发

1.框架含义

2.响应式

3.响应式尺寸划分

二、Bootstrap简介

1.Bootstrap概念

2.查阅Bootstrap文档

3.Bootstrap的使用

（1）创建文件夹结构

（2）创建HTML骨架结构

（3）引入相关样式文件

（4）书写内容

4.Bootstrap布局容器

（1）container 类

（2）container-fluid 类

（3）row 类

三、Bootstrap栅格系统

1.选项参数(类前缀)

2.列嵌套

3.列偏移

4.列排序

四、响应式工具

五、阿里百秀首页案例

Bootstrap 响应式开发(2021.10.13)相关推荐

最新文章

热门文章