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="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

结果如下所示:

3.总结:

BootStrap来自Twitter(推特),是目前最受欢迎的前端框架。BootStrap是基于HTML、css和JavaScript的,它简洁灵活,使得web开发更加快捷。
● 中文官网:http://www.bootcss/
● 官网:http://getbootstap/
● 推荐使用:http://bootstrap.css88/

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

更多推荐

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