bootstrap基础

Yannick_H

已于 2022-07-13 16:26:06 修改

阅读量1k

点赞数

分类专栏： Y-Y滴前端日志基本概念（笔记）文章标签： javascript html css

于 2022-07-13 16:25:13 首次发布

本文链接：https://blog.csdn.net/yannick_h/article/details/125766413

版权

本文详细介绍了Bootstrap，包括其简介、环境配置、全局CSS样式和栅格系统。Bootstrap是一个用于开发响应式布局和移动设备优先的web项目的框架，由HTML、CSS和JavaScript构成。文章覆盖了Bootstrap的浏览器兼容性、视口概念、SVG的使用，以及如何配置Bootstrap的本地文件和CDN加速。同时，讲解了Bootstrap的布局容器、文本样式、表单、按钮等全局CSS样式，以及强大的栅格系统，帮助开发者快速构建前端页面。

摘要由CSDN通过智能技术生成

6.可缩放矢量图形（Scalable Vector Graphics SVG）

一、bootstrap

1.简介

是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。常用来开发响应式布局和移动设备优先的web项目，能够帮助开发者快速搭建前端页面

2.组成

（1）基本结构：栅格系统（网格系统）

（2）丰富的CSS样式库：只需要改变标签的class属性值，就可以给标签应用不同的样式

（3）布局组件：有丰富的组件库

（4）插件：基于jQuery的插件，功能强大

3.浏览器

（1）内核：Blink、WebKit和Trident

4.视口（Viewport）

能将大分辨率尺寸网页缩小显示在手机浏览器

（1）布局视口（layout viewport）：是指网页的宽度

（2）视觉视口（visual viewport）：是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度

（3）理想视口（ideal viewport）：是指对设备来讲最理想的视口尺寸

（4）视口的设置：在<meta>标签中，将name属性设为viewport，即可设置视口。在终端中以理想视口打开网页

5.分辨率

6.可缩放矢量图形（Scalable Vector Graphics SVG）

是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）

（1）SVG使用标签的方式定义各种图形，外层标签是<svg>

（2）它的属性主要包括x、y、width、height，用数字表示，每个数字之间用空格或逗号隔开，表示定义一个在左上角（x，y）坐标位置，宽度为width，高度为height的矩形

二、bootstrap的环境配置

1.在页面中引入本地文件

2.使用CDN加速器

（1）CDN全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定

（2）用法（前提必须联网）

  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>