2023年9月18日 星期一

Bootstrap3 常用的Html 及檔案

       最近讀了資料來源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 字首大寫
 
 
 
資料來源:


沒有留言:

張貼留言

軟體定義網路SDN-主題2-1 OpenFlow 概述

學習目標: 一.介紹OpenFlow特性 二.介紹OpenFlow Ports:實體port、邏輯port、保留port 一.介紹OpenFlow特性 1.OpenFlow 是 (1).控制器與交換器之間溝通的通訊協定 (2)使用了TCP (port 6653;舊版 port 6...