Boostrap概念

一、关于Boostrap

Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中,你将发现高质量的HTML、CSS以及JavaScript,使您的WEB工程项目变得无比简单,包括官方的CDN和启动器服务

二、1行 CSS

复制下面的 <link> 样式表粘贴到网页 <head> 里面,并放在其它CSS文件之前

三、3行 JS

全局组件运行在 jQuery 组件上,其中包括 Popper.js, 以及系统内置 JavaScript 插件. 建议将 <script> 的结束放在页面的 </body> 之前以符合新移动WEB规范,并遵循下面代码的先后顺序。

四、模板

使用H5标准构建一个最精简的模板,推荐规范如下(其中第2行在英文站点中使用<html lang="en">)替换:

 

拷贝上面代码,然后按照本文档的 布局 、 示例 来构建你的组件和内容

五、重要提示

Bootstrap 推荐全局样式和设置统一,使之标准化

六、HTML5 doctype头部规范

HTML5标准的 doctype 头部定义是首要的,否则会导致样式失真(中国码农往往直接抄国外站点将lang写成en的小细节也要注意以免贻笑大方)。

七、响应式meta标签

移动设备优先, Bootstrap 4 不同于历史版本,它首先为移动设备优化代码,然后用CSS媒体查询来扩展组件。为了确保所有的设备的渲染和触摸效果,必须在网页的<head>区添加响应式的视图标签,简要的说就是优先引入下面一行。

八、盒尺寸

为了更直观地用BootStrap的尺寸规范(而不受各浏览标准影响),我们把将全局box-sizing的值由默认的content-box重定义为border-box,以保证padding不会影响元素的最后计算宽度。但在页面引用Google自定义搜索、Google Map地图等第三方产品时会出现兼容性问题。

对此你可以使用下面的方法来重置盒尺寸:

用了上面方法重定义后,所有嵌套在内的元素-包括通过:before以及:after产生的内容,都会继承.selector-for-some-widget所指定的box-sizing。

九、初始化与CSS重置

为了解决跨浏览器的渲染差异, BootStrap使用了 初始化与CSS重置 对常用CSS组件进行了重新初始化,以更正浏览器和设备之间的各种厂商私有定义的缺陷。

十、社区支持

这是一些官方推荐的社区支持(境外站点可能会出现无法访问)。

Follow @getbootstrap on Twitter.

Read and subscribe to The Official Bootstrap Blog.

Join the official Slack room.

Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.

Implementation help may be found at Stack Overflow (tagged bootstrap-4).

Developers should use the keyword bootstrap on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值