如何使用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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
JS表的模拟方法
Feb 05 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
用Golang运行JavaScript的实现示例
Nov 25 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
德劲1107的电路分析与打磨
2021/03/02 无线电
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
基于python实现删除指定文件类型
2020/07/21 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
日语求职信范文
2013/12/17 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
党支部工作总结2015
2015/04/01 职场文书
第一军规观后感
2015/06/12 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android