前端与移动开发----移动web开发----响应式布局+boostrap框架介绍（内附响应式布局案例---微金所）

最新推荐文章于 2022-09-23 17:52:00 发布

東三城

最新推荐文章于 2022-09-23 17:52:00 发布

阅读量310

点赞数

分类专栏：前端与移动开发学习笔记移动web开发文章标签： web html css less

本文链接：https://blog.csdn.net/qq_40440961/article/details/109479661

版权

前端与移动开发学习笔记同时被 2 个专栏收录

75 篇文章 5 订阅

订阅专栏

移动web开发

7 篇文章 0 订阅

订阅专栏

响应式布局+boostrap框架介绍

核心知识点

媒体查询
boostrap框架
栅格系统

媒体查询

概念

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

组成
- 媒体类型
  - all (所有的设备)
  - print (打印设备)
  - screen(电脑屏幕,平板电脑),智能手机
- 媒体特性
  - width
  - height
  - max-width / max-height
  - min-width / min-width
  - orientation: portrait (竖屏模式肖像) | landscape (横屏模式全景)
- 语法关键字
  - and 可以将多个媒体特性链接到一块,相当于且
  - only 指定某个特定的媒体类型, 可以省略

语法

@media only screen and (width: 320px) {
     css代码
}

设备划分

超小屏幕手机 (<768px)

@media only screen and (min-width: 320px) and (max-width: 767px) {}

小屏幕平板 (≥768px)

@media only screen and (min-width: 768px) and (max-width: 991px) {}

中等屏幕桌面显示器 (≥992px)

@media only screen and (min-width: 992px) and (max-width: 1199px) {}

大屏幕大桌面显示器 (≥1200px)

@media only screen and (min-width: 1200px) {}

如何在网页中去引用less源文件

1. 通过link标签引用less文件

  例如： <link rel="stylesheet/less" href="css/index.less">

2. 需要在网页中引用less.js文件
  例如 <script src="less.js"></script>
 
3.需要在服务器环境下才能执行

boostrap框架

介绍 https://www.bootcss.com/

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
起步

下载【下载后的框架就是一个css文件】

生产环境下的Bootstrap

编译并压缩后的 CSS文件。不包含文档和源码文件。

Bootstrap源码

没有压缩的CSS文件,包含文档和源码文件。

引用【在网页中引用下载好的css文件】

<!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</title>
    <!-- 引用bootstrap css文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>

框架中的全局样式
1. 在框架中用来表示一号标题到六号标题
  
  .h1 - .h6
2. 在框架中要设置文字对齐方式可以使用如下类名
  
  text-left | text-center | text-right
3. 在网页中表示超小文字的标签
  
  文字
```
<small>超小文字</small>

或者使用类名

<div  class="small">超小文字</div>	
```
4. 字母大小写转化对应的类名
  
  text-uppercase —> 将小写字母都转化为大写字母
  
  text-lowercase —> 将大写字母转化为小写字母
  
  text-capitalize ----> 将单词首字母转为大写
  
  注意：以上类名中使用都是 text-transform属性实现的
```
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
```
5. 去掉列表前的默认样式
```
.list-unstyled
```
6. 实现li一行显示添加类名
```
.list-inline
```
7. 设置表格基本样式
```
.table

.table-bordered    设置边框

.table-hover    设置鼠标悬停时候的样式
```
栅格系统

介绍

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

作用：

- 通过栅格系统就可以开发响应式布局
- 将栅格系统对应的盒子分为12列实现的

使用
- 必须放到类名叫.container （固定宽度）或 .container-fluid （100% 宽度）中

栅格参数

   - col-xs-值 ： 代表在超小设备中（手机）

   - col-sm-值:   代表在小屏幕设置中（平板）

   - col-md-值：代表在中等设备中（PC设备）

   - col-lg-值:  代表的是在超大设备中

   - 备注栅格参数中的值取值范围是： 1- 12

在这里插入图片描述
响应式布局案例：
PC端效果图：

iPad端效果图：

移动端效果图：

猛击下载响应式布局案例–微金所

		如有不足，请多指教，
		未完待续，持续更新！
		大家一起进步！

東三城

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端与移动开发----移动web开发----响应式布局+boostrap框架介绍（内附响应式布局案例---微金所）

响应式布局+boostrap框架介绍核心知识点媒体查询boostrap框架栅格系统媒体查询概念媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。组成媒体类型all (所有的设备)prin
复制链接

扫一扫