BootStrap的使用教程 适合新手小白！！

1.bootStrap怎么用？

第一步、链接: 官网

点击红线边框处即可跳转到下载页面，有三个东西可以给我们选择，由于我们现在处于初级使用阶段，或者说我们直接用在生成环境下，我们下载第一个就好：

下载成功后可以得到一个.zip的文件，解压后我们可以得到一个包含css、fonts和js的文件夹，ok，准备工作我们就做好了。

现在要怎么用呢，一头雾水吧，我们新建一个文件夹，命名为test，将刚刚三个文件夹复制到test文件夹中，现在用sublime打开刚刚的文件夹，点击file-open folder，选择test文件夹点击确定即可，如下：

在test上右键选择new file，然后ctrl+s保存文件名为index.html，这时候回到bootstrap的官网，导航栏选择“起步”，向下拖动或在右侧选择“基本模板”，将下列代码进行复制，粘贴到index.html中，如下：

粘贴到sublime中，这是一个html5格式的html文件：

这时候我们点击index.html，浏览器打开后就可以在屏幕上看到一个Diao炸天的“Hello world”了。

到这里，其实你已经用bootstrap完成了第一个页面设计了。

2.实例展示：

1.垂直的胶囊式导航菜单

实例：

<p>垂直的胶囊式导航菜单</p><ul class="nav nav-pills nav-stacked"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#"></a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li></ul>

结果如下所示：

3.总结：

BootStrap来自Twitter（推特），是目前最受欢迎的前端框架。BootStrap是基于HTML、css和JavaScript的，它简洁灵活，使得web开发更加快捷。

● 中文官网：http：///

● 官网：http：///

● 推荐使用：http：///

框架：顾名思义就是一种架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。