前言: 前几天，本想做一个登陆界面，但自己写form表单必然很丑，所以想用下bootstarp框架，之前听别人说bootstrap很牛的样子。但我完全不会bootstrap...

下载&目录

看，接着我下载了用于生产环境Bootstrap:

解压出来是这样的:

目录结构大概是这样的，前几天在官网有看到。下面这个目录结构你应该先了解下:

bootstrap3

    ├── css

    │   ├── bootstrap-theme.css  //主题类型，生产上一般用不到

    │   ├── bootstrap-theme.css.map  //主题类型，生产上一般用不到

    │   ├── bootstrap-theme.min.css  //主题类型，生产上一般用不到

    │   ├── bootstrap.css

    │   ├── bootstrap.css.map  //做映射的，可以理解为 shuaige = “luotianshuai”  那么掉shuaige的时候就相当于掉luotianshuai

    │   └── bootstrap.min.css

    ├── fonts   //包含了字体图标文件，他也是做的对应。下面的文件包含了不同系统下的字体图标

    │   ├── glyphicons-halflings-regular.eot

    │   ├── glyphicons-halflings-regular.svg

    │   ├── glyphicons-halflings-regular.ttf

    │   ├── glyphicons-halflings-regular.woff

    │   └── glyphicons-halflings-regular.woff2

    └── js

        ├── bootstrap.js

        ├── bootstrap.min.js

 

bootstrap做了很多美化过的css样式在bootstrap.css中，js则放在bootstrap.js。注意了，bootstrap的js与Jquery的js是不一样的。bootstrap的js必须依赖Jquery。所以在导入JS的时候，得先导入Jquery.

 

应用

接下来看官网给我们推荐的.

虽然不怎么好看，但我想在本地上也能有这么个HTML文件。怎么搞??

右击鼠标，点击网页另存为，保存到本地。

下载的除了HTML文件外，还有另外一个文件Starter Template for Boostrap_files，打开后，显示如下:是所需要的bootstrap的css与js,可在HTML中引入。

我已经下载了bootstrap，所以我直接用我本地的bootstrap就好了，于是我删除上面的Starter Template for Boostrap_files文件夹。

 

bootstrap_1.html:

1  2  3    4     
      5     
      6     
      7     
      8      9 10     
     11     
     12 13 14   15   16     
你好，世界！
17 18     
     19     20     
     21     22   23 

• 11行从bootstrap导入css.
• 19行导入jquery
• 21行从bootstrap导入js

导入bootstrap的css与js注意路径:

 

用浏览器打开上面的html界面会出现"你好，世界"。很low，我不禁怀疑bootstrap真的有用吗??说好的美化效果呢

 

我在bootstrap官网随便找下"巨幕"的组件

 

将组件的代码贴到HTML的body中，便可以使用了。

1  2  3    4     
       5     
       6     
       7     
       8      9 10     
      11     
      12 13 14   15   16     
你好，世界！
17     
      
       18         
       
        19             
        
Hello, world!
20             
        
Learn more
21         
       
22     
      
23 24     
      25     26     
      27     28   29 

 

效果图:

 

现在，你会使用bootstrap了吧，哈哈

建议好好看下官网，我可是看了整个下午……都没看完……