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. 一个简单易懂的javascrip selection&range小案例

    在制作富文本编辑器,尤其是在制作以div元素为编辑器区域时,当鼠标离开编辑区域以后会失去焦点,失去选区,这时候就要通过selection&range来重新设置选区.[以下代码尚未考虑IE低版本 ...

  2. Linux常用的配置文件整理

    /etc/fstab    ( 分区挂载配置文件) /etc/sysconfig/network   (主机名称配置文件) /etc/sysconfig/network-scripts/ifcfg-e ...

  3. Linux系统开机启动流程

    (来源学习Linux时,自己做的笔记) Linux系统有7个运行级别(runlevel)运行级别0:系统停机状态,系统默认运行级别不能设为0,否则不能正常启动运行级别1:单用户工作状态,root权限, ...

  4. linux 驱动入门6

    看/sys目录经常看到bus device driver class. 这也是网上大量说的驱动驱动模型.这些的关系得熟悉得明白吧.是的.今天我先不整他们的关系.先逐个击破,然后再统一来理清楚他们之间的 ...

  5. 关于div宽度和高度的100%设定

    设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...

  6. LPC1768定时器普通定时

    //其他通道的基本定时功能都能在这里实现 void Time0Mr0Init(u32 arr,u32 psc) { LPC_SC->PCONP |= (1<<1);          ...

  7. label同时设置sizeToFit，NSTextAlignmentCenter不起作用

    问题:label要多行显示,按照这样子设置,iOS9以上work,iOS8无用 self.bookNameLabel.lineBreakMode = NSLineBreakByCharWrapping ...

  8. mysql 省市联动sql 语句

    /*MySQL Data TransferSource Host: localhostSource Database: virgoTarget Host: localhostTarget Databa ...

  9. Less-css预处理编译

    node编译 第一步:https://nodejs.org/en/  到node官网下载最新的node 第二步:和普通软件一样把node安装好 第三步:运行-cmd,准备安装less 全局安装(整个电 ...

  10. thinkPHP的学习

    1.版本,以3.1为主,因为手册是基于这个的,最新的版本,还没有对应的手册 2.发现一个问题,echo 中文时,出现乱码,而调用模版则正常. 3.写url的注意大小写.index和Index是不同的 ...