Bootstrap/docs/4.5/getting-started/introduction

来自菜鸟教程
跳转至:导航、​搜索

通过BootstrapCDN和模板起始页,开始使用Bootstrap(全球最流行的用于构建响应式,移动优先网站的框架)的框架。

快速开始

想要快速将Bootstrap添加到您的项目中? 使用由BootPath的人员免费提供的BootstrapCDN。 使用包管理器还是需要下载源文件? 前往下载页面 .

CSS

复制粘贴样式表 <link> 进入你的 <head> 在所有其他样式表之前加载CSS。

JS

我们的许多组件都需要使用JavaScript才能起作用。 具体来说,他们要求 jQuery的 , Popper.js ,以及我们自己的JavaScript插件。 放置以下 <script> s,位于页面末尾,即将关闭 </body> 标签,以启用它们。 jQuery必须首先出现,然后是Popper.js,然后是我们的JavaScript插件。

我们用 jQuery的苗条身材 ,但也支持完整版本。

好奇哪些组件明确需要jQuery,我们的JS和Popper.js? 单击下面的显示组件链接。 如果您不确定总体页面结构,请继续阅读示例页面模板。

Our bootstrap.bundle.js and bootstrap.bundle.min.js 包括 波普尔 , 但不是 jQuery的 。有关Bootstrap中包含的内容的更多信息,请参见我们的 内容 部分。

显示需要JavaScript的组件

  • 解雇警报
  • 用于切换状态和复选框/无线电功能的按钮
  • 所有幻灯片行为,控件和指标的轮播
  • 折叠以切换内容的可见性
  • 用于显示和定位的下拉菜单(也需要 Popper.js )
  • 显示,定位和滚动行为的模式
  • 导航栏,用于扩展我们的Collapse插件以实现响应行为
  • 展示和解雇敬酒
  • 用于显示和定位的工具提示和弹出窗口(也需要 Popper.js )
  • Scrollspy用于滚动行为和导航更新

入门模板

确保使用最新的设计和开发标准来设置页面。 这意味着使用HTML5文档类型,并包括视口元标记以实现适当的响应行为。 放在一起,您的页面应如下所示:

这就是整个页面要求所需要的。 造访 布局文档 or 我们的官方例子 开始布置您网站的内容和组件。

重要的全球人士

Bootstrap采用了一些重要的全局样式和设置,您在使用它们时需要了解这些基本信息,而所有这些几乎都专门针对 正常化 跨浏览器样式。 让我们潜入。

HTML5文件类型

Bootstrap需要使用HTML5文档类型。 没有它,您会看到一些时髦的不完整样式,但是包括它不会引起任何严重的问题。

响应式元标记

引导程序已开发 移动优先 ,这是一种策略,我们首先优化移动设备的代码,然后根据需要使用CSS媒体查询扩展组件。 为了确保正确渲染所有设备并进行触摸缩放, 添加响应式视口元标记 到你的 <head>.

您可以在 入门模板 .

装箱尺寸

为了更简单地调整CSS大小,我们切换了全局 box-sizing 来自的价值 content-box to border-box 。这样可以确保 padding 不会影响元素的最终计算宽度,但是会导致某些第三方软件(例如Google Maps和Google Custom Search Engine)出现问题。

在极少数情况下,您需要覆盖它,请使用如下所示的内容:

使用以上代码段,嵌套元素(包括通过生成的内容) ::before and ::after —将全部继承指定的 box-sizing 为了那个原因 .selector-for-some-widget.

学习更多关于 盒模型和CSS技巧的大小 .

重启

为了改善跨浏览器的呈现,我们使用 重启 来纠正浏览器和设备之间的不一致,同时为通用HTML元素提供更多一些自以为是的重置。

社区

掌握最新的Bootstrap开发信息,并通过这些有用的资源与社区联系。

  • 跟随 Twitter上的@getbootstrap .
  • 阅读并订阅 官方引导博客 .
  • Join 官方休闲室 .
  • 与IRC中的Bootstrappers聊天。 在 irc.freenode.net 服务器,在 ##bootstrap 渠道。
  • 实施帮助可在堆栈溢出处找到(标记为 bootstrap-4 ).
  • 开发人员应使用关键字 bootstrap 分发时通过修改或增加Bootstrap功能的软件包 npm 或类似的传递机制,以实现最大的可发现性。

您还可以关注 Twitter上的@getbootstrap 有关最新的八卦和真棒音乐视频。