1. Bootstrap 快速入門

概念:

前端開發的框架Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。 Bootstrap 是基于 HTML、CSS、JavaScript 的,它簡潔靈活,使得 Web 開發更加快捷。

所謂的框架:,是一個半成品軟件,開發人員可以在框架基礎上,在進行開發,簡化編碼。

好處:

  1. 定義了很多的css樣式和js插件。我們開發人員直接可以使用這些樣式和插件得到豐富的頁面效果。
  2. 響應式布局。(同一套頁面可以兼容不同分辨率的設備。)

網址:https://v3.bootcss.com/

拖動式bootstrap網址:https://www.bootcss.com/p/layoutit/#

快速入門

  1. 下載Bootstrap
  2. 在項目中將這三個文件夾復制
  3. 創建html頁面,引入必要的資源文件

注意:
框架中帶min(體積小,利于傳輸)
不帶min(利于閱讀,格式良好)

image.png

從官網位置該位置中提取基本框架頁面模板

<!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 HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好,世界!</h1>

</body>
</html>
image.png

Bootstrap 響應式布局

同一套頁面可以兼容不同分辨率的設備。
實現:依賴于柵格系統:將一行平均分成12個格子,可以指定元素占幾個格子
步驟:

  1. 定義容器。相當于之前的table、
    容器分類:
    1. container:兩邊留白
    2. container-fluid:每一種設備都是100%寬度
  2. 定義行。相當于之前的tr 樣式:row
  3. 定義元素。指定該元素在不同的設備上,所占的格子數目。樣式:col-設備代號-格子數目
    設備代號:
    1. xs:超小屏幕 手機 (<768px):col-xs-12
    2. sm:小屏幕 平板 (≥768px)
    3. md:中等屏幕 桌面顯示器 (≥992px)
    4. lg:大屏幕 大桌面顯示器 (≥1200px)


    image.png
<!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 HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .inner{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <!--1.定義容器-->
    <div class="container">
        <!--2.定義行-->
        <div class="row">
            <!--3.定義元素
                在大顯示器一行12個格子
                在pad上一行6個格子
            -->
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
            <div class="col-lg-1 inner">柵格</div>
        </div>
    </div>
</body>
</html>
image.png
image.png

注意:

  1. 一行中如果格子數目超過12,則超出部分自動換行。
                在pad上一行6個格子
            -->
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
            <div class="col-lg-1 col-sm-2 inner">柵格</div>
image.png
  1. 柵格類屬性可以向上兼容。柵格類適用于與屏幕寬度大于或等于分界點大小的設備。
            <div class="col-xs-4 inner">柵格</div>
            <div class="col-xs-4 inner">柵格</div>
            <div class="col-xs-4 inner">柵格</div>
image.png

image.png
  1. 如果真實設備寬度小于了設置柵格類屬性的設備代碼的最小值,會一個元素沾滿一整行。
            <div class="col-md-4 inner">柵格</div>
            <div class="col-md-4 inner">柵格</div>
            <div class="col-md-4 inner">柵格</div>
image.png
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • &胡佳 常州新日催化劑有限公司 【六項精進打卡第77天】 【知~學習】 《六項精進》1遍 共89遍 《大學》1遍 ...
    807C2閱讀 242評論 0 0
  • “幸運的人成了喇嘛,我的命運多舛,去了遠方。”——《岡仁波齊》 早上起床游離了好一會兒,放松的周末開始放空...
    馬小姐隨筆閱讀 973評論 0 3
  • 呵!高大的氣象塔出現在了我眼前!小朋友們,你們一定想知道氣象塔里有什么吧?那我可有長篇大論等著你喲。 ...
    看云海_7c5b閱讀 1,447評論 0 0
  • 在信息通訊越來越發達的今天,因為郵件的正式性,我們工作中仍然需要用郵件來進行溝通,是否能寫好郵件就成為了工作中必然...
    IT極客閱讀 604評論 0 0