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.validate分组验证代码
Mar 17 Javascript
jquery cookie的用法总结
Nov 18 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
培训主管岗位职责
2014/02/01 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
史上最牛辞职信
2015/05/13 职场文书
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技