一、網址
二、前提
<!--HTML5頭部規範 doctype聲明,否則有可能失真-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<!-- 爲了確保所有設備的觸摸和渲染效果,需要添加響應式視圖標籤-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 樣式-->
<link rel="stylesheet" href="../css/bootstrap.css">
<title>初體驗</title>
<!-- 還原盒模型(如果需要的話),bootstrap默認是自己改過的,確保padding不會影響元素的最後計算寬度-->
<style>
.selector-for-some-widget{
box-sizing: content-box;
}
</style>
</head>
<body>
<h1>第一次</h1>
<!-- jQuery-->
<script src="../js/jquery-3.4.1.min.js"></script>
<!-- 彈窗等-->
<script src="../js/popper.min.js"></script>
<!-- bootstrap-->
<script src="../js/bootstrap.js"></script>
</body>
</html>
三、容器
- Container容器是窗口布局的最基本元素，Bootstrap推薦所有樣式都定義在 .container 或 .container-fluid 容器中
- 這是啓用整個柵格系統必不可少的前置條件，它們分別對應選擇一個響應式的、固定寬度的容器，或者選擇一個流式自適應瀏覽器或容器最大合法寬度的窗口
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../css/bootstrap.css">
<title>Title</title>
<!-- 使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。-->
<style>
/*超小屏幕*/
@media (max-width: 575px) {
.container-self{
background-color: green;
width: 100%;
}
}
/*小屏幕*/
@media (min-width: 576px) and (max-width: 767px) {
.container-self{
background-color: black;
width: 540px;
}
}
/* 中等屏幕*/
@media (min-width: 768px) and (max-width: 991px) {
.container-self{
background-color: red;
width: 720px;
}
}
/* 大屏幕*/
@media (min-width: 992px) and (max-width: 1199px) {
.container-self{
background-color: purple;
width: 960px;
}
}
/* 超大屏幕*/
@media (min-width: 1200px) {
.container-self{
background-color: goldenrod;
width: 1140px;
}
}
</style>
</head>
<body>
<!--參考:http://code.z01.com/v4/layout/overview.html Container容器-->
<!--居中流式容器,也就是百分比,會做一些響應式的佈局,適配不同的斷的 max-width 尺寸-->
<!--container響應式佈局按照5種大小區分-->
<div class="container" style="background-color: red;height: 100px">流式容器</div>
<!--全屏，適配屏幕的 width: 100% 尺寸。-->
<div class="container-fluid" style="background-color:green;height: 100px;margin-top: 100px;margin-bottom: 100px">固定寬度的容器</div>
<!--自定義container的流式佈局-->
<div class="container-self" style="height: 100px;margin: 0 auto;">自定義容器</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>
四、柵格系統(在容器 container 中處理 行 與 列 的關係)
- Bootstrap包含了一個強大的移動優先的網格系統，它是基於一個12列的佈局，有5種響應尺寸(對應不同屏幕)
- 支持Sass mixins自由調用，並結合自己預定義的css js 類，用來創建各種形態和尺寸的佈局
- 原理
- 柵格系統提供了集中內容居中、水平填充網頁內容的方法，使用 .container 作爲父盒子
- 內部由 行 (.row) 和 列 (.col) 組成
- 每列都有水平的padding值，行則用於控制它們之間的間隔
- 同時在負邊距的行上抵消，從而實現列中的所有內容在視覺上是左側對齊的體驗
- 網頁開發者的呈現內容必須放置在列(.col-*)中，而且只有列可以是行的直接子元素，否則都是違法的(不規範)，不可以在 .col-*以上添加呈現內容
- .col-*後面有不同數字，如 .col-sm-4 或 .col-xl-12，這些css類後面的數字用於表明定義div空間想要佔用列的數量，每行最多有12列。如果想用三個等寬的列，則卻12分之一，即 .col-sm-4
- .col-*的width屬性(即列寬)是用百分比來表現和定義的，所以他們總是流式的，其尺寸大小受父元素的定義影響
- 總共有五個柵格等級，每個響應分界點隔出一個等級：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大(大、特大也可以稱爲寬、超寬).col-xl-*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../css/bootstrap.css">
<title>柵格佈局</title>
<style>
.container>.row{
height: 200px;
background-color: pink;
}
.container>div>div:nth-child(1){
background-color: red;
}
.container>div>div:nth-child(2){
background-color: green;
}
.container>div>div:nth-child(3){
background-color: blue;
}
.container>div>div:nth-child(4){
background-color: purple;
}
</style>
</head>
<body>
<!--頁面最外面是 container ,裏面是 行 ,行 裏面是列;
一行最多12列,如果超出就會自動換行.-->
<!-- col等價於col-4,因爲最大爲12列,他會自動除以3. -->
<!-- 另外只要設置了特小的柵格等級 .col 其餘的中等\大\超大等都會以此爲標準,除非單獨修改-->
<!-- <div class="container">-->
<!-- <div class="row">-->
<!-- <div class="col">第一部分</div>-->
<!-- <div class="col">第二部分</div>-->
<!-- <div class="col">第三部分</div>-->
<!-- </div>-->
<!-- </div>-->
<!--當標準設置爲col-sm(小屏幕時),超小屏幕就會變成100%,其餘大\超大屏幕等還是以小屏幕爲標準-->
<!-- <div class="container">-->
<!-- <div class="row">-->
<!-- <div class="col-sm">第一部分</div>-->
<!-- <div class="col-sm">第二部分</div>-->
<!-- <div class="col-sm">第三部分</div>-->
<!-- </div>-->
<!-- </div>-->
<!--設置了2中標準,當中屏幕時是3\6\3,當大屏幕時是5\5\2-->
<!-- <div class="container">-->
<!-- <div class="row">-->
<!-- <div class="col-md-3 col-lg-5">第一部分</div>-->
<!-- <div class="col-md-6 col-lg-5">第二部分</div>-->
<!-- <div class="col-md-3 col-lg-2">第三部分</div>-->
<!-- </div>-->
<!-- </div>-->
<!--水平對齊方式 align-items-center(全局居中,end底部.start頂部);align-items-md-center(中屏幕時居中)-->
<div class="container">
<div class="row align-items-center">
<div class="col-md-3">第一部分</div>
<div class="col-md-3">第二部分</div>
<div class="col-md-3">第三部分</div>
<div class="col-md-3">第四部分</div>
</div>
</div>
<br>
<br>
<br>
<!--垂直對齊方式 justify-content-center(全局居中,end底部,between兩邊,around間距)-->
<!--no-gutters去除間隙溝槽-->
<div class="container">
<div class="row align-items-center justify-content-around no-gutters">
<div class="col-md-3">第一部分</div>
<div class="col-md-3">第二部分</div>
</div>
</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>