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

    你好,世界!

  • 相关阅读:
    关于MySQL中ALTER TABLE 的命令用法——SQL
    replace函数——SQL
    SQL构造一个触发器
    【视频转换】监控视频DAV转mp4
    【pyqt5+opencv】如何将大量图片合成一张图
    【OpenCV+pyqt5】视频抽帧裁剪与图片转视频
    【Caffe】生成数据之修改label
    【labelme】标注工具Trick
    【OpenCV+pyqt5】视频抽帧相关操作
    【pyqt5】Pyinstaller封装OpenCV异常
  • 原文地址:https://www.cnblogs.com/qq-602904354/p/4101499.html
Copyright © 2011-2022 走看看