【JQuery】扩展BootStrap入门——知识点讲解(一)
🔎这里是【JQuery】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【JQuery】 目前主要更新JQuery，一起学习一起进步。
👀本期介绍
本期主要介绍扩展BootStrap入门——知识点讲解(一)
文章目录
1.1 什么是 bootstrap？bootstrap 的作用？
1. bootstrap 概述
1.1 什么是 bootstrap？bootstrap 的作用？
Bootstrap
，基于
HTML
、
CSS
、
JAVASCRIPT
的
前端框架
。
该框架已经预定义了一套
CSS
样式和与样式对应的
JS
代码。（对应的样式有对应的特效）
开发人员只需要编写 HTML
结构，添加
bootstrap
固定的
class
样式，就可以轻松完成指定效果的
实现。
作用：
1
Bootstrap
使得
Web
开发更加快捷，高效。
2
BootStrap
支持响应式开发，解决了移动互联网前端开发问题
课外了解知识：该框架由 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作开发。Bootstrap 基础入门使用的都是自带 CSS 样式，高级开发中需要使用 HTML5 、 CSS3 、动态 CSS 语言 Less 进行自定义开发， JavaEE 课程中学习是“基础入门”。中文官网： http://www.bootcss.com/
1.2 什么是响应式布局？响应式布局解决的问题？
响应式布局：一个网站的展示能够兼容多个终端
(
手机、
iPad
、
PC
等
)
，而不需要为每个终端单独
做一个展示版本。
响应式布局：专为解决移动互联网浏览而诞生的。
作用：使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站
开发维护成本，并且能带给用户更好的体验性
2. bootstrap 环境搭建
2.1 下载资源
中文官网地址：
http://d.bootcss.com/bootstrap-3.3.5.zip
2.2 目录结构
Javaee
使用
bootStrap
开发，主要使用
dist
发布版目录。
dist
目录结构如下：
bootstrap/
├──
css/
│
├──
bootstrap.css
//bootstrap
完整版的
CSS
文件。
│
├──
bootstrap.css.map
│
├──
bootstrap.min.css
//bootstrap
压缩版
CSS
文件。
│
├──
bootstrap.min.css.map
│
├──
bootstrap-theme.css
//
主题文件
│
├──
bootstrap-theme.css.map
│
├──
bootstrap-theme.min.css
│
└──
bootstrap-theme.min.css.map
├──
js/
│
├──
bootstrap.js
// bootstrap
完整版的脚本文件。
│
└──
bootstrap.min.js
// bootstrap
压缩版的脚本文件。
└──
fonts/
├──
glyphicons-halflings-regular.eot
//
字体 （字体图标）
├──
glyphicons-halflings-regular.svg
├──
glyphicons-halflings-regular.ttf
├──
glyphicons-halflings-regular.woff
└──
glyphicons-halflings-regular.woff2
注：完整版用于源码学习，但因为文件大小问题，不适合网络间传递。
压缩版用于网络发布，压缩版和完整版的唯一区别，仅为压缩版将代码间的大量空格和回车换行删
除
掉了，节约了大量的空间，功能上完全相同，适用于网络间快速传递。但因为没有了空格和换行，
源代码
难以阅读。
2.3 bootstrap 的通用简洁模板
viewport
：视口，即浏览器上网页的可视区域
视口作用：用于
移动设备
将 大型页面进行比例缩放显示。
2.4 扩展：完整模板
以下为完整模板，仅美工人员酌情使用
参考文档：
http://v3.bootcss.com/getting-started/#template
浙公网安备 33010602011771号