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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
ES6 class的应用实例分析
Jun 27 Javascript
js+css实现全屏侧边栏
Jun 16 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 友好URL的实现(吐血推荐)
2008/10/04 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
js实现轮播图特效
2020/05/28 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
大学运动会通讯稿
2014/01/28 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
员工入职担保书范文
2014/04/01 职场文书
办公室主任岗位职责
2015/01/31 职场文书
财政局个人总结
2015/03/04 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
倡议书格式及范文
2015/04/29 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技