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 delete 属性的使用
Oct 08 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php获取url参数方法总结
2014/11/13 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
详解Bootstrap插件
2016/04/25 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
Python深入学习之内存管理
2014/08/31 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python列表list操作相关知识小结
2020/01/29 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
Order by的几种用法
2013/06/16 面试题
车间操作工岗位职责
2013/12/19 职场文书
大学自我鉴定
2013/12/20 职场文书
毕业设计说明书
2014/05/07 职场文书
管理建议书范文
2014/05/13 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书