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 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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数据库安装图文教程)
2010/04/28 PHP
php header示例代码(推荐)
2010/09/08 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
javascript闭包入门示例
2014/04/30 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
python fabric使用笔记
2015/05/09 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
python实现人像动漫化的示例代码
2020/05/17 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
升职自荐信范文
2013/10/05 职场文书
服务中心夜班服务员岗位职责
2013/11/27 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
给同事的道歉信
2014/01/11 职场文书
土木工程专业推荐信
2014/02/19 职场文书
新教师个人总结
2015/02/06 职场文书