如何使用bootstrap框架 bootstrap入门必看!
前言: 前几天,本想做一个登陆界面,但自己写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是不一样的。
接下来看官网给我们推荐的. 虽然不怎么好看,但我想在本地上也能有这么个HTML文件。怎么搞?? 右击鼠标,点击网页另存为,保存到本地。 下载的除了HTML文件外,还有另外一个文件Starter Template for Boostrap_files,打开后,显示如下:是所需要的bootstrap的css与js,可在HTML中引入。 我已经下载了bootstrap,所以我直接用我本地的bootstrap就好了,于是我删除上面的Starter Template for Boostrap_files文件夹。 bootstrap_1.html: <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet"> 你好,世界!<script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"> |