关于Boostrap
使用 Bootstrap CDN嵌入4行代码就能完成导入! 点此这里下载离线包及源码。
这是全新的Bootstrap v4.3.1手册,Zoomla!逐浪CMS官方团队负责维护这一项目的中文译本,如果您需要访问旧版4.0手册可以
复制下面的 样式表粘贴到网页 <head>
里面,并放在其它CSS文件之前.
3行 JS
全局组件运行在 组件上,其中包括 Popper.js, 以及系统内置 JavaScript 插件. 建议将 <script>
的结束放在页面的 </body>
之前以符合新移动WEB规范,并遵循下面代码的先后顺序。
您可以引用 ,兼容完整版,并无二异。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
查看需要JavsScript的组件
- 组件提示
- 按钮点击状态、勾(复)选框
- 幻灯片、指标器
- 折叠面板控制内容是否显示
- 下拉菜单、显示定位事件(主要Popper.js)
- 显示模态和浏览器侦听
- 导航条以及响应式适配
- 工具提示和移动事件 (主要 )
- 滚动侦听和导航事件
使用H5标准构建一个最精简的模板,推荐规范如下(其中第2行在英文站点中使用<html lang="en">
)替换:
拷贝上面代码,然后按照本文档的 布局 、 来构建你的组件和内容.
Bootstrap 推荐全局样式和设置统一,使之标准化,让我们深入了解它们。
HTML5标准的 doctype 头部定义是首要的,否则会导致样式失真(中国码农往往直接抄国外站点将lang写成en的小细节也要注意以免贻笑大方)。
<!doctype html>
...
</html>
响应式meta标签
中作了明确的示例。
为了更直观地用BootStrap的尺寸规范(而不受各浏览标准影响),我们把将全局box-sizing
的值由默认的content-box
重定义为border-box
,以保证padding
不会影响元素的最后计算宽度。但在页面引用Google自定义搜索、Google Map地图等第三方产品时会出现兼容性问题。
对此你可以使用下面的方法来重置盒尺寸:
.selector-for-some-widget {
}
用了上面方法重定义后,所有嵌套在内的元素-包括通过:before
以及:after
产生的内容,都会继承.selector-for-some-widget
所指定的box-sizing。
box model and sizing 盒框型技巧扩展学习.
初始化与CSS重置
这是一些官方推荐的社区支持(境外站点可能会出现无法访问)。
- Follow @getbootstrap on Twitter.
- Read and subscribe to .
- 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 ).
- Developers should use the keyword on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.