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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
JavaScript实现前端倒计时效果
Feb 09 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript之自定义类型
2012/05/04 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
pygame实现打字游戏
2021/02/19 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
环保公益策划方案
2014/08/15 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript