当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 如何使用bootstrap框架 bootstrap入门必看!

如何使用bootstrap框架 bootstrap入门必看!

2018年05月21日  | 移动技术网IT编程  | 我要评论

前言: 前几天，本想做一个登陆界面，但自己写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:

<!doctype html>
<html lang="zh-cn">
 <head>
 <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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
 <title>bootstrap 101 template</title>

 <!-- bootstrap -->
 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">


 </head>
 <body>
 <h1>你好，世界！</h1>

 <!-- jquery (necessary for bootstrap's javascript plugins) -->
 <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
 <!-- include all compiled plugins (below), or include individual files as needed -->
 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>
  • 11行从bootstrap导入css.
  • 19行导入jquery
  • 21行从bootstrap导入js

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

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

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

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

<!doctype html>
<html lang="zh-cn">
 <head>
 <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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
 <title>bootstrap 101 template</title>

 <!-- bootstrap -->
 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">


 </head>
 <body>
 <h1>你好，世界！</h1>
 <div class="jumbotron container">
  <div >
   <h1>hello, world!</h1>
   <p><a class="btn btn-primary btn-lg" href="#" rel="external nofollow" role="button">learn more</a></p>
  </div>
 </div>

 <!-- jquery (necessary for bootstrap's javascript plugins) -->
 <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
 <!-- include all compiled plugins (below), or include individual files as needed -->
 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

效果图:

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

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

如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：bootstrap学习教程 bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网