首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

如何使用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实战教程

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

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

- Author -

前程明亮

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

Javascript 相关文章推荐
javascript 可以拖动的DIV（二）
Jun 26 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
微信小程序 video组件详解
Oct 25 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
微信小程序 下拉菜单简单实例
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
SQLite3(1) filter(1) Selenium(1) Django(9) 短信验证码(1) dockerfile(1) TextInputLayout(1) reduce(2) Tsmoothie(1) 分布式锁(3)
You might like
简单的PHP缓存设计实现代码
2011/09/30 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
自制PHP框架之设计模式
2017/05/07 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
微信小程序-小说阅读小程序实例（demo）
2017/01/12 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python梯度下降法的简单示例
2018/08/31 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
LivingSocial爱尔兰：爱尔兰本地优惠
2018/08/10 全球购物
潘多拉珠宝美国官方网站：Pandora US
2020/06/18 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
社区文艺活动方案
2014/08/19 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js