<Bootstrap> 學習筆記六. 柵格系統使用案例

阿新 • • 發佈：2018-01-15

柵格 3.2 btn nta head ext ont ces str

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
    <script src="bootstrap/js/jquery-3.2.1.js" 
></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container-fluid">
    <!--加入柵格系統-->
    <!--行-->
    <div class="row">
        <!--列-->
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6" 
>
            <!--// 圓角邊框-->
            <div class="thumbnail">

                <!--圖片-->
                <img src="1.png">
                <div class="caption">
                    <!--標題-->
                    <h3 class="text-success">RayLee</h3>

                    <!-- 
內容-->
                    <p class="text-muted">RayLee</p>
                </div>
                <!--按鈕-->
                <button class="btn btn-success">去看看</button>
            </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <div class="thumbnail">
                <img src="1.png">
                <div class="caption">
                    <h3>RayLee</h3>
                    <p>RayLee</p>
                </div>
                <button class="btn btn-success">去看看</button>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <div class="thumbnail">
                <img src="1.png">
                <div class="caption">
                    <h3>RayLee</h3>
                    <p>RayLee</p>
                </div>
                <button class="btn btn-success">去看看</button>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <div class="thumbnail">
                <img src="1.png">
                <div class="caption">
                    <h3>RayLee</h3>
                    <p>RayLee</p>
                </div>
                <button class="btn btn-success">去看看</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

柵格 3.2 btn nta head ext ont ces str <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

<Bootstrap> 學習筆記二. 柵格系統的使用

boot pos nbsp title html thum row jquer bootstra <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

<Bootstrap> 學習筆記一. 配置環境, 簡單使用, 響應式表格, 響應式圖片

ref container oot png tle api lower bsp -c <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

<Bootstrap> 學習筆記三. 浮動的使用

white query script html span ack utf-8 blog type <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

<Bootstrap> 學習筆記八. 導航欄和頒

doc utf-8 them pre orm htm char styles lang <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

<Bootstrap> 學習筆記五. 按鈕組的使用

utf ima class 使用 gpo 3.2 post -m efault <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

nBodyCS<I>學習筆記之計算著色器

LearnOpenGL學習筆記(六):座標系統

LearnOpenGL學習筆記(六) 1.概述在OpenGL中，對我們來說比較重要的總共有5個不同的座標系統：區域性空間(Local Space，或者稱為物體空間(Object Space)) 世界空間(World Space) 觀察空間(View Sp

<<Python基礎教程>>學習筆記 | 第12章 | 圖形用戶界面

lena text 平臺 post ack 由於 contents exp 一個 Python支持的工具包非常多。但沒有一個被覺得標準的工具包。用戶選擇的自由度大些.本章主要介紹最成熟的跨平臺工具包wxPython.官方文檔: http://wxpython.org/

<C#入門經典>學習筆記1之初識C#

ack fad 浮點 2.0 十六進制 float 一個 sca 每一個序言選擇《 C#入門經典第五版》作為自學書籍，以此記錄學習過程中的筆記與心得。 C#簡單介紹 1. C#是一種塊結構的語言 2. C#區分大寫

Linux學習筆記(六)---Xshell通過公鑰連接CentOS系統

工具 fff bdc 長度遠程服務器遠程服務 size 服務器安全性前面我們通過ssh，使用服務器端用戶名和密碼遠程連接CentOS系統。這種方式還不夠安全，為了提高連接訪問的安全性，建議使用密鑰認證。具體的操作及配置如下：1.在Xshell中創建密鑰對(公鑰和私鑰

Bootstrap學習筆記(三) 網格系統

4-1實現原理　　網格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最後結合媒體查詢，就製作出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分成12份。 <div cla

Linux學習筆記(三)：系統執行級與執行級的切換

查看用戶操作回車 water hat ntsysv tde 文件表 config 1.Linux系統與其它的操作系統不同，它設有執行級別。該執行級指定操作系統所處的狀態。Linux系統在不論什麽時候都執行於某個執行級上，且在不同的執行級上執行的程序和服務都不同，所要

Python學習筆記六：文件處理

alt 筆記 lin 系統顯式當前位置 open 刷新大小一：打開文件 open(name,mode,[bufferSize]) name：文件路徑 mode：文件打開方式二：文件讀取 read()方法：可以一次讀取文件的全部內容，Python把內容讀到

Android第一行代碼學習筆記六---Intent向活動傳遞數據

一行而已 activity ase 是否 button can ride 重載 @1、向下一個活動傳遞數據： Intent提供了一系列putExtra（）方法的重載，可以把我們想要傳遞的數據暫存在Intent中，啟動了另一個活動後，只需把這些數據再從Intent中取出就可

Bootstrap Table學習筆記

pts mpat doc 官網 htm charset body ble meta 資料: 官網 2017.7.10 入門實例 <!DOCTYPE html> <html> <head> <meta cha

Linux學習筆記：Linux系統的進程調度(任務調度)

任務調度今天我們學習了Linux系統的進程調度，進程調度是為了在未來某個時間點，讓系統自動執行我們事先編寫好的命令或腳本的列表，從而使得即使用戶不在計算機旁邊也可以按時完成任務。這樣有利於我們更好的進行任務計劃以及在需要執行任務的時候自動完成我們設定好的命令，從而完成任務。當然為

HTML學習筆記 CSS背景樣式案例第六節（原創）參考使用表

ext jpg class 設置 link eight text spa .com <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

【安全牛學習筆記】windows系統域和工作組的區別

信息安全局域網 security+認證局域網（Local AreaNetwork, LAN），又稱內網，是指在某一區域內由多臺計算機互聯成的計算機組。局域網可以實現文件管理、應用軟件共享、打印機共享、掃描儀共享、工作組內的日程安排、電子郵件和傳真通信服務等功能。局域網嚴格意義上是封閉型

PowerShell 學習筆記——文件系統

powershell一個操作系統必須具備的元素就是：文件系統。在 Windows 中，使用資源管理器和 PowerShell 都可以管理文件系統，但它們是有區別的。一、文件系統的結構Windows中，文件系統由磁盤驅動器、文件夾和文件三種對象組成，磁盤是最上層對象，文件是最小對象，文件夾是容器。對於 Pow

<Bootstrap> 學習筆記六. 柵格系統使用案例

相關推薦