微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Bootstrap_day01

Bootstrap是什么

1.Bootstrap是当下最流行的前端框架(界面工具集);

2.移动端优先的设计理念

3.特点就是灵活简洁,代码优雅,美观大方;

4.其目的是为了让Web开发更敏捷;

5.是Twitter公司的两名前端工程师Mark otto和Jacob Thornton在2011年发起的,并利用业余时间完成第一个版本的开发

为什么使用Bootstrap

l   生态圈火,不断地更新迭代;

l   提供一套美观大方地界面组件;

l   提供一套优雅的HTML+CSS编码规范;

l   让我们的 Web 开发更简单,更快捷;

下载Bootstrap

https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip

https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip

安装Bootstrap

官方文档 - https://getbootstrap.com/

中文文档 - https://v3.bootcss.com/

视口

视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示

目前大多数手机浏览器的视口(承载页面的容器)宽度都是980

视口的宽度可以通过Meta标签设置

属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)

width:视口的宽度

initial-scale:初始化缩放

user-scalable:是否允许用户自行缩放(值:yes/no; 1/0)

minimum-scale:最小缩放,一般设置了用户不允许缩放,就没必要设置最小和最大缩放

maximum-scale:最大缩放

Bootstrap使用

使用mediaquery实现响应式布局

基本CSS样式

预置界面组件

JavaScript 插件

深度自定义 Bootstrap

https://v3.bootcss.com/customize/(中文网在线)

(1) 约定编码规范

HTML约定

在head中引入必要CSS文件,优先引用第三方的CSS,方便我们自己的样式覆盖

在body末尾引入必要的JS文件,优先引用第三方的JS,注意JS文件间的依赖关系,比如bootstrap.js依赖jQuery,那就应该先引用jquery.js 然后引用bootstrap.js

CSS约定

除了公共级别样式,其余样式全部由 模块前缀

尽量使用 直接子代选择器, 少用间接子代 避免错杀

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐