web学习笔记(十七)

简介: web学习笔记(十七)

1.Bootstrap知识点汇总

1.1什么是Bootstrap

Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。

1.2引入Bootstrap

可以在页面引入在线文件,也可以将文件下载到本地进行使用。

引入步骤:

  1. 打开bootcdn网站查找需要引入的文件

  2.在头部引入.css文件

 <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.css" rel="stylesheet">

在body引入.js和文件。

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签

<meta<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

1.3Bootstrap提供的类名

  • .container 类用于固定宽度并支持响应式布局的容器。
  • .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
  • .row是行的类名
  • .col是列的类名
  • .offset表示偏移列。eg:offset-sm-2;

1.4Bootstrap栅格系统

Bootstrap系统自动将页面分为了十二列,我们可以根据自己的需要来定义列数,eg:.col-lg-3

Bootstrap 4 网格系统有以下 5 个类:

.col-xl- 超大桌面显示器 屏幕宽度等于或大于 1200px
.col-lg- 大桌面显示器 屏幕宽度等于或大于 992px
.col-md- 桌面显示器 屏幕宽度等于或大于 768px
.col-sm 平板 屏幕宽度等于或大于 576px
.col- 针对所有设备 屏幕宽度小于 576px

2.Math对象常用方法和属性汇总

2.1属性

Math.PI   表示数学中的π

2.2方法 image.png 注意:获得最小值和最大值[min,max ]之间的一个随机数公式:

Math.floor(Math.random()*(max-min+1))+min

相关文章
|
1月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
86 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
1月前
|
文件存储 Python
Flask学习笔记(一):Flask Web框架
本文介绍了Flask Web框架的基本概念、安装方法、初始化参数、程序编写、静态文件显示和配置信息加载等基础知识。
25 0
|
6月前
|
JavaScript
web学习笔记(二十)
web学习笔记(二十)
33 0
|
4月前
|
自然语言处理 运维 JavaScript
web-flash 学习笔记
web-flash 学习笔记
|
6月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
39 0
|
6月前
|
存储 JSON JavaScript
web学习笔记(二十八)
web学习笔记(二十八)
41 0
|
6月前
web学习笔记(二十七)PC端网页特效
web学习笔记(二十七)PC端网页特效
35 0
|
6月前
|
JavaScript 前端开发 Go
web学习笔记(二十六)
web学习笔记(二十六)
39 0
|
6月前
|
JavaScript 前端开发 内存技术
web学习笔记(二十五)BOM开始
web学习笔记(二十五)BOM开始
42 0
|
6月前
|
JavaScript
web学习笔记(二十四)
web学习笔记(二十四)
36 0