Bootstrap学习笔记之环境配置(1)

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。对于不太熟悉前端开发的程序员来说，是一个很好的解决方案。

0x01 Bootstrap结构

下载了Bootstrap v3.3.0版本（预编译版本），主要包含有css、js和fonts三个目录。下面是我在学习总结中构建的目录结构，其中的html文件夹用来放置编写的html页面,img文件夹放置使用的图片。

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个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap安装环境配置教程分享

    Bootstrap安装环境配置教程分享

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 一.下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本.当您点击这个链接时,您将看到如下所示的网页: 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. D

  • bootstrap基本配置_动力节点Java学院整理

    bootstrap基本配置_动力节点Java学院整理

    Bootstrap 安装是非常容易的.本章将讲解如何下载并安装 Bootstrap,讨论 Bootstrap 文件结构,并通过一个实例演示它的用法. 实例采用的是百度的静态资源库上的Bootstrap资源. <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="external nofo

  • Bootstrap学习笔记之环境配置(1)

    Bootstrap学习笔记之环境配置(1)

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的.对于不太熟悉前端开发的程序员来说,是一个很好的解决方案. 0x01 Bootstrap结构 下载了Bootstrap v3.3.0版本(预编译版本),主要包含有css.js和fonts三个目录.下面是我在学习总结中构建的目录结构,其中的html文件夹用来放置编写的html页面,img文件夹放置使用的图片. 0x02 基本模板 <!DOCTYPE htm

  • BootStrap学习笔记之nav导航栏和面包屑导航

    nav导航栏 <nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的log

  • Bootstrap学习笔记之css样式设计(2)

    Bootstrap学习笔记之css样式设计(2)

    首先,很感谢各位朋友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的:Bootstrap学习笔记之css样式设计(1) 这次我们来看看bootstrap中关于样式的一些具体关键的类以及如何使用这些类,类与类之间的区别,另外涉及到的一些相关类,举列子的时候解释. 一.表单 1.form-control类:含有此类的<input><select><te

  • bootstrap学习笔记之初识bootstrap

    bootstrap学习笔记之初识bootstrap

    Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了. bootstrap是一Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架.bootstrap提供了优雅的html和css规范,它即是由动态css语言Less写成.是Github上的热门开源项目. 它基于jQuery框架开发,在

  • MongoDB 学习笔记(一)-MongoDB配置

    MongoDB 学习笔记(一)-MongoDB配置

    MongoDB简介 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. 步入正题: 下载MongoDB 下载地址:https://www.mongodb.com/download-center?jmp=nav 这里是在windows平台下安装MongoDB, 下载后,在本机,按提示进行安装. 注: 这个安装只

  • Bootstrap学习笔记 轮播（Carousel）插件

    Bootstrap学习笔记 轮播（Carousel）插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用该插件的功能,那么您需要引用 carousel.js,或者bootstrap.js 或压缩版的 bootstrap.min.js. <!DOCTYPE html> <html> <head> <title>Bootstrap 轮播(Carousel)插件<

  • 微信小程序学习笔记之页面配置与路由方式

    最近在学习回顾小程序的开发,将一些学习结果做个笔记.参考微信小程序官方文档:developers.weixin.qq.com/miniprogram- 一.小程序配置 1.全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. // 示例 { "pages": [ "pages/index/index", "pages/logs/index" ], &q

  • Bootstrap学习笔记之css组件(3)

    Bootstrap学习笔记之css组件(3)

    今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在之前的文章中阅读.  一.导航组件 自己做了个导航,目前只有一级菜单,下一篇文章中,将给出二级菜单,涉及到js的插件,所以这里不在描述. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> &l

  • Bootstrap学习笔记之js组件（4）

    Bootstrap学习笔记之js组件（4）

    这次我们来看下js组件的使用,本篇文章会有点长,希望大家可以耐心看,相信收获会有不少.不少园友加我好友,表示喜欢我写文字的风格,简单明了,这里,再次谢谢你们的支持.一方面,自身技术有限,写的东西都比较基础,另一方面,写的东西,都是根据自己的理解,把复杂的东西用最简单的语言表达出来.所以,写的有不对的地方,麻烦各位给予指正哈.  一.js文件引用 注意点:jquery必须在在其它js文件之前引入,因为其它插件都是依赖于jquery. <!--<script src="js/jquery

  • 分享bootstrap学习笔记心得(组件及其属性)

    Bootstrap是一种web框架,是基于HTML,CSS和JS的一种目前较为流行的前端框架. Bootstrap包含有丰富的组件,根据提供的组件,开发者可以更加快速.便捷地搭建自己心仪的网站.通常包括有以下常用组件:下拉菜单.按钮组.按钮下拉菜单.导航.导航条.分页.排版.缩略图.警告对话框.进度条.媒体对象等.此外,bootstrap还包含有众多jQuery插件:莫泰局昂.标签页.滚动条.弹出框等. 有关bootstrap的下载和文档可到bootstrap中文网:www.bootcss.co

随机推荐