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. hibernate---树状映射

    总公司--分公司1, 分公司2 分公司1: 分公司1下部门1, 分公司1下部门2 分公司2: Org.java: package com.bjsxt.hibernate; import java.ut ...

  2. Codeforces#363 Div2

    A题: 题意:给定一些数,给定一些往左走和往右走的操作,问是否能够相遇,如果相遇请求出相遇时间 分析:对于相邻两个数,如果大的往左,小的往右就能够相遇,否则不能相遇,在求出所有相遇当中的第一次相遇即可 ...

  3. hellocharts-android开源图表库（效果非常好）

    泡在网上的日子 发表于 2014-11-07 12:28 第 33156 次阅读 chart 2 编辑推荐:稀土掘金,这是一个高质量的技术干货分享社区,web前端.Android.iOS.设计资源和产 ...

  4. Apache 重启时会有报 AH00558

    AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0 ...

  5. AndroidStudio项目.gitignore文件内容

    .metadata/ *~ # files for the dex VM *.dex # Java class files *.class # generated files bin/ gen/ li ...

  6. el5,6,7的ntpdate服务

    在el5里没有ntpdate服务 在el6里有ntpdate服务 在el7里有ntpdate服务

  7. MongoDB和MySQL的区别

    http://www.cnblogs.com/caihuafeng/p/5494336.html MongoDB(文档型数据库):提供可扩展的高性能数据存储 一. 1.基于分布式文件存储 2.高负载情 ...

  8. Apache/nginx转发设置-分布式部署

    Apache转发设置1. Weblogic安装 Weblogic8和Weblogic10默认安装,选择完全安装即可,如果是Weblogic9则选择自定义安装,勾选WebService plugin 2 ...

  9. Visual Studio Team Services 帐户管理操作

    Visual Studio Team Services 网址: https://www.visualstudio.com/ 1.登陆 2.登陆后新建账户 3.删除团队项目 (1)点击自己的Visual ...

  10. 刪除預裝在windows 10 的app

    刪除預裝在windows 10 的app 步驟: 方法一.(易於解除安裝的app) 1. →按"開始標誌" →"所有應用程式" →在想解除的程式圖示上" ...