前端框架_Bootstrap及正则表达式

前端框架_Bootstrap

Bootstrap简介

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

  - Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。

- Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。（对应的样式有对应的特效） 开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。 

- 作用：

  - Bootstrap 使得 Web 开发更加快捷，高效。

  - BootStrap支持响应式开发，解决了移动互联网前端开发问题。

  - Bootstrap英文官网: https://getbootstrap.com/

  - Bootstrap4 中文文档参考: 简介 · Bootstrap

响应式布局

- 响应式布局：一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独做一个 展示版本。此概念专为解决移动互联网浏览而诞生的。

- 响应式布局，使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开 发维护成本，并且能带给用户更好的体验性。

- 响应式布局会增加程序员负担以及代码量

- 未使用响应式开发：

       - 百度: https://www.baidu.com/ 无论如何缩小窗口在屏幕下都是不变的

       - 百度针对不同的设备有不同的网页匹配: 手机端: 百度一下

下载Bootstrap

- 地址：https://code.z01.com/v4/bootstrap-4.4.1-dist.zip

- 目录结构：目录结构 · Bootstrap

Bootstrap页面布局

基础入门

Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在`.container`或`.container-fluid`容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是`100%`）。

栅格系统

1. 为了方便在布局容器中进行网页的布局操作。BootStrap提供了一套专门用于响应式开发布局的栅格系统。 栅格系统将一行分为12列，通过设定元素占用的列数来布局元素在页面上的展示位置。
2. 栅格特点 “行（row）”包含在 .container或 container-fluid（100% 宽度）中行使用的样式

更多案例

访问Bootstrap主页：简介 · Bootstrap

正则表达式

官方文档：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

定义

1. 正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。
2. 正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式

（规则）的文本。

1. 总结：就是用来做规则判断的（比如我们给一个规则，然后判断用户输入的字符串是否符合该规则）。

常用方法