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. [iOS]C语言技术视频-05-程序循环结构(do{}while();)

    下载地址: 链接: http://pan.baidu.com/s/1c02ke3m 密码: x97w

  2. avi格式详细介绍

    百度:http://wenku.baidu.com/link?url=KB7qKc6UG4aeU-i9FtXeV8Uou4JHPceiyz3HNbzCrQw4phY-qRlcp3tTSwYPeIgdx ...

  3. CodeForces 617E XOR and Favorite Number

    莫队算法. #include<cstdio> #include<cmath> #include<cstring> #include<algorithm> ...

  4. cron 执行php文件

    php执行的命令要写全路径,不然无法执行

  5. STM32+NRF24L01无线（转）

    源:STM32+NRF24L01无线 硬件SPI和模拟SPI源码: nrf24发送(模拟SPI)BHS-STM32.rar nrf24接收(模拟SPI)BHS-STM32.rar nrf24发送(硬件 ...

  6. ajax--2017年1月15日

    听说点六下就能复制了? ajax: 一般处理程序(数据接口):ashx 跨语言传递数据:xml: 结构不清晰 代码量比较大 查找起来比较费事 非面向对象结构 json: 结构清晰 代码量相对较小 面向 ...

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

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

  8. shell 实例学习

    安装crond:yum install crontabs  (http://blog.163.com/victory_wxl/blog/static/14130530220115296180333/) ...

  9. iOS常用的第三方库GitHub地址

    MJRefresh https://github.com/CoderMJLee/MJRefresh#期待 Facebook-POP https://github.com/facebook/pop /* ...

  10. Xcode的版本问题

    1. 已经安装了Xcode6,如何再安装Xcode5,并使两者共存? 2. Xcode6升级到Xcode7 适配问题 3. XCODE6中使用iOS7 SDK的方法: 从XCODE 5的目录中: /A ...