1.1关于BootStrap
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架,它是在2011年由美国Twitter公司(和微博性质一样的)的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架。总结:Bootstrap是基于HTML、CSS、JavaScript 开发的,并且时下非常流行的一种用于前端开发的框架技术(其实:Bootstrap就是一个样式代码库,用来设置样式的)。
##1.2 为什么要使用Bootstrap.
2.1移动设备优先.
自Bootstrap3起,框架包含了贯穿于整个库的移动设备优先样式。
2.2浏览器支持.
该特点我们称之为跨浏览器,几乎所有的浏览器都支持Bootstrap,因为Bootstrap对不同浏览器的兼容性特别强,如果你想要做出一个跨浏览器的web项目,那么Bootstrap将会是你最好的选择。
2.3容易上手.
只要具备HTML和CSS的基础知识,就可以学习Bootstrap,没有很复杂的逻辑。
2.4响应式设计.
Bootstrap的响应式CSS能够自适应于台式电脑、平板电脑和手机;
何为响应式?就是一个网站能够兼容多个终端(PC&移动)—而不是为每个终端做一个特定的版本,响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验;
演示响应式效果:BootStrap官网。
响应式网页设计技术的意义:同一个网站不用专门为不用的终端开发对应的版本,网站加入响应式可以在不同的终端上完美运行。
BootStrap环境搭建
添加 BootStrap相关文件库:“bootstrap-5.0.2” 文件夹到项目 js 目录;
2.
在页面引入 jQuery库:;
4.
在head里面引入 BootStrap 样式库:;
注意引入文件先后顺序
####使用BootStrap.
3.1感受BootStrap的强大.
注,在VScode里面使用 BootStrap的时候需要安装 IntelliSense for CSS class names in HTML 插件才会有 class提示,不建议安装 BootStrap5、BootStrap4等插件。
#####方法
在 head标签中间设置响应式代码:
解释:
width=device-width:呈现在不同设备上;
initial-scale=1.0:以1:1比例呈现,不会有任何缩放;
user-scalable=noe:禁用网页缩放功能;
maximum-scale=1.0:页面方法程序,1.0将进制用户放大实际尺寸。