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 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 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高效率写法(详解原因)
2013/06/20 PHP
php中strtotime函数用法详解
2014/11/15 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jQuery each()小议
2010/03/18 Javascript
ExtJS 入门
2010/10/29 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
简单实现js浮动框
2016/12/13 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python中的推导式使用详解
2015/06/03 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python函数参数分类原理详解
2020/05/28 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
高中生操行评语大全
2014/04/25 职场文书
保护环境倡议书300字
2014/05/19 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
python周期任务调度工具Schedule使用详解
2021/11/23 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
Python 中面向接口编程
2022/05/20 Python