วิธีสร้าง GridBoostrap ให้ได้ 5 Block

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 19471
Joined: 31/03/2014 10:02 am
Contact:

วิธีสร้าง GridBoostrap ให้ได้ 5 Block

Post by thatsawan » 09/06/2016 11:23 am

Code: Select all

  <!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <style>
            .col-xs-15,
            .col-sm-15,
            .col-md-15,
            .col-lg-15 {
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }

            .col-xs-15 {
                width: 20%;
                float: left;
            }
            @media (min-width: 768px) {
                .col-sm-15 {
                    width: 20%;
                    float: left;
                }
            }
            @media (min-width: 992px) {
                .col-md-15 {
                    width: 20%;
                    float: left;
                }
            }
            @media (min-width: 1200px) {
                .col-lg-15 {
                    width: 20%;
                    float: left;
                }
            }
        </style>
    </head>
    <body>




        <div class="row">
            <center>
                <div class="col-md-8">
                    <div class="col-md-15 col-sm-3">
                        <img src="http://i.giphy.com/3o7qE3qDPZNItaeLG8.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
                    </div>
                    <div class="col-md-15 col-sm-3">
                        <img src="http://i.giphy.com/3o7qE3qDPZNItaeLG8.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
                    </div>
                    <div class="col-md-15 col-sm-3">
                        <img src="http://i.giphy.com/3o7qE3qDPZNItaeLG8.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
                    </div>
                    <div class="col-md-15 col-sm-3">
                        <img src="http://i.giphy.com/3o7qE3qDPZNItaeLG8.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
                    </div>
                    <div class="col-md-15 col-sm-3">
                        <img src="http://i.giphy.com/3o7qE3qDPZNItaeLG8.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="col-md-6">
                        <img src="http://i.giphy.com/3o7qE3qDPZNItaeLG8.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
                    </div>
                    <div class="col-md-6">
                        <img src="http://i.giphy.com/3o7qE3qDPZNItaeLG8.gif" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
                    </div>
                </div>

            </center>

        </div>
    </body>
</html>
 
2016-06-09_11-13-00.png
2016-06-09_11-13-00.png (240.34 KiB) Viewed 368 times

ตอนที่จะสร้างให้ได้ 5 Block เราจะต้องสร้างขึ้นเองค่ะ เเล้วระบุขนาดตามขนาดของหน้าจอเอง จากตัวอย่าง สังเกตุที่ width: 20%; Block จะมีขนาด 20 เมื่อ มี 5 Block จะได้ลงตัวพอดี

Code: Select all

    .col-xs-15,
            .col-sm-15,
            .col-md-15,
            .col-lg-15 {
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }

            .col-xs-15 {
                width: 20%;
                float: left;
            }
            @media (min-width: 768px) {
                .col-sm-15 {
                    width: 20%;
                    float: left;
                }
            }
            @media (min-width: 992px) {
                .col-md-15 {
                    width: 20%;
                    float: left;
                }
            }
            @media (min-width: 1200px) {
                .col-lg-15 {
                    width: 20%;
                    float: left;
                }
            }

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 17 guests