网页的便捷使用

最新推荐文章于 2025-12-04 17:40:34 发布

原创最新推荐文章于 2025-12-04 17:40:34 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #前端

boot scrap

一，引用boot scrap文件
二，书写内容
- 类名
- 栅格系统
三.作业中学到的
四.移动端开发

一，引用boot scrap文件

将下载好的文件按摆放在bootstrap中

这写文件是便于区分自己创建的

页面开发格式

2.在<head>中引用
<link rel="stylesheet" href="bootscrap/css/bootscrap.min.css">`(引入boot scrap的样式文件)
<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

二，书写内容

所使用的皆为boot scrap中已经定义好的类名（可多次使用）

类名

bootstrap布局容器：.container 响应式布局容器（盒子大小随页面变化）.container-fluid 流动式布局容器（盒子大小100%即占据全部可视窗口）
row行类名
column列类名
注意:row在container中写(可分列)，column在row中写

栅格系统

1.介绍
将页面内容划分成等宽的几列，可使页面内容随页面缩放而改变
响应式布局类名
2.列偏移
当盒子需要被分在两边时要先分配，再将右侧的盒子进行右移即可，要用到.col-md-offset-4。（4指向右偏移了四份）

3.列排序
当盒子两边的内容要交换位置时.col-md-push-*是从左往右；.col-ma-pull-*是从右往左

4.在不同的平面下显示和隐藏盒子与文字
在不同平面下的显示与隐藏

三.作业中学到的

1.如果遇到.container的宽度比要求的宽度小时，修改的方法:假设所需宽度为1280
@media screen and (min-width:1280px) {
.container {
width:1280px;
}
}
2.添加字体图标使用的是类名，要修改字体图标需要在浏览器中检查。如使用了before伪类选择器，注意选择器名字::before {}的格式。与文字垂直居中采用图片和文字居中的办法
3.所分的栅格在中等屏幕和大屏幕下一样，只写最小屏幕下的分配，其以上的屏幕会和其一样
4.栅格系统的空白缝隙是由大的盒子包裹着小盒子做成的。即给大盒子设置padding值再给小盒子设置width：100%;
5.margin只有块级元素才能用
6.在超小屏下图片不用缩放因此若写成width:100%;则图片占了整个区域
要写max-width:100%;