bootstrap学习起步篇：初识bootstrap之html5语法构建hello篇（一）
目前选择使用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篇（一）的更多相关文章
- 第一篇:初识bootstrap
Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利 ...
- Bootstrap学习——起步
一,前言 个人不是专业从事前端开发,但在一个小公司里工作,作为有过这样经历的程序员都知道,开发一个网站或者是一个管理系统,程序员基本所有的事都包了,真是什么都要懂一点啊.而我个人也不怎么喜欢写CSS和 ...
- bootstrap学习笔记<一>（bootstrap用法）
首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...
- bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）
栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
- bootstrap学习起步篇：初识bootstrap之表单验证（二）
学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验 ...
- BootStrap学习之先导篇——响应式网页
Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...
- HTML5+Bootstrap 学习笔记 4
HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的 ...
- Bootstrap的起步
-- Bootstrap的起步部分是对Bootstrap的基本了解,有些细节只是在后面的完善时候需要详细阅读. 最基本点还是Css 和组件部分,这部分应该先进行练习....高级阶段是Javascrip ...
- 初识 Bootstrap
Bootstrap 概述 Bootstrap 是一个前端框架,使用它可以快速开发响应式页面,还能专门针对 PC 端或移动端快速开发,大大提高了开发效率. Bootstrap 是最受欢迎的 HTML.C ...
随机推荐
- angular 管理后台
http://blog.csdn.net/iamnieo/article/details/50474399
- 在MVC项目中使用RDLC报表
原文地址:http://www.cnblogs.com/wuhuacong/p/4109833.html RDLC是一个不错的报表,有着比较不错的设计模式和展现效果,在我的Winform开发里面,使用 ...
- SQL自定义函数split分隔字符串
SQL自定义函数split分隔字符串 一.F_Split:分割字符串拆分为数据表 Create FUNCTION [dbo].[F_Split] ( @SplitString nvarchar(max ...
- TestDriven.NET – 快速入门
TestDriven.NET – 快速入门[译文] 介绍 这部分将提供一个快速的入门向导,在vs.NET的任何一个版本上面使用TestDriven.NET TDD(测试驱动开发)在你写你的代码之前,写 ...
- Velocity中#set指令
引用可以让模板设计者生成动态内容,而指令允许设计者真正的负责页面的展现和内容. 指令是以#开头,后面紧跟一个关键字,比如if,else,foreach等.而这个关键字,是可以被放在{}中间的.这是规范 ...
- 看京东如何把Intel RealSense技术用在物流上
提起Intel RealSense 3D 深度摄像头,总是离不开无人机.机器人等前沿硬件产品,比如 CES 2016 上让人眼前一亮的自动避障无人机Yuneec “台风 H”,Segway.Nineb ...
- 一个Windows Service项目的完整开发过程
(一)建立项目文件 先建立一个解决方案文件,然后添加三个项目. 分别是: (1)Windows服务项目 -----ActiveMQSenderService项目,服务主要是定时轮询某表,将更新发送到 ...
- phpstorm 和web storm汉化
http://www.jincaimao.com/cms-phpstorm-index.html phpStorm汉化方法: B1).找到X:\Program Files\JetBrains\PhpS ...
- C++之运算符重载(2)
上一节主要讲解了C++里运算符重载函数,在看了单目运算符(++)重载的示例后,也许有些朋友会问这样的问题.++自增运算符在C或C++中既可以放在操作数之前,也可以放在操作数之后,但是前置和后置的作用又 ...
- or1200下raw-os(仿真环境篇)
貌似最近都在公司混日子过了,怎么办?哎哎哎~罪过啊罪过,不过也是的,加工资居然没我份,顶领导个肺的,叫我怎么继续活啊~哎哎哎~ 算了,不谈这些鸟事情了,说多了都是泪啊,这篇blog开始我们进入raw- ...