首先引入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. ectouch第二讲之 文件结构

    相信大家在ectouch官网都注意到了,ectouch采用的MVC框架,之前一直以为它用的和ecshop一样都是smarty,本鸟默默按照smarty的文件结构研究了好几天,结果是各种文件对不上号.无 ...

  2. Java JDBC 驱动 MySQL

    MySQL: 1>下载地址:http://www.mysql.com/products/connector/ 2> //jdbc:[数据库类型]://[ip地址]:[端口号]/[数据库名] ...

  3. java 判断某一天是当年的哪一天

    题目:输入年份,月份,日,判断这一天是这一年的第几天?(闰年的2月份为29天,平年为28天) public class Runnian { /** * 能被4整除且不能被100整除或者能被400整除的 ...

  4. 获取SqlServer2005表结构(字段，主键，外键，递增，描述)

    1.获取表的基本字段属性 --获取SqlServer中表结构 SELECT syscolumns.name,systypes.name,syscolumns.isnullable, syscolumn ...

  5. 【转】去掉eclipse的validate

    转载地址:http://www.blogjava.net/leisure/archive/2013/01/11/394087.html 困扰了好几天,与大家共享 1,在project名称上右键选择pr ...

  6. Resolving failed: Temporary failure in name resolution 错误解决方法

    首先,检查自己的服务器是否配置了DNS:   其次,在确认了自己已经配置了DNS后,并且域名解析已经正常的情况下,还有上面的问题,接下来就是重启自己的web服务器.比如,apache,nginx等. ...

  7. java初学。加载图片

    public class GameFrame extends Frame{ private static final int WIDTH=900; private static final int H ...

  8. 查询SQL 对象及存储过程

    select * from database..sysobjects order by name EXEC Sp_HelpText 'Proc_Export268';

  9. 解决CentOS下man 命令，没有帮助信息

    Cannot open the message catalog "man" for locale "zh_CN.UTF-8" (NLSPATH="/u ...

  10. Robotium中定位Android客户端疑难元素

    对于没有id,没有text,只有一个图标的疑难元素(ImageView),应该如何定位呢?拿人人网个人主页的设置按钮举例: 我最终是通过定位页面上可以定位到的其他元素,然后通过其他元素与疑难元素相对坐 ...