编程 Javascript

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

Posted in Javascript onApril 13, 2017

前言: 前几天，本想做一个登陆界面，但自己写form表单必然很丑，所以想用下bootstarp框架，之前听别人说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实战教程

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

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

- Author -

前程明亮

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用javascript动态调整iframe高度的方法

Mar 06 Javascript

javascript获取所有同类checkbox选项(实例代码)

Nov 07 Javascript

javascript获取URL参数与参数值的示例代码

Dec 20 Javascript

js 事件截取enter按键页面提交事件示例代码

Mar 04 Javascript

JavaScript数据结构中串的表示与应用实例

Apr 12 Javascript

关于jQuery中fade(),show()起始位置的一点小发现

Apr 25 jQuery

cordova入门基础教程及使用中遇到的一些问题总结

Nov 14 Javascript

vue.js select下拉框绑定和取值方法

Mar 03 Javascript

JavaScript实现的简单加密解密操作示例

Jun 01 Javascript

微信小程序实现tab页面切换功能

Jul 13 Javascript

angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

Aug 17 Javascript

Javascript异步执行不按顺序解决方案

Apr 30 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

PHP 模拟$_PUT实现代码

2010/03/15 PHP

解决php的“It is not safe to rely on the system’s timezone settings”问题

2015/10/08 PHP

基于CI框架的微信网页授权库示例

2016/11/25 PHP

php中preg_replace正则替换用法分析【一次替换多个值】

2017/01/17 PHP

thinkphp框架类库扩展操作示例

2019/11/26 PHP

TP5框架实现的数据库备份功能示例

2020/04/05 PHP

javascript 密码强弱度检测万能插件

2009/02/25 Javascript

让GoogleCode的SVN下的HTML文件在FireFox下正常显示.

2009/05/25 Javascript

5个javascript的数字格式化函数分享

2011/12/07 Javascript

原生JS绑定滑轮滚动事件兼容常见浏览器

2014/06/30 Javascript

jQuery实现的图片分组切换焦点图插件

2015/01/06 Javascript

JavaScript原生对象之String对象的属性和方法详解

2015/03/13 Javascript

JavaScript使表单中的内容显示在屏幕上的方法

2015/06/29 Javascript

基于Jquery代码实现支持PC端手机端幻灯片代码

2015/11/17 Javascript

JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

2016/08/05 Javascript

详解js中call与apply关键字的作用

2016/11/21 Javascript

Angular.js中下拉框实现渲染html的方法

2017/06/18 Javascript

使用重写url机制实现验证码换一张功能

2017/08/01 Javascript

vue实现鼠标经过动画

2019/10/16 Javascript

Python爬取读者并制作成PDF

2015/03/10 Python

Python检测QQ在线状态的方法

2015/05/09 Python

python实现稀疏矩阵示例代码

2017/06/09 Python

python判断字符串是否是json格式方法分享

2017/11/07 Python

python 将数据保存为excel的xls格式(实例讲解)

2018/05/03 Python

把csv文件转化为数组及数组的切片方法

2018/07/04 Python

Python将string转换到float的实例方法

2019/07/29 Python

pytorch实现MNIST手写体识别

2020/02/14 Python

Python中生成ndarray实例讲解

2021/02/22 Python

Alba Moda瑞士网上商店：独家意大利时尚女装销售

2016/11/28 全球购物

大宝sod蜜广告词

2014/03/21 职场文书

《金子》教学反思

2014/04/13 职场文书

师德师风个人自我剖析材料

2014/09/27 职场文书

师德师风整改措施

2014/10/24 职场文书

2019年最新证婚词精选集！

2019/06/28 职场文书

分析JVM源码之Thread.interrupt系统级别线程打断

2021/06/29 Java/Android

Redis安装使用RedisJSON模块的方法

2022/03/23 Redis