1. 程式人生 > >bootstrap4.1.3--下載和安裝

bootstrap4.1.3--下載和安裝

該按鈕用於下載編譯並壓縮後的CSS、JavaScript。不包含文件和原始碼檔案。一般來說,普通開發者應該使用該選項下載。

下載成功,你將會得到一個bootstrap-4.1.3-dist.zip的檔案,解壓。

開始寫專案

1、為了頁面保證HTML在移動裝置上進行合適的繪製和觸屏縮放,需要在<head>元素中新增viewport元資料標籤。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

其中:

width=device-width 表示寬度是裝置螢幕的寬度。
initial-scale=1 表示初始的縮放比例。
shrink-to-fit=no 自動適應手機螢幕的寬度。

2、引入4個檔案, bootstrap.min.css(Bootstrap4 核心 CSS 檔案)、jquery.min.js(jQuery檔案,必須在bootstrap.min.js 之前引入)bootstrap.bundle.min.js、bootstrap.min.js(bootstrap的核心js檔案)。

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>文字排版1</title>
<link type="text/css" rel="stylesheet" href="../../../bootstrap-4.1.3-dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>

3、直接使用它提供的CSS樣式即可

參照未使用bootstrap4.1.3