如何使用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 相关文章推荐
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
微信小程序block的使用教程
Apr 01 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
js闭包学习心得总结
Apr 17 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
js微信分享实现代码
2020/10/11 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
python解析xml文件操作实例
2014/10/05 Python
python获取外网ip地址的方法总结
2015/07/02 Python
Python装饰器语法糖
2019/01/02 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
日语翻译个人求职的自我评价
2013/10/14 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
春节超市活动方案
2014/08/14 职场文书
工伤事故证明
2014/10/20 职场文书
Redis三种集群模式详解
2021/10/05 Redis
python中tkinter复选框使用操作
2021/11/11 Python
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server