如何使用bootstrap框架 bootstrap入门必看!
Posted 轩宇网工作室
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用bootstrap框架 bootstrap入门必看!相关的知识,希望对你有一定的参考价值。
前言: 前几天,本想做一个自适应的界面,但自己写必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子。但我完全不会bootstrap...
下载&目录
看bootstrap官网(http://v3.bootcss.com/getting-started/),接着我下载了用于生产环境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.
应用
接下来看官网给我们推荐的入门级模版(http://v3.bootcss.com/examples/starter-template/).
虽然不怎么好看,但我想在本地上也能有这么个html文件。怎么搞??
右击鼠标,点击网页另存为,保存到本地。
下载的除了HTML文件外,还有另外一个文件Starter Template for Boostrap_files,打开后,显示如下:是所需要的bootstrap的css与js,可在HTML中引入。
我已经下载了bootstrap,所以我直接用我本地的bootstrap就好了,于是我删除上面的Starter Template for Boostrap_files文件夹。
bootstrap_1.html:
<!DOCTYPE html>
以上是关于如何使用bootstrap框架 bootstrap入门必看!的主要内容,如果未能解决你的问题,请参考以下文章 不使用 bootstrap/bulma/materialize 等框架时如何开始构建自己的 css |