bootstrap學習起步篇：初識bootstrap之html5語法構建hello篇（一）

時間 2019-11-08

標籤 bootstrap 學習起步 html5 html 語法構建 hello 欄目 Bootstarp 简体版

原文原文鏈接

目前選擇使用bootstrap做爲前端頁面模板，是件很省心的事情。官網上給出的實例和教程也不少。在實際使用過程當中，咱們也許還要藉助文檔去了解它的元素和樣式。但也不能減小咱們使用他的興趣。css

我準備將其整理成一個系列，從頁面經常使用佈局開始，後期陸續增長我以爲有價值的可分享的東西。html

衆所周知，當咱們要學習一門新的開發語言時，就會在部署好環境後，打印出最初的「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> 定義文檔類型。html5

瀏覽器兼容問題，一直是作web網站時常遇到的問題。這裏咱們也舉例說下IE下的兼容：jquery

web

使用bootstrap，頁面中咱們須要引用的核心配置有：bootstrap.min.css，jquery.min.js，bootstrap.min.js。bootstrap

這是一個靜態html頁面，在瀏覽器中打開，咱們就會看到最熟悉的那句話：瀏覽器