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 有关最新的八卦和真棒音乐视频。