Bootstrap学习笔记之环境配置(1)


Posted in Javascript onDecember 07, 2016

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。对于不太熟悉前端开发的程序员来说,是一个很好的解决方案。

0x01 Bootstrap结构

下载了Bootstrap v3.3.0版本(预编译版本),主要包含有css、js和fonts三个目录。下面是我在学习总结中构建的目录结构,其中的html文件夹用来放置编写的html页面,img文件夹放置使用的图片。

Bootstrap学习笔记之环境配置(1)

0x02 基本模板

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <title>基本模板</title>
</head>
<body>
 …
</body>
</html>

上面的css、js等的引入和设置编码方式都比较常见,这里不多讲。关键说下这里:

<meta name="viewport" content="width=device-width, initial-scale=1">

主要是为了兼容移动端的开发。content属性的解析如下:

width:可视区域的宽度,值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上
user-scalable:是否可对页面进行缩放,no 禁止缩放。

0x03 CDN服务

最后说下Bootstrap CDN的问题,上面JQuery就是引入的CDN连接(Bootstrap官网提供的v3.3.0版本引入的就是JQuery v1.11.1,我们也引入这个版本)。下面推荐2个CDN服务:

国内:https://www.staticfile.org/
国际:https://cdnjs.com/

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
js字符串转成JSON
Nov 07 Javascript
js propertychange和oninput事件
Sep 28 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
Bootstrap风格的WPF样式
Dec 07 #Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 #Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 #Javascript
详解ES6中的let命令
Apr 05 #Javascript
jquery操作ID带有变量的节点实例
Dec 07 #Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 #Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 #Javascript
You might like
php调用mysql存储过程
2007/02/14 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
js停止输出代码
2008/07/20 Javascript
28个JS验证函数收集
2010/03/02 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
Python类的基础入门知识
2008/11/24 Python
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
django中间键重定向实例方法
2019/11/10 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
初中三年毕业生的自我评价分享
2014/02/14 职场文书
小学生秋游活动方案
2014/02/23 职场文书
车间机修工岗位职责
2014/02/28 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书