最近讀了資料來源1.實戰PHP7+MySQL:從0開始寫出自己想要寫的程式,才開始研究Bootstrap。
檔案下載,解壓密碼:demo1234
檔案名稱:bootstrap3.html
檔案內容:
檔案內容:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<title>Bootstrap3 基本頁面</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device,initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.min.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/jquery-migrate.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
bootstrap3 布局容器:
1.最大寬度 1170px
<div class="container">
</div>
2.全螢幕
<div class="container-fluid">
</div>
bootstrap3 格線系統
布局容器內有row ,row內再細分成12個 columns
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
bootstrap 將螢幕依解析度分成4種,如下:
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-sm-8 col-xs-7">
主內容
</div>
<div class="col-md-3 col-sm-4 col-xs-5">
側邊內容
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-8 col-xs-7">
主內容
</div>
<div class="col-md-3 col-sm-4 col-xs-5">
側邊內容
</div>
</div>
</div>
bootstrap 外觀
利用class 就可以直接套用,若class內有好幾個樣式,可用空白隔開即可。
<h1> Bootstrap 外觀</h1>
<div class="alert alert-danger">
警告
</div>
bootstrap 文字編排樣式
<div class="text-left text-lowercase">
Hello
</div>
<div class="text-right text-uppercase">
Hello
</div>
<div class="text-center text-capitalize">
Hello
</div>
text-left | 內容靠左對齊 |
text-right | 內容靠右對齊 |
text-center | 內容置中對齊 |
text-justify | 內容左右對齊 |
text-nowrap | 內容不自動換行 |
text-lowercase | 小寫文字 |
text-uppercase | 大寫文字 |
text-capitalize | 字首大寫 |
資料來源:
沒有留言:
張貼留言