bootstrap基础教程，bootstrap实例教程

bootstrap使用教程

大家好，我是一枚新手前端，技术方面交流分享一下。接下来要给大家分享的是bootstrap这种布局方式。废话不多说，直接开始吧。

首先，第一步，直接在百度上面搜索”boostrap”，这个关键词。然后就会出现如下界面:

第二步，直接点击中间的按钮，上面写着”Bootstrap3中文文档(v3.3.7)”的按钮，然后就会出现相应的界面:

第三步，找到顶部的第二个“起步”，如下是引用bootstrap的路径，先要引用css和js。注:(bootstrap.min.css和bootstrap.css)区别不大，一个是压缩过的，一个是格式化过的(就是写的简洁一点，方便看的懂，后面加上min的大多只有一行，密密麻麻的，中间没有空格，所以是压缩过的。)

第四步，然后，我们回到顶部，找到”全局 CSS 样式”，点开这个，会出现如下内容:

第五步，右边出现了一行文字，点击栅格化系统，接下来是这样的:

第六步，鼠标往下滚动，会出现”栅活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看格参数”,就像这样:

第七步，鼠标往下滚动，会出现”实例：从堆叠到水平排列”,就像这样:

直接复制代码到编辑器里面就可以实现了.如果实现了效果，其它的效果可以举一反三。

第八步，如果效果实现了，接下来我们开始用bootstrap里面的js插件，首先我们返回到顶部找到”JavaScript 插件”,比如模态框，就点击右边的模态框3个字就行了，就像这样:

第九步，点开以后，会出现如下界面:

复制里面的代码到编辑器就行了

哦，忘了给大家介绍”组件”这个工具了。这个是字体图标，意思就是说：这些看着像图片一样的东西，其实是字体。把代码复制进去就可以了。我们先看看它的介绍：

接下来看看它的实例：

到了这里，如果大家能够熟练运用，写布局应该不成问题。谢谢大家，觉得可以，记得关注哟。

《bootstrap基础教程，bootstrap实例教程》来自互联网同行内容，若有侵权，请联系我们删除！