如何使用bootstrap？本文就是告诉你如何使用bootstrap框架，有一定的参考价值。感兴趣的朋友可以参考一下。
前言：前几天想做一个登录界面，但是自己写表单肯定难看，所以想用bootstarp框架。之前听别人说bootstrap很牛逼。但是我根本不会自举。
下载目录
看bootstrap官网，然后我下载了生产环境的Bootstrap:
解压是这样的：
目录结构如下所示。前几天在官网看到的。您应该首先了解以下目录结构：
bootstrap3
css
bootstrap-theme.css //主题类型，一般不用于制作。
bootstrap-theme.css.map //主题类型，一般不用于制作。
bootstrap-theme.min.css //主题类型，一般不用于制作。
自举. css
bootstrap.css.map //对于贴图，可以理解为帅哥="罗天帅"。那么当你掉了帅哥，就相当于掉了罗天帅。
bootstrap.min.css
fonts //包含字体图标文件，他也做了相应的。以下文件包含不同系统下的字体图标。
雕象-半身人-常规. eot
雕象-半身人-常规. svg
雕象-半身人-常规. ttf
雕象-半身人-常规. woff
雕象-半身人-常规. woff2
js
自举网站
自举
Bootstrap在bootstrap.css中做了很多美化的css样式，而js放在bootstrap.js中注意bootstrap的js和Jquery的js不一样。Bootstrap的js必须依赖Jquery。所以在导入JS的时候，首先要导入Jquery。
应用
接下来看官网推荐的入门级模板。
虽然不是很好看，但是我觉得本地可以有这样的HTML文件。搞什么鬼？
点击鼠标右键，点击网页另存为，保存到本地。
除了HTML文件，还有另一个文件，Boostrap _ files的Starter模板。打开后显示如下：是你需要的bootstrap的css和js，可以导入HTML。
我已经下载了bootstrap，所以我只需要直接使用我的本地bootstrap，所以我删除了上面bootstrap _ files文件夹的starter模板。
自举_1.html:
！文档类型html
html lang='zh-CN '
头
meta charset='utf-8 '
meta http-equiv=' X-UA-Compatible ' content=' IE=edge '
meta name=' viewport ' content=' width=device-width，initial-scale=1 '
！-以上3个meta标签*必须*放在前面，其他任何东西*必须*跟在后面！-
标题引导101模板/标题
！自举
link href=' bootstrap-3 . 3 . 7-dist/CSS/bootstrap . min . CSS ' rel=' external no follow ' rel=' external no follow ' rel=' style sheet '
/头
身体
H1你好，世界！/h1
！-jQuery(Bootstrap的JavaScript插件所必需的)
脚本src=' bootstrap-3 . 3 . 7-dist/js/jquery-3 . 1 . 1 . min . js '/script
！-包含所有已编译的插件(如下所示)，或根据需要包含单个文件-
script src=' bootstrap-3 . 3 . 7-dist/js/bootstrap . min . js '/script
/body
/html
11行从bootstrap导入css。
第19行导入jquery
21行从bootstrap导入js
导入引导注释路径的css和js:
用浏览器打开上面的html界面，就会出现‘你好，世界’。很低，我不禁怀疑bootstrap真的有用吗？说好的美化效果？
我在bootstrap官网随机找了一下‘巨幕’的组件。
将组件的代码粘贴到HTML的正文中，就可以使用了。
！文档类型html
html lang='zh-CN '
头
meta charset='utf-8 '
meta http-equiv=' X-UA-Compatible ' content=' IE=edge '
meta name=' viewport ' content=' width=device-width，initial-scale=1 '
！-以上3个meta标签*必须*放在前面，其他任何东西*必须*跟在后面！-
标题引导101模板/标题
！自举
link href=' bootstrap-3 . 3 . 7-dist/CSS/bootstrap . min . CSS ' rel=' external no follow ' rel=' external no follow ' rel=' style sheet '
/头
身体
H1你好，世界！/h1
div class='超大屏幕容器'
差异
氕你好，世界！/h1
pa class=' BTN BTN-主要BTN-LG ' href=' # ' rel='外部无关注' role=' button '了解更多信息/a/p
/div
/div
！-jQuery(引导程序的Java Script语言插件所必需的)
脚本src=' bootstrap-33 .7-dist/js/jquery-3。1 .1 .量滴js '/脚本
！-包含所有已编译的插件（如下所示),或根据需要包含单个文件-
脚本src=' bootstrap-3。3 .7-dist/js/bootstrap。量滴js '/脚本
/body
/html
效果图：
现在，你会使用引导程序了吧，哈哈
建议好好看下官网，我可是看了整个下午……都没看完……
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：自举学习教程引导程序实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。