首先引入bootstrap官网链接：http://www.bootcss.com/

bootstrap 3下载地址：http://v3.bootcss.com/getting-started/#download

bootstrap的CDN链接：

<!-- 新 Bootstrap 核心 CSS 文件 -->

<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>

使用bootstrap的基本模板

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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>

      <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>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

分步解析bootstrap模板

<!--网页编码格式-->

<meta charset="utf-8">

<!--在IE运行最新的渲染模式-->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--初始化移动设备浏览显示-->

<!--width=device-width宽度等于设备宽度-->

<!--initial-scale=1初始缩放比例为1-->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--这一块是对IE8和9的一些支持-->

<!-- 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>

      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

最后注意：

一般css放在head中，jQuery的引用和js文件放在body的最下面。

bootstrap学习笔记<一>（bootstrap用法）的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  3. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  4. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  5. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  6. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  7. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  8. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

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

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

随机推荐

  1. UINavigationController侧滑滑动返回 卡死问题

    UINavigationController滑动返回,有需要的朋友可以参考下. 最近做了UINavigationController的滑动返回(IOS7及以后系统默认支持的), 主要分成以下几步以及碰 ...

  2. 直接在Chrome里抓取数据

    一个小测试发现可以自动做题,于是想通过脚本的方式看能不能获取相应的题库,刚好可以学习一下JS异步操作.花了一天时间,总算跑顺利了,遇到了不少坑.记录下来分享. 1.JS如何顺序执行 JS有强大的异步操 ...

  3. c#读取Excel的列名问题

    在修改c#读取Excel的时候,遇到了一些小问题,总结下,希望别人不用再浪费时间 读取excel的时候,如果是空行就不读取? SELECT * FROM [DB_ESTATE$] where F2&l ...

  4. 【转】卸载VMware时提示“The MSI failed”解决方案

    转载地址: http://www.2cto.com/os/201309/243843.html   安装精简版VM后再安装其他版本的VM,或者想升级安装更高的版本时,无法正常卸载(如提示The MSI ...

  5. YTU 3006: 迷宫问题（栈与队列）

    3006: 迷宫问题(栈与队列) 时间限制: 1 Sec  内存限制: 128 MB 提交: 3  解决: 1 题目描述 编写一个求解迷宫问题的程序,要求输出迷宫的所有路径,并求最短路径长度及最短路径 ...

  6. Oracle导出的sql执行出错

    建的表如果有constraint的话sql语句中会有create unique index...而在前面的建表语句中,这个index实际上已经建好了. 所以导出的sql语句,应该将后面的create ...

  7. 2015-11-04 asp.net 弹出式日历控件 选择日期 Calendar控件

    html代码: <%@ Page Language="C#" CodeFile="calendar.aspx.cs" Inherits="cal ...

  8. Removing Columns 分类： 贪心 CF 2015-08-08 16:10 10人阅读 评论(0) 收藏

    Removing Columns time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  9. Radar Installation 分类： POJ 2015-06-15 19:54 8人阅读 评论(0) 收藏

    Radar Installation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 60120   Accepted: 13 ...

  10. TCP三次握手

      TCP协议下,客户的和服务器的连接过程称为“三次握手”   第一次握手:建立连接时,客户的发送SYN包到服务器,并进入SYN_SEND状态,等待服务器确认. 第二次握手:服务器收到SYN包,必须确 ...