使用 Bootstrap 前端框架

Bootstrap 是什麼？

基於HTML，CSS，JS的簡潔靈活的流行前端框架及互動元件集
Bootstrap · 全球最流行的 HTML、CSS 和 JS 工具庫
為快速WEB開發提供了一套前端工具包，包括佈局、網格、表格、按鈕、表單、導航、提示等等
它的最新版本是 4.1，有不少網站還在用 3.x

為什麼要用 Bootstrap？

Twitter 出品，大廠開源產品 Github
基於 Less，豐富的 Mixin
Responsive 的柵格系統（Grid），移動裝置優先
豐富的元件（HTML和JS）

外掛（比如 icon font – Font Awesome）

怎麼使用

Getting Start (install/setup…)
網路教程、資源和社群
線上網站是用 CDN 版本
定製和 Less

預先配置 – HTML 模板

響應式 meta 標籤

Bootstrap 本著 移動裝置優先 的策略開發的，按照這一策略，我們優先為移動裝置優化程式碼，然後根據每個元件的情況並利用 CSS 媒體查詢（CSS media queries）技術為元件設定合適的樣式。

為了確保在所有裝置上能夠正確渲染並支援觸控縮放，務必將設定 viewport 屬性的 meta 標籤

新增到 <head> 中

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Width=device-width => 表示頁面寬度是裝置螢幕的寬度；確保網頁能被不同螢幕解析度的裝置正確呈現；
user-scalable=no => 是否可以調整縮放比例(yes/no)；
initial-scale=1.0 => 表示初始的縮放比例，以 1:1 的比例呈現，不會有任何的縮放；minimum-scale=0.5：最小允許的縮放比例；
maximum-scale=2.0：最大允許的縮放比例；

如果maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓您的網站看上去更像原生應用的感覺。
這樣設定後，圖片或元素也設定style=”width:100%”，那麼圖片看起來也是全屏的了。

示例程式碼 – 引入檔案

<!-- Bootstrap 核心 CSS 檔案 -->
<link rel="stylesheet" href="{{ static_url('css/bootstrap.css') }}">


<!-- jQuery檔案 -->
<script src="{{ static_url('js/jquery-3.3.1.slim.min.js') }}"></script>

<!-- Popper檔案 -->
<script src="{{ static_url('js/popper.min.js') }}"></script>

<!-- Bootstrap 核心 JavaScript 檔案 -->
<script src="{{ static_url('js/bootstrap.js') }}"></script>

示例程式碼 – 柵格佈局

https://code.z01.com/v4/layout/grid.html

<div class="container">
  <div class="row">
    <div class="col-sm">
      三分之一空間佔位
    </div>
    <div class="col-sm">
      三分之一空間佔位
    </div>
    <div class="col-sm">
      三分之一空間佔位
    </div>
  </div>
</div>

	超小螢幕 (新增規格)<576px	小螢幕次小屏≥576px	中等螢幕窄屏≥768px	大螢幕桌面顯示器≥992px	超大螢幕大桌面顯示器≥1200px
`.container` 最大寬度	None (auto)	540px	720px	960px	1140px
類字首	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
列數	12
列間隙	30px (每列兩側各15px)
可巢狀性	Yes
可巢狀性	Yes

等寬佈局

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>

display 顯示屬性

https://code.z01.com/v4/utilities/display.html

隱藏的元素

螢幕規格	引用樣式
所有螢幕下隱藏	`.d-none`
只在xs螢幕上隱藏（即僅在手機螢幕上隱藏-其它規格螢幕正常顯示-譯者注）	`.d-none .d-sm-block`
只在sm螢幕上隱藏（其它螢幕規格均顯示）	`.d-sm-none .d-md-block`
只在md螢幕時隱藏（其它螢幕規格均顯示）	`.d-md-none .d-lg-block`
只在lg螢幕時隱藏（其它螢幕規格均顯示）	`.d-lg-none .d-xl-block`
只在xl螢幕時隱藏（其它螢幕規格均顯示）	`.d-xl-none`
全部可見	`.d-block`
僅在xs螢幕時可見	`.d-block .d-sm-none`
僅在sm螢幕時可見	`.d-none .d-sm-block .d-md-none`
僅在md螢幕時可見	`.d-none .d-md-block .d-lg-none`
僅在lg螢幕時可見	`.d-none .d-lg-block .d-xl-none`
僅在xl螢幕時可見	`.d-none .d-xl-block`

響應式圖片

https://code.z01.com/v4/content/images.html

在Bootstrap中，給圖片新增.img-fluid樣式，或定義max-width: 100%、height:auto;樣式，即可賦得響應式特性，圖片大小會隨著父元素大小同步縮放。

<img src="..." class="img-fluid" alt="Responsive image">

% for post in post_list %}
    <a href="post/{{ post.id }}">
        <img src="{{ static_url(post.image_url) }}" class="img-fluid" width="666">
    </a>
{% end %}

base.html

<div class="container">
    {% block content %}
        base
    {% end %}
</div>

index.html


<div class="row">
    <div class="col col-md-8">

        {% for post in post_list %}
        <a href="post/{{ post.id }}">
            <img src="{{ static_url(post.image_url) }}" class="img-fluid" width="666">
        </a>
        {% end %}
    </div>
    <div class="d-none d-sm-none d-md-block col-md-4">
        4col
    </div>
</div>

水平居中對齊 justify-content-center

https://code.z01.com/v4/layout/grid.html

    <div class="row justify-content-center">
        <div class="col-sm-6">
            {% if error %}
                {{ error }}
            {% end %}
            <form action="/login?next={{ nextname }}" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    Username
                    <input autofocus="" class="form-control" id="id_username" maxlength="254" name="username" type="text"
                           required="">
                </div>

                <div class="form-group">
                    Password
                    <input class="form-control" id="id_password" name="password" type="password" required="">
                </div>

                <button class="">Login</button>

                <div>
                    還沒有賬號 需要<a href="/signup">註冊</a>一個
                </div>
            </form>
        </div>
</div>

導航欄

https://code.z01.com/v4/components/navbar.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Tudo 圖片</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">首頁<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">發現</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    使用者中心
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">個人資訊</a>
                  <a class="dropdown-item" href="#">收藏</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="/logout">登出</a>
            </li>
        </ul>
    <a class="btn btn-info" href="/upload">上傳</a>
    </div>
</nav>

Font Awesome

http://www.fontawesome.com.cn/faicons/

<a class="navbar-brand" href="#">
    <i class="fa fa-camera"></i>
    Tudo 圖片
</a>


<a class="btn btn-info" href="/upload">
    <i class="fa fa-upload"></i>
    上傳
</a>

案例

http://www.fontawesome.com.cn/examples/

作業

使用 bootstrap 美化站點

code

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ static_url('css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ static_url('font-awesome-4.7.0/css/font-awesome.css') }}">
    <title>{% block title %}base{% end %}</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <i class="fa fa-camera"></i>
            Tudo 圖片
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="/">首頁<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/explore">發現</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        使用者中心
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="#">個人資訊</a>
                      <a class="dropdown-item" href="#">收藏</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Something else here</a
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    6 使用 Bootstrap 前端框架
       
  
  
 使用 Bootstrap 前端框架 
 Bootstrap 是什麼？ 
  
  基於HTML，CSS，JS的簡潔靈活的流行前端框架及互動元件集 Bootstrap · 全球最流行的 HTML、CSS 和 JS 工具庫 
  為快速WEB開發提供了一套前端工具包，包括佈局、網格、表格、按鈕、 

  
 

    

    
    bootstrap前端框架使用總結分享
      水平滾動   all   auto   積極   component   默認   word   evel   符號   1、bootstrap 排版
全局樣式style.css：
1、移除body的margin聲明
2、設置body的背景色為白色
3、為排版設置了基本的字體、字號和行高
4、設置全局鏈接顏色 

  
 

    

    
    BootStrap前端框架
      practical   場景   環境搭建   jet   span   gpo   otc   header   gui   BootStrap前端框架
Bootstrap 教程：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
BpptStra 

  
 

    

    
    在HTML網頁中引入Bootstrap前端框架
      ble   需要   otto   nta   在線   cal   meta   target   initial          Bootstrap百度百科介紹：
      Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASC 

  
 

    

    
    JFinal框架學習------整合bootstrap前端框架，實現簡單的增刪改查功能
       
 
    Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。 
  
 一、JFinal整合bootstrap 
   1.下載bootstra 

  
 

    

    
    Bootstrap-前端框架
      
							
							
							Bootstrap 是全球最受歡迎的前端元件庫，用於開發響應式佈局、移動裝置優先的 WEB 專案。 
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用於 HTML、CSS 和 JS 開發的開源工具集。利用我們提供的 Sass 變數和大量 m 

  
 

    

    
    ssm專案學習2-引入bootstrap前端框架
       
 
 1.首先介紹一個前端框架： bootstrap  前端框架：是一個可以快速的開發一個前端頁面的框架。 
 bootstrap:簡單來說  它可以用來幹什麼：Bootstrap中包含了豐富的Web元件，根據這些元件，可以快速的搭建一個漂亮、功能完備的網站。 
 下載網址：http: 

  
 

    

    
    Bootstrap 前端框架 遇到的問題 解決方案
      bootstrap實現導航欄的響應式佈局，當在小螢幕、手機螢幕瀏覽時自動摺疊隱藏 
直接放程式碼，更容易理解。下次可以套這個程式碼 
 
 <!DOCTYPE html>  
<html>  
<head>  
    <title>bootstrap實現導航欄 

  
 

    

    
    【0030】bootstrap前端框架使用教程
      
								
								            
						
                
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <tit 

  
 

    

    
    給django增加bootstrap前端框架
      

於是找到兩個專門對付前端的模組

1.django-bootstrap-toolkit


用法主要參考裡面的demo,基本如下:

1)  settings.py

12345INSTALLED_APPS=(..'bootstrap_toolkit',..)2)在模版中需要新增下面 

  
 

    

    
    響應式前端框架Bootstrap系列（6）下拉列選單
      
                
下拉列選單，是以列表格式顯示連結的上下文選單。下拉列選單選擇後，是開啟超連結的新頁面，此處要清楚與上篇中選擇框的區別。下拉列選單可以單獨使用，但更多的配合導航欄使用。下面是下拉列選單用到的幾種樣式：
.dropdown：指定下拉選單整體樣式，下拉選單都包裹在 .dropdo 

  
 

    

    
    前端框架之bootstrap
      對齊   esp   fix   容器   控件   word   適用於   lin   true   一、bootstrap按鈕 
1、按鈕

<button class="btn btn-default">按鈕</button><button class="btn btn- 

  
 

    

    
    前端框架Bootstrap簡單介紹
      我們   css   bootstrap   img   alt   現實   效果   blog   image   


 
 
下載：

解壓之後：

把這些文件拷貝到項目中

頁面使用時  只需要引入：

 
然後我們就可以參考官網來設計需要的前端頁面了  
設計一個按鈕 

  
 

    

    
    最常用前端框架BootStrap——柵格系統
      常用   框架   pic   前端框架   bootstra   柵格   album   .cn   ots   http://pic.cnhubei.com/space.php?uid=4614&do=album&id=1340548http://pic.cnhubei.com/spac 

  
 

    

    
    在Bootstrap開發框架的前端視圖中使用@RenderPage實現頁面內容模塊化的隔離，減少復雜度
      技術分享   url   邏輯   asp.net   發的   說明   一個   處理流   分隔   在很多開發的場景中，很多情況下我們需要考慮抽象、以及模塊化等方面的內容，其目的就是為了使得開發的時候關註的變化內容更加少一些，整體開發更加簡單化，從而減少開發的復雜度，在Winform開發的時候，往往可 

  
 

    

    
    2018.9.6 關於對前端框架Vue.js的理解
       
 
 晚上19.35又是一個安靜的夜晚，趁著安靜，趕緊過來csdn總結一下今天學到vue的知識。 
 首先了解一個新的東西，必須瞭解它是什麼，能幹什麼。這是我比較深刻的體會。 
 什麼是Vue.js： 
  *** vue.js:是目前最火的框架（關注的人是最多的），而react是目前最流行的框 

  
 

    

    
    【轉】常用前端框架（類似Bootstrap）
       
 
 轉自部落格園：http://www.cnblogs.com/Renyi-Fan/p/9287632.html 
   
 目錄 
   
 
  一、總結 
   
    一句話總結：框架大同小異，可以多去各自官網看看效果（比較一下各自的不同點（也就是提供的不同的功能）），然後 

  
 

    

    
    在Bootstrap開發框架的前端檢視中使用@RenderPage實現頁面內容模組化的隔離，減少複雜度
      在很多開發的場景中，很多情況下我們需要考慮抽象、以及模組化等方面的內容，其目的就是為了使得開發的時候關注的變化內容更加少一些，整體開發更加簡單化，從而減少開發的複雜度，在Winform開發的時候，往往可以通過定義基類模組、使用者控制元件的方式實現這個目的，而在Web開發的時候，我們是否也可以利用這些特性呢？特 

  
 

    

    
    關於前端框架Bootstrap的一些筆記
      
							
							
							Bootstrap筆記
前言：bootstrap的核心：

1.媒體，即需要對雖然柵格系統是響應的，但是有些文字之類的不是響應的，所以需要進行單獨適配
@media screen and (max-width: 785px) {
body {
backgroun 

  
 

    

    
    Angular、React、Vue.js 等 6 大主流前端框架都有什麼優缺點？
      Ember.js可能是最固執己見的主流框架，這也是它最大的弱點。雖然社群是開放的並且接受投資，但是仍然需要找到一個正確的方式來擺脫下滑的趨勢，這可能是具有挑戰性的問題。擁有一個豐富的第三方社群也可能具有挑戰性。由於沒有開箱即用的UX元件，這很可能會讓你使用第三方套件。你可能會發現，雖然這些套件並不全面，你將需

6 使用 Bootstrap 前端框架

使用 Bootstrap 前端框架

Bootstrap 是什麼？

為什麼要用 Bootstrap？

怎麼使用

預先配置 – HTML 模板

響應式 meta 標籤

示例程式碼 – 引入檔案

示例程式碼 – 柵格佈局

等寬佈局

display 顯示屬性

隱藏的元素

響應式圖片

水平居中對齊 justify-content-center

導航欄

Font Awesome

相關資源

作業

code

base.html

6 使用 Bootstrap 前端框架

bootstrap前端框架使用總結分享

BootStrap前端框架

在HTML網頁中引入Bootstrap前端框架

JFinal框架學習------整合bootstrap前端框架，實現簡單的增刪改查功能

Bootstrap-前端框架

ssm專案學習2-引入bootstrap前端框架

Bootstrap 前端框架遇到的問題解決方案

【0030】bootstrap前端框架使用教程

給django增加bootstrap前端框架

響應式前端框架Bootstrap系列（6）下拉列選單

前端框架之bootstrap

前端框架Bootstrap簡單介紹

最常用前端框架BootStrap——柵格系統

在Bootstrap開發框架的前端視圖中使用@RenderPage實現頁面內容模塊化的隔離，減少復雜度

2018.9.6 關於對前端框架Vue.js的理解

【轉】常用前端框架（類似Bootstrap）

在Bootstrap開發框架的前端檢視中使用@RenderPage實現頁面內容模組化的隔離，減少複雜度

關於前端框架Bootstrap的一些筆記

Angular、React、Vue.js 等 6 大主流前端框架都有什麼優缺點？