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 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
JavaScript中arguments的使用方法详解
Dec 20 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验证码(支持中文)
2007/02/14 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
php类常量的使用详解
2013/06/08 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
js 深拷贝函数
2008/12/04 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
纯javascript版日历控件
2016/11/24 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
python万年历实现代码 含运行结果
2017/05/20 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
python getpass实现密文实例详解
2019/09/24 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
易程科技软件测试笔试
2013/03/24 面试题
金融专业个人求职信
2013/09/22 职场文书
学校安全管理责任书
2014/07/23 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python