目前选择使用bootstrap作为前端页面模板，是件很省心的事情。官网上给出的实例和教程也很多。在实际使用过程中，我们也许还要借助文档去了解它的元素和样式。但也不能减少我们使用他的兴趣。

我准备将其整理成一个系列，从页面常用布局开始，后期陆续增加我觉得有价值的可分享的东西。

众所周知，当我们要学习一门新的开发语言时，就会在部署好环境后，打印出最初的“hello，world！”。也不例外，下面我们就用html5的页面来展示它。

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

    <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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="http://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="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

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

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

  </body>

</html>

在上面的代码截图中，我们使用到了一些新的标签，不同于html4，比如：<!DOCTYPE html>     定义文档类型。

浏览器兼容问题，一直是做web网站时常遇到的问题。这里我们也举例说下IE下的兼容：

<!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]-->

使用bootstrap，页面中我们需要引用的核心配置有：bootstrap.min.css，jquery.min.js，bootstrap.min.js。

这是一个静态html页面，在浏览器中打开，我们就会看到最熟悉的那句话：

你好，世界！

bootstrap学习起步篇：初识bootstrap之html5语法构建hello篇（一）的更多相关文章

  1. 第一篇:初识bootstrap

    Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利 ...

  2. Bootstrap学习——起步

    一,前言 个人不是专业从事前端开发,但在一个小公司里工作,作为有过这样经历的程序员都知道,开发一个网站或者是一个管理系统,程序员基本所有的事都包了,真是什么都要懂一点啊.而我个人也不怎么喜欢写CSS和 ...

  3. bootstrap学习笔记<一>（bootstrap用法）

    首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...

  4. bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  5. bootstrap学习起步篇：初识bootstrap之表单验证（二）

    学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验 ...

  6. BootStrap学习之先导篇——响应式网页

    Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...

  7. HTML5+Bootstrap 学习笔记 4

    HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的 ...

  8. Bootstrap的起步

    -- Bootstrap的起步部分是对Bootstrap的基本了解,有些细节只是在后面的完善时候需要详细阅读. 最基本点还是Css 和组件部分,这部分应该先进行练习....高级阶段是Javascrip ...

  9. 初识 Bootstrap

    Bootstrap 概述 Bootstrap 是一个前端框架,使用它可以快速开发响应式页面,还能专门针对 PC 端或移动端快速开发,大大提高了开发效率. Bootstrap 是最受欢迎的 HTML.C ...

随机推荐

  1. 修改浏览器accept使支持@ResponseBody

    原始:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 application/json,text/javascript, ...

  2. kettle内存溢出

    ETL工具kettle,在老版设计后,使用新版时,居然发生了内存溢出的错误: 出现: java heap 或者 OutOfMemory等字样 这是kettle分配的内存不足. 在kettle的运行路径 ...

  3. ios开源项目(各种有用的第三方库)

    状态栏:MTStatusBarOverlay  下拉刷新:EGOTableViewPullRefresh  网络应用:ASIHTTPRequest  等待特效:MBProgressHUD  JSON解 ...

  4. Ehcache（02）——ehcache.xml简介

    http://haohaoxuexi.iteye.com/blog/2113728 ehcache.xml简介 ehcache.xml文件是用来定义Ehcache的配置信息的,更准确的来说它是定义Ca ...

  5. java的BigDecimal

    java的BigDecimal 一般设计到高精度的加法或乘法或者阶乘的求和积都会用到BigDecimal这个类. import java.util.*;import java.math.BigDeci ...

  6. hibernate一些坑记录集

    1:对比原生sql查询和 hql查询 返回结果的类型 count: sql: select count(0) from xxx where .... 返回 BigInteger hql: select ...

  7. MySQL安装详解(V5.5 For Windows)

    前言 这几年一直在用MySQL,并且是Windows+.Net+MySQL的搭配,用MyISAM引擎支持过单表每天千万以上的数据递增,TB级的数据MySQL游刃有余.最近在做一个较大并发的项目,尝试了 ...

  8. 【ZZ】MySql语句大全：创建、授权、查询、修改等

    http://blog.csdn.net/evankaka/article/details/45580845

  9. sizeWithFont 不是线程安全。

    在ios开发中经常使用用sizeWithFont 方法来计算UILabel 的frame, 例如动态计算UITableViewCell 的高度,在主线程处理没有问题,但是在子线程用此方法来计算就会出现 ...

  10. MySQL大批量插入数据

    MySQL大批量插入数据 1. 对于Myisam类型的表,可以通过以下方式快速的导入大量的数据. ALTER  TABLE  tblname  DISABLE  KEYS; loading  the  ...