编程 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 相关文章推荐

推荐40个非常优秀的jQuery插件和教程【系列三】

Nov 09 Javascript

关于jquery中全局函数each使用介绍

Dec 10 Javascript

原生javaScript做得动态表格(注释写的很清楚)

Dec 29 Javascript

Javascript 实现匿名递归的实例代码

May 25 Javascript

React Native验证码倒计时工具类分享

Oct 24 Javascript

JS 音频可视化插件Wavesurfer.js的使用教程

Oct 31 Javascript

通过说明与示例了解js五种设计模式

Jun 17 Javascript

前端Vue项目详解--初始化及导航栏

Jun 24 Javascript

js中关于Blob对象的介绍与使用

Nov 29 Javascript

vue样式穿透 ::v-deep的具体使用

Jun 04 Javascript

js实现盒子滚动动画效果

Aug 09 Javascript

react-intl实现React国际化多语言的方法

Sep 27 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将数据库中所有内容生成静态html文档的代码

2010/04/12 PHP

PHP UTF8中文字符截断函数代码

2012/09/11 PHP

php实现图片转换成ASCII码的方法

2015/04/03 PHP

PHP模拟asp.net的StringBuilder类实现方法

2015/08/08 PHP

ThinkPHP中where()使用方法详解

2016/04/19 PHP

PHP7数组的底层实现示例

2019/08/25 PHP

调用js时ie6和ie7，ff的区别

2009/08/19 Javascript

jQuery操作checkbox选择(list/table)

2013/04/07 Javascript

JavaScript动态创建div属性和样式示例代码

2013/10/09 Javascript

jQuery的ajax下载blob文件

2016/07/21 Javascript

微信js-sdk界面操作接口用法示例

2016/10/12 Javascript

jquery的父、子、兄弟节点查找,节点的子节点循环方法

2016/12/07 Javascript

JavaScript实现倒计时跳转页面功能【实用】

2016/12/13 Javascript

基于jQuery代码实现圆形菜单展开收缩效果

2017/02/13 Javascript

通过js修改input、select默认字体颜色

2017/04/19 Javascript

AngularJS+bootstrap实现动态选择商品功能示例

2017/05/17 Javascript

swiper.js插件实现pc端文本上下滑动功能示例

2018/12/03 Javascript

JS实现换肤功能的方法实例详解

2019/01/30 Javascript

python用plt画图时,cmp设置方法

2018/12/13 Python

Pycharm如何打断点的方法步骤

2019/06/13 Python

10款最好的Python开发编辑器

2019/07/03 Python

使用Tkinter制作信息提示框

2020/02/18 Python

python time()的实例用法

2020/11/03 Python

英国现代、当代和设计师家具店：Furntastic

2020/07/18 全球购物

巴西最大的巴士票务门户：Quero Passagem

2020/11/21 全球购物

这段代码难道不该打印出56吗

2013/02/27 面试题

UNIX文件名称有什么规定

2013/03/25 面试题

入党申请自荐书范文

2014/02/11 职场文书

捐款通知怎么写

2015/04/24 职场文书

2016党员入党决心书

2015/09/22 职场文书

导游词之舟山普陀山

2019/11/06 职场文书

Redis持久化与主从复制的实践

2021/04/27 Redis

python flask开发的简单基金查询工具

2021/06/02 Python

利用python实时刷新基金估值(摸鱼小工具)

2021/09/15 Python

Python 全局空间和局部空间

2022/04/06 Python

解决vue-router的beforeRouteUpdate不能触发

2022/04/14 Vue.js