zoukankan      html  css  js  c++  java
  • 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页面,在浏览器中打开,我们就会看到最熟悉的那句话:

    你好,世界!

  • 相关阅读:
    Java 流程控制语句 之 顺序结构
    CSS 滑动门案例
    CSS 精灵技术(sprite)
    【剑指Offer-代码的鲁棒性】编程题23:链表中环的入口节点
    【剑指Offer-代码的鲁棒性】面试题22:链表中倒数第k个节点
    【剑指Offer-代码的完整性】面试题21:调整数组顺序使奇数位于偶数前面
    【剑指Offer-代码的完整性】面试题20:表示数值的字符串
    【剑指Offer-代码的完整性】面试题19:正则表达式匹配
    【剑指Offer-代码的完整性】面试题16:数值的整数次方
    【剑指Offer-位运算】面试题15:二进制中1的个数
  • 原文地址:https://www.cnblogs.com/qq-602904354/p/4101499.html
Copyright © 2011-2022 走看看