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 相关文章推荐
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php ci框架验证码实例分析
2013/06/26 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
php常用正则函数实例小结
2016/12/29 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jQuery中find()方法用法实例
2015/01/07 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
js实现数组转换成json
2015/06/26 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
vue实现分页栏效果
2019/06/28 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
期终自我鉴定
2014/02/17 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
教研活动总结
2014/04/28 职场文书
《司马光》教学反思
2016/02/22 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python