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. Is it possible to run native sql with entity framework?

    For .NET Framework version 4 and above: use ObjectContext.ExecuteStoreCommand() if your query return ...

  2. php单元测试到底是什么东西呢？

    前言: 真正写php代码也有3年时间了,勉强算是一个php程序员, 但是,心底却一直没有底气. 都说测试驱动开发,可我连程序开发中什么是单元测试?这种基本的程序员的素养都 还不是很清楚,痛定思痛,决定 ...

  3. UILabel的抗压缩、抗拉伸、以及控件的约束简述

    今天来说一说UILabel的约束设置问题 首先主要介绍:Priority(控件约束的优先级).Content Hugging Priority(控件抗拉伸优先级).Content Compressio ...

  4. JQuery实现超链接鼠标提示效果

    一.第一种方法用Jquery<p><a href="http://www.nowamagic.net/" class="tooltip" ti ...

  5. ios系统 ipa文件 打包流程详解 及 常见问题处理

    注:先反省一下,原本打算一天一篇,每天进步一点点,但是最近变懒了,居然三天没有更新,在此告诫各位道友及我自己,程序员需戒欲,搞技术需持之以恒,不能三天打鱼,两天晒外. 现在步入主题,前段时间使用xco ...

  6. iOS开发——工厂模式

    工厂模式很好用,为表诚意,我直接搞个实用的例子放这,解析一个订单的数据,并且这个订单里面可能不止一件商品的做法. 还是直接上代码,不懂的地方,再提出来. 1.在MyOrderDeals.h文件中 #i ...

  7. 从CK+库提取标记点信息

    1.CK+动态表情库介绍 The Extended Cohn-Kanade Dataset(CK+) 下载地址 这个数据库是在 Cohn-Kanade Dataset 的基础上扩展来的,发布于2010 ...

  8. leetcode-位运算

    位运算可以大大减小算法空间复杂度,提高效率,很巧妙! 先说一下位运算的简单用法 1. 按位与 & 用途:清零,取一个数中的某些指定位,保留一个数中的某些指定位 2. 按位或 | 用途:将一个数 ...

  9. .NET防止重复提交数据

    最近在做一个销售系统的时候,操作人员提交数据的时候数据库竟然会出现多条数据相同的记录,并且是在1秒之内,客户反馈给我们,第一反应是重复提交的问题,检查了下代码,程序执行完成后应该是跳转到别的页面的,可 ...

  10. 【动态规划】Gym - 101102A - Coins

    Hasan and Bahosain want to buy a new video game, they want to share the expenses. Hasan has a set of ...