安使bootstrap

 

前言:
前几上,本纪念做一个登陆界面,但自己写form表单必然很臭,所以想用下bootstarp框架,之前听别人说bootstrap很牛的典范。但我了无会见bootstrap…

下载&目录

看bootstrap官网,接着自己下载了用于生产条件Bootstrap:

图片 1

解压出来是这样的:

图片 2

目结构大体上是如此的,前几乎天在官网有看齐。下面这个目录结构你应该先行了解下:

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文件。怎么抓??
下手打鼠标,点击网页另存为,保存至地头。

图片 3

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

图片 4

自家曾经下载了bootstrap,所以自己一直用自家本地的bootstrap就好了,于是自己去上面的Starter
Template for Boostrap_files文件夹。

 

bootstrap_1.html:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
 8     <title>Bootstrap 101 Template</title>
 9 
10     <!-- Bootstrap -->
11     <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
12 
13 
14   </head>
15   <body>
16     <h1>你好,世界!</h1>
17 
18     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
19     <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
20     <!-- Include all compiled plugins (below), or include individual files as needed -->
21     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
22   </body>
23 </html>
  • 11行从bootstrap导入css.
  • 19行导入jquery
  • 21行从bootstrap导入js

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

图片 5

 

之所以浏览器打开上面的html界面会现出”你好,世界”。很low,我不由得嘀咕bootstrap真的发生因此啊??说好的鼓吹效果啊

 

本人于bootstrap官网随便找下”巨幕”的组件

图片 6

 

将零件的代码贴到HTML的body中,便足以使了。

图片 7图片 8

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
 8     <title>Bootstrap 101 Template</title>
 9 
10     <!-- Bootstrap -->
11     <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
12 
13 
14   </head>
15   <body>
16     <h1>你好,世界!</h1>
17     <div class="jumbotron container">
18         <div >
19             <h1>Hello, world!</h1>
20             <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
21         </div>
22     </div>
23 
24     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
25     <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
26     <!-- Include all compiled plugins (below), or include individual files as needed -->
27     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
28   </body>
29 </html>

View Code

 

效果图:

图片 9

 

本,你晤面下bootstrap了吧,哈哈

建议好看下官网,我不过看了全体下午……都并未看罢……

 

相关文章