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 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
Node实现搜索框进行模糊查询
Jun 28 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 移除数组重复元素的一点说明
2008/11/27 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
python的id()函数介绍
2013/02/10 Python
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Django 多环境配置详解
2019/05/14 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
班班通项目实施方案
2014/02/25 职场文书
婚假请假条怎么写
2014/04/10 职场文书
初中生操行评语大全
2014/04/24 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
2014年学校工作总结
2014/11/20 职场文书
家庭贫困证明
2015/06/16 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python