Bootstrap初步使用

時間 2020-08-05

原文原文鏈接

因爲我是主要進行後端程序的編寫,最近接觸了一款前端開發框架--Bootstrap,裏面有不少美觀,簡潔的模板供咱們使用,很方便,對我這樣編寫後端程序且還在乎美觀好看的人來講很實用,因此簡單來講一下.css

1)首先打開Bootstrap的官網--https://www.bootcss.com/.html

2)打開很簡潔的就能看到其中文文檔(我選擇的Bootstrap3),點進去,先下載Bootstrap.保存在本地.
前端

3)再點擊下載的界面上方的菜單欄中先看起步一項,這都是各類程序,框架的第一步.在右側的基本模板中是咱們使用Bootstrap最基本的要素!html5

在官網中是這麼介紹的"拷貝並粘貼下面給出的 HTML 代碼，這就是一個最簡單的 Bootstrap 頁面了。"jquery

<!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">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

4)在上方菜單欄中看全局CSS樣式根據本身需求添加便可!npm

當我在我本身項目中使用時,具體是這樣的:
1)首先要把下載下來的Bootstrap以及本身下載一個jQuery複製到項目的static文件夾下:
bootstrap