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 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
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函数
2006/10/09 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php简单统计中文个数的方法
2016/09/30 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
使用Python的内建模块collections的教程
2015/04/28 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python3判断url链接是否为404的方法
2018/08/10 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
python 整数越界问题详解
2019/06/27 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
社会实践心得体会
2014/01/03 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
本科毕业生自荐信
2014/06/02 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
JavaScript的function函数详细介绍
2021/11/20 Javascript