目前选择使用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. swfupload用法总结

    <script src="${base}/thirdparty/swfupload/swfupload.js" type="text/javascript" ...

  2. Unity中2D和UGUI图集的理解与使用

    图集 什么是图集? 在使用3D技术开发2D游戏或制作UI时(即使用GPU绘制),都会使用到图集,而使用CPU渲染的2D游戏和UI则不存在图集这个概念(比如Flash的原生显示列表),那么什么是图集呢? ...

  3. Python中的基本语句

    本文简单的介绍下Python的几个基本语句. print语句 print可同时打印多个表达式,只要将他们用逗号隔开. >>> name='Gumy' >>> gre ...

  4. 使用jdk操作 wsdl2java （wedservice）

    打开jdk下的bin目录 看下能否找到"wsimport.exe"这个文件 一般情况下都会有 如果没有则说明你的JDK不支持这个功能 然后在DOS窗口下输入wsimport 敲回车 ...

  5. 自己写一个jQuery垂直滚动栏插件（panel）

    html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...

  6. 怎样配置Tomcat环境变量

    JDK环境变量配置:      假设你的安装JDK在C盘里,如:C:\Program Files\Java\jdk1.6.0_05,那么就在系统变量里(当然也能够在用户变量里)点新建:      变量 ...

  7. 谷歌插件开发（实现CSDN快速登陆）

    谷歌浏览器插件带来了很大的方便,于是就想着是不是也可以开发一个来用用.几经折腾下,开发了个CSDN快速 登陆的插件.下面简述一下开发的步骤. 1.开发工具:谷歌浏览器(我开发时用的是chrome 30 ...

  8. [Javascript] Manipulate the DOM with the classList API

    Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than u ...

  9. hive-0.10.0-cdh4.3.0安装

    1.我使用的Hadoop2.0-cdh4.3.0,相应hive配套版本号hive-0.10.0-cdh4.3.0.    2.改动hive/conf下hive-site.xml文件,无则创建hive- ...

  10. MySQL 高可用MHA安装部署以及故障转移详细资料汇总 转

    http://blog.itpub.net/26230597/cid-87082-list-2/ 1,简介 .1mha简介 MHA,即MasterHigh Availability Manager a ...