HTML5+CSS3学习笔记补充——移动端网页+Bootstrap框架

学习使我快乐01

于 2024-08-19 15:26:51 发布

阅读量702

点赞数 17

分类专栏： web前端HTML5+CSS3 文章标签： html5 css3 学习

本文链接：https://blog.csdn.net/weixin_72043867/article/details/141326092

版权

web前端HTML5+CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

移动端网页和Bootstrap框架

1.视口：用来约束HTML尺寸

 <!-- 视口标签是HTML骨架默认生成的 设置网页宽度与逻辑分辨率(即设备)宽度一致 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

2.二倍图：防止设计稿图片在高分辨率屏幕下模糊失真

3.适配方案：

宽度适配：百分比布局|Flex布局
等比适配：宽高等比缩放
- rem
- vw

4.rem适配方案

定义：rem是相对单位，相对于HTML标签的字号计算结果，1rem=1HTML字号大小

手机屏幕大小分辨率不同，如何设置不同的HTML标签字号？

使用媒体查询，检测视口宽度，然后编写差异化的CSS样式

<style>
    /* 视口宽度若为375，网页背景颜色就为绿色 */
    @media (width:375px){
        body{
          background-color: green;
        }
    }
  </style>

不同大小的手机，对应HTML字号大小设置为多少合适？

将网页分为10等分，一般设置为1/10

<style>
    /* 1.使用媒体查询，给不同视口的屏幕设置不同的HTML字号 */
    @media (width:375px){
        html {
          font-size: 37.5px;
        }
    }
    @media (width:320px) {
        html{
          font-size: 32px;
        }
    }
    /* 2.使用rem单位书写尺寸 */
    .box{
        width: 5rem;
        height: 3rem;
        background-color: pink;
    }
  </style>

rem-flexible.js——根据不同视口宽度给网页中html根节点设置不同的font-size

rem值=px值 / （1/10视口宽度）

<body>
  <script src="./js/flexible.js"></script>
</body>

5.less——css预处理器，使css有一定的逻辑性、计算能力

作用：
- 在使用rem时，已知px要使用rem要进行换算，自己算的话比较麻烦
- 使用less嵌套可以快速生成后代选择器
less运算：加、减、乘、除直接写计算表达式，除法需要加小括号
less嵌套
less变量：
- 定义变量：@变量名：值
- 使用变量：@变量名
less导入：@import “文件路径”
.less文件导出css：在less文件开头：//out:文件路径

6.vw、vh适配方案

vw参照视口宽度，vh参照视口高度
vw=1/100视口宽度，vh=1/100视口高度
一般只用vw和vh其中一种
vw值=px值 / (视口宽度/100)

7.响应式网页——一套代码适配所有屏幕

媒体查询给不同视口的屏幕设置不同的CSS样式
```
@media (媒体特性){
    选择器{
        样式
    }
}
```
- 媒体特性：
  
  max-width:小于该视口宽度 | min-width:大于该视口宽度
- 注意书写顺序：min-width(从小到大)，max-width(从大到小)

Bootstrap框架

概念：前端UI框架，提供大量编写好的CSS样式
准备：到Bootstrap官网下载Bootstrap v5文件复制所需的CSS文件到项目中，常用bootstrap.min.css
使用Bootstrap实现响应式步骤：

1.引入Bootstrap CSS文件
```
<link rel="stylesheet" href="./bootstrap.min.css">
```
2.调用类名：container:响应式布局版心类
```
 <div class="container"></div>
```

Bootstrap栅格系统：将网页的宽度分为12等份，每个盒子占用对应的份数

6个响应区间对应的大小和类前缀

	xs	sm	md	lg	xl	xxl
	<576px	>=576px	>=768	>=992px	>=1200px	>=1400px
Container(max-width)	None	540px	720px	960px	1140px	1320px
Class prefix	.col	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl

<body>
  <!-- 
    视口宽度大于等于1200px,一行排4个
    视口宽度大于等于768px，一行排2个
    视口宽度大于等于576px,一行排1个盒子 -->
  <!-- container类实现版心响应式 -->
   <div class="container">
    <!-- row配合子级的份数实现行排列响应式
     子级份数分配方式，总共12份，按照排几个每个平分 即排四个则每个3份 
     类名=对应类前缀+份数  -->
     <div class="row"> 
            <div class="col-xl-3 col-md-6 col-sm-12">1</div>
            <div class="col-xl-3 col-md-6 col-sm-12">2</div>
            <div class="col-xl-3 col-md-6 col-sm-12">3</div>
            <div class="col-xl-3 col-md-6 col-sm-12">4</div>
          
     </div>
   </div>
</body>

Bootstrap全局样式

Button类：

btn：默认样式，
btn-success：成功
btn-warning：警告

…

注意：类名不用记，去Bootstrap官方文档中找对应的即可

表格类：

table:默认样式
table-striped:隔行变色
table-success:表格颜色

…

<button class="btn btn-success btn-lg">按钮1</button>
   <table class="table table-hover">
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>班级</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
   </table>

Bootstrap组件（Components）

具体样式及代码去官网文档查询即可，记得要先引入js和css样式

1.引入样式表

2.引入js文件（js在body标签的最底部）

3.复制结构，修改内容
Bootstrap字体图标
- 下载：导航：图标库——安装——下载安装包——bootstap-icons-1.X.X.zip
- 使用：
  
  1.复制fonts文件夹到项目目录
  
  2.网页引入bootstrap-icons.css文件
  
  3.调用css类名
注意：引入顺序自身写的css必须在框架css的后面