作業:構建網站 - 知識準備 - Bootstrap基礎

Bootstrap可以說是CSS框架,後來加入了js插件。

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用於開發響應式佈局、移動設備優先的 WEB 項目。

網址:Bootstrap中文網

bootstrap安裝

<link rel="stylesheet" href="../../bootstrap3/css/bootstrap.css">
<script src="../../JQuery/jquery-1.12.4.js"></script>
<script src="../../bootstrap3/js/bootstrap.js"></script>

bootstrap全局CSS樣式

(1) HTML5文檔類型

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

(2) 移動設備優先

<meta name="viewport" content="width=device-width, initial-scale=1">
備註:vscode中自動生成代碼時有這一行

(3) 佈局容器

以下兩種容器類不能互相嵌套

.container 類用於固定寬度並支持響應式佈局的容器

<div class="container">
  ...
</div>

.container-fluid 類用於 100% 寬度,佔據全部視口(viewport)的容器

<div class="container-fluid">
  ...
</div>

(4) 柵格系統

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增加,系統會自動分爲最多12列。

柵格系統用於通過一系列的行(row)與列(column)的組合來創建頁面佈局,你的內容就可以放入這些創建好的佈局中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../bootstrap3/css/bootstrap.css">
    <script src="../../JQuery/jquery-1.12.4.js"></script>
    <script src="../../bootstrap3/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <div class="col-md-3">
            <img src="../../Images/1.jpg" width="100%" alt="">
        </div>
        <div class="col-md-3">
            <img src="../../Images/1.jpg" width="100%" alt="">
        </div>
        <div class="col-md-3">
            <img src="../../Images/1.jpg" width="100%" alt="">
        </div>
        <div class="col-md-3">
            <img src="../../Images/1.jpg" width="100%" alt="">
        </div>
    </div>
</body>
</html>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章