1、Bootstrap介绍

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

2、下面对于官网上给出的最简单的一个bootstrap页面进行详细介绍

<!DOCTYPE html>---------html5声明
<html lang="zh-CN">-------------指定了语言
<head>
    <meta charset="utf-8"> -----------指定编码格式
    <meta http-equiv="X-UA-Compatible" content="IE=edge">----bootstrap不支持Ie古老的兼容模式，为了让ie浏览器运行最新的渲染模式，加入了这行
    <meta name="viewport" content="width=device-width, initial-scale=1">-----响应式布局：获取当前设备的物理宽度；根据设备宽度来设计网页宽度；缩放比是1:1
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">------引入了bootstrap的css样式表　　

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>---bootstrap不支持ie9以下的浏览器，这一行是为了让浏览器支持html5的标签
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>---承上，这一行是为了让它支持媒体查询，也就是响应式
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>---引入jquery文件
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>-----引入bootstrap文件，bootstrap是依赖于jquery的，所以要先引入jquery
</body>
</html>

3、应用

在工程中，需要把bootstrap.min.css，bootstrap.min.js, jquery-x.x.x.min.js拷贝到目录中才能使用bootrap提供的样式；或者直接使用CDN加速服务，如下。

<!-- 新 Bootstrap 核心 CSS 文件 -->str
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

[html5] 学习笔记-bootstrap介绍的更多相关文章

  1. ASP.NET Core Web开发学习笔记-1介绍篇

    ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...

  2. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  3. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  4. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  5. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  7. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  8. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  9. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

随机推荐

  1. 搭建git服务器及利用git hook自动布署代码

    注意:服务器:Ubuntu Server 14.04,我的项目比较小,所有操作都使用root,建议最好新建一个用户(需要有管理员权限,否则在后面使用hooks自动部署代码时会出现各种权限问题,很蛋疼的 ...

  2. Spring的5种事物配置方式

    Spring事务配置的五种方式 前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只 ...

  3. Python之路【第三篇】：模块

    定义: 包:包含__init__.py文件.模块(也是.py文件) 当包被其它模块调用时,首先会执行该包下的__init__文件 包含有模块,包可以有多级 模块的导入: import from...i ...

  4. [转] WebService开发笔记 1 -- 利用cxf开发WebService竟然如此简单

    以下文章来自   http://www.blogjava.net/jacally/articles/186655.html 现在的项目中需要用到SOA概念的地方越来越多,最近我接手的一个项目中就提出了 ...

  5. jsp显示计算数值, 四舍五入

    <script>document.write(Math.round(<%= rs_MFM.getInt("PVRCompl") %>/<%= rs_M ...

  6. Linux系统目录

    [root@localhost ~]# ls /bin dev home lost+found misc opt root selinux sys usrboot etc lib media net ...

  7. memcache数据组织

    转自:原链接 使用命令 set(key, value) 向 memcached 插入一条数据, memcached 内部是如何组织数据呢 一 把数据组装成 item memcached 接受到客户端的 ...

  8. mysql 之SQL语句--NSERT SELECT ON DUPLICATE KEY UPDATE的写法

    Table source CREATE TABLE `source` ( `key` int(11) NOT NULL AUTO_INCREMENT, `data` int(11) DEFAULT N ...

  9. mvc中上传图片到指定文件夹中

    前台: @using (Html.BeginForm("AddImg", "UpFileImg", FormMethod.Post, new { enctype ...

  10. 再次写了第一个servlet

    费时2小时,熟悉tomcat和编写了第一个servlet