前言: 前几天，本想做一个登陆界面，但自己写form表单必然很丑，所以想用下bootstarp框架，之前听别人说bootstrap很牛的样子。但我完全不会bootstrap... [b]下载&目录[/b] 看[url=http://v3.bootcss.com/getting-started/]bootstrap官网[/url]，接着我下载了用于生产环境Bootstrap: [img]http://files.jb51.net/file_images/article/201704/2017041316402944.png[/img] 解压出来是这样的: [img]http://files.jb51.net/file_images/article/201704/2017041316402945.png[/img] 目录结构大概是这样的，前几天在官网有看到。下面这个目录结构你应该先了解下: 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. [b]应用[/b] 接下来看官网给我们推荐的[url=http://v3.bootcss.com/examples/starter-template/]入门级模版[/url]. 虽然不怎么好看，但我想在本地上也能有这么个HTML文件。怎么搞?? 右击鼠标，点击网页另存为，保存到本地。 [img]http://files.jb51.net/file_images/article/201704/2017041316402946.png[/img] 下载的除了HTML文件外，还有另外一个文件Starter Template for Boostrap_files，打开后，显示如下:是所需要的bootstrap的css与js,可在HTML中引入。 [img]http://files.jb51.net/file_images/article/201704/2017041316402947.png[/img] 我已经下载了bootstrap，所以我直接用我本地的bootstrap就好了，于是我删除上面的Starter Template for Boostrap_files文件夹。 bootstrap_1.html: [list] [*]11行从bootstrap导入css.[/*] [*]19行导入jquery[/*] [*]21行从bootstrap导入js[/*] [/list] 导入bootstrap的css与js注意路径: [img]http://files.jb51.net/file_images/article/201704/2017041316402948.png[/img] 用浏览器打开上面的html界面会出现"你好，世界"。很low，我不禁怀疑bootstrap真的有用吗??说好的美化效果呢 我在bootstrap官网随便找下"巨幕"的组件 [img]http://files.jb51.net/file_images/article/201704/2017041316403049.png[/img] 将组件的代码贴到HTML的body中，便可以使用了。 效果图: [img]http://files.jb51.net/file_images/article/201704/2017041316403052.png[/img] 现在，你会使用bootstrap了吧，哈哈 建议好好看下官网，我可是看了整个下午……都没看完…… 如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。