目前选择使用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. [置顶] 很荣幸被选为2013年度 CSDN博客之星评选，如果觉得我的文章可以，请投我一票！

    亲爱的小伙伴们,很荣幸我被选为<2013年度CSDN博客之星候选人>,希望大家多多支持,geekguy会继续努力,为大家奉献更好的文章. 投票地址:http://vote.blog.csd ...

  2. MVC4学习过程记录

    终于决定开始尝试Web开发,即是为了工作也是为了自己的兴趣,决定还是从MS的MVC4开始. 首先从Asp.Net MVC4入门指南这个系列开始学习(http://www.cnblogs.com/pow ...

  3. 剑指OFFER之重建二叉树（九度OJ1385）

    题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7 ...

  4. 使用Github遇到的问题及解决办法

    问题一: 当push代码上去仓库时,出现 ! [rejected]        master -> master (fetch first) error: failed to push som ...

  5. PostgreSQL的 initdb 源代码分析之十一

    继续分析: /* Top level PG_VERSION is checked by bootstrapper, so make it first */ write_version_file(NUL ...

  6. SQL Server活动监视器

    打开SQL Server活动监视器:

  7. C#操作Word （1）Word对象模型

    Word对象模型  (.Net Perspective) 本文主要针对在Visual Studio中使用C# 开发关于Word的应用程序 来源:Understandingthe Word Object ...

  8. Demo Swig

    演示使用swig工具创建c语言的java接口,生成.so库和java接口文件. 在此之前先要安装swig,安装方法:sudo apt-get install swig 1.使用eclipse创建工程. ...

  9. 15分钟学会git基本的操作命令

    http://hao.jobbole.com/try-git/ 假如你现在新创建了一个项目,想把它提交到github上面? 假设你创建好了一个项目,并切换到项目的根目录下面: $ git status ...

  10. day03 Java基础

    1.面试题 (1)short s=1;s=s+1; (2)short s=1;s+=1; 上面两行代码有没有问题,如果有,哪里有问题? 答:第一个有问题,s+1是int类型的值,赋值给short的s, ...