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


Posted in Javascript onApril 13, 2017

前言: 前几天,本想做一个登陆界面,但自己写form表单必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子。但我完全不会bootstrap...

下载&目录

看bootstrap官网,接着我下载了用于生产环境Bootstrap:

如何使用bootstrap框架 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文件。怎么搞??
右击鼠标,点击网页另存为,保存到本地。

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

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

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

我已经下载了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注意路径:

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

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

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

如何使用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了吧,哈哈

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
微信小程序 下拉菜单简单实例
Apr 13 #Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 #Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 #Javascript
Bootstrap实现各种进度条样式详解
Apr 13 #Javascript
微信小程序 本地数据存储实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 #Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 #Javascript
You might like
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php实现图片添加水印功能
2014/02/13 PHP
php 伪静态之IIS篇
2014/06/02 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python检测生僻字的实现方法
2016/10/23 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
电大毕业生自我鉴定
2013/11/10 职场文书
捐书寄语赠言
2014/01/18 职场文书
中国梦口号
2014/06/13 职场文书
2014年度安全工作总结
2014/12/04 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
中学生运动会广播稿
2015/08/19 职场文书
2016年教师节慰问信
2015/12/01 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
Redis实战高并发之扣减库存项目
2022/04/14 Redis