目前选择使用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. Jeecms自定义标签用法[单个内容]

    1.com.jeecms.cms.action.directive包下建立自己的标签类

  2. 应用完全启动后, Spring执行自定义初始化

    项目中做敏感词过滤, 因为前台ajax校验要走service ,而后台统一过滤器要走interceptor , 所以把检查器提到一个工具类(HeXieWordFinder)里 这个工具类理应缓存数据库 ...

  3. VMware虚拟机扩容

    作者:金良(golden1314521@gmail.com) csdn博客:http://blog.csdn.net/u012176591 用了一段Linux虚拟机.发现安装虚拟机时分配的空间不够用, ...

  4. php 算法之切割数组，不用array_chunk()，算法之二，取数组的差值，不用array_diff()

    用php写算法切割数组,不用array_chunk();算法例如以下所看到的. <?php //$array 数组 //$size 每一个数组的个数 //每一个数组元素是否默认键值 functi ...

  5. android 表情,软键盘冲突解决方案（仿微博等SNS应用）

    之前总想搞一下这个模块,可是由于忙碌总是推迟,现在就把这块好好的弥补过来,下面是我实现的思路.本人才疏学浅,还望大家不要见笑. 首先我们还是先看写示例:            上面应用应该不用我过多介 ...

  6. delphi 16 网页缩放

    网页放大 网页缩小         WebBrowser1.OleObject.Document.Body.Style.Zoom := 0.50; 缩放网页 Ctrl+中键↑ 放大 Ctrl+中键↓ ...

  7. [Angular 2] Start with Angular2

    Create a index.html: <!DOCTYPE html> <html> <head> <title>Really Understandi ...

  8. Link List

    At first, i prepared to go through <the introduction to algorithm> ,however , i found some par ...

  9. php引入公用部分html出现了一行空白（原创）

    在导入公用部分html(客服信息)时,莫名其妙出现了一行空白,样式,html均无问题 后来才发现是html多了一行空白 <div class="ad-module-item3 fn-m ...

  10. mysql权限及用户

    一:Flush table tables_name MySQL的FLUSH句法(清除或者重新加载内部缓存) FLUSH flush_option [,flush_option],如果你想要清除一些My ...