跟我一步一步学习bootstrap

关于作者：

• 郑云飞(天放), 程序员Java
• weibo：@tianFang
• blog: zhengyunfei.iteye.com
• email: [e-mail]
• 学习路线图

       bootstrap在网页中使用

       bootstrap布局

       bootstrap响应式布局

      由于工作需要，下班之余，就自学了bootstrap。不瞒大家，写这篇文章我才自学了3天bootstarp，如果你是一个bootstarp高手，就不要阅读这篇博客了。

      bootstrap是Twitter公司里面的开发者和设计师做出来的一套用在网页上面的用户界面和交互的架构，架构的意思就是把经常用的一些东西事先为你编写好，你需要的时候可以直接去调用。比如说你想去设计页面的布局，你需要去计算网页的宽度，然后手工的把布局要用到的css代码写出来。bootstarmp结构内置了一套网格布局的系统，你只需要在元素中使用设计好的布局相关网格的类，不需要你再去撰写布局所使用的css代码，再比如说，你想在网页中出现一个按钮，通常你需要先用图形设计软件去设计这样的一个按钮，然后再把它用html和css表示出来，那么在网页中使用bootstarp结构的话，我们可以直接去添加bootstarp设计好的按钮相关的类，这样就可以立即在网页中出现一个漂亮的按钮，bootstrap还允许我们去控制这个按钮的颜色，样式，大小等等。boostrap里面包含了很多在网页中经常用的一些界面的设计，表格，表单，导航栏，按钮组，分页器，导航路径等等。bootstrap还提供了很多交互的小插件，比如说，对话框，下拉菜单，工具提示，选项卡等等。

这些你都可以直接去使用，只需要按照boostrap设计好的方式，先把代码的结构写出来，然后在元素上面使用相应的类，剩下的事呢bootstarp全部都会为你做好。这就让我们的工作变得非常的简单，下面呢我们就一起来学习使用bootstarp结构。

      

       现在你看到的就是boostrap这个项目的官方网站，这个网站的界面就是用的bootstrap这个架构来创建的，你可以把这个网站当作是bootstrap结构演示的网站，在这个网站还有bootstrap结构详细的使用说明，我们可以先点开这个Get Started来看一下：

 

  在这个页面里面提供了bootstrap的下载地址，介绍了bootstrap文件结构，bootstrap包含了那些东西，以及html模板和一些Examples.

 接下来我们点击scaffolding这个界面来看一下：

 在这个界面里面，说明了bootstrap一个内置的网格系统的使用，也就是布局网页要用到的那个网格系统，bootstrap这个网格系统可以是响应时的，也就是如果你愿意的话，你可以让网页根据上网设备的屏幕分辨率，来做出相应的变化。

好，我们再看一下Base Css：

 这个页面里面是bootstrap架构设计好的常用的css样式，比如说基本的文字的排版，列表的样式，表格，表单等等。

我们再打开这个Components来看一下：

 这个页面里面介绍了网页当中经常用的一些组件，比如说带下拉菜单的按钮，导航栏，选项卡等等，我们可以再看一下bootstrap架构的JavaScript插件来看一下：

 那么在这个界面里面介绍了如何去使用bootstrap结构提供的这些JavaScript小插件，比如说对话框，下拉菜单，工具提示等等。好最后我们再看一下Customize这个菜单：

 如果你打算去重新定制一下bootstrap的一个设计，或者呢你只需要bootstrap结构的其中的一小部分，那么在这个界面里面你可以做到。

下面我们就在网页中使用bootstrap架构

 下一篇博客：在网页中使用bootstrap架构