2021-11-07

  • 关于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.

相关文章

Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...