发表于： 2020-05-21 22:37:54
1 1175
今天完成的事情：
了解并熟悉了bootstrap框架
bootstrap框架最基本的就是Hello, World!模板
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1></h1>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
<html lang="zh-cn">
头部规范，防止样式失真
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
移动设备优先的响应式标签
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
bootstrap框架的导入 href=（可以放框架链接或者下载框架的文件夹）
两个代码都放在<head>里
<script>（js插件放在</body>的前面）
Container容器
窗口布局最基本元素，启用整个栅格系统必不可少的前置条件
<div class="container“></div>
栅格系统
row（行）
col（列，包含在行内的元素）
类前缀（用来适应不同屏幕大小的自适应）
col-xs-0（超小屏幕）
col-sm-0（小屏幕）
col-md-0（中等屏幕）
col-lg-0（大屏幕）
col-xl-0（超大屏幕）
col-sm-（0到12取值，设定列元素的宽度）默认浏览器12列数
列宽度到12会另起一行
用法：
<div class="container">
<div class="row">
<div class="col-sm-3">
.........
</div>
</div>
</div>
多行的等宽列:
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>(把上下列元素分开成两行等宽）
<div class="col">col</div>
<div class="col">col</div>
</div>
定义每行显示列数
<div class="row row-cols-0">0到12取值，多余列会另起一行
offset样式
增加列元素左边框，使元素向右移动，被超过列会换行，用法：
<div class="col-sm-3 col-sm-offset-1">
push样式
不增加元素宽度，使元素向右移动，会覆盖其他列，用法：
<div class="col-sm-3 col-sm-push-1">
明天计划的事：
上手任务8
收获
学习到了bootstrap框架
不知道为啥有bug，显示不出来，截图上
返回列表
评论