สรุปการใช้งาน Bootstrap 4 แบบพื้นฐาน ตอนที่ 2

พฤศจิกายน 11, 2018 benznest

Off

web

Post Views: 15,501

มาต่อกันในตอนที่ 2 ครับ จะเป็นเรื่องเกี่ยวกับ component ที่ใช้บ่อยๆของ Bootstrap ครับ

ตอนก่อนหน้านี้

สรุปการใช้งาน Bootstrap 4 แบบพื้นฐาน ตอนที่ 1

Table

สร้างไฟล์ใหม่ชื่อ portal.html
ใส่โค้ดพื้นฐาน html ลงไปแล้วก็เพิ่ม bootstrap.css ด้วย

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Portal</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">          
            </div>
        </div>
    </div>
</body>

</html>

ใส่ตารางลงไปใน container

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Portal</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Portal</h1>
                <table>
                    <thead>
                        <tr>
                            <th>No...</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Age</th>
                            <th>Address</th>
                            <th>Department</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Benz</td>
                            <td>Normal</td>
                            <td>35</td>
                            <td>Bangkok 10000</td>
                            <td>IT</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Namnueng</td>
                            <td>NA</td>
                            <td>35</td>
                            <td>Bangkok 10000</td>
                            <td>IT</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Pare</td>
                            <td>NA</td>
                            <td>35</td>
                            <td>Bangkok 10000</td>
                            <td>IT</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>

จะได้แบบนี้

Bootstrap มี class ชื่อว่า table ทำให้ตารางสวยขึ้น

 <table class="table">

ปรับแต่งหัวตารางโดยใช้ utility class คือ bg- และ text-

<table class="table">
       <thead>
              <tr class="bg-primary text-white">
              ...

ทำให้ตารางสลับสี ใช้ table-striped เพิ่มเข้าไป

<table class="table table-striped">

ทำให้ตารางเลื่อสีไปตาม cursor ใช้ table-hover เพิ่มเข้าไป

<table class="table table-hover">

ใส่ขอบให้ตารางใช้ table-bordered

<table class="table table-hover table-bordered">

ลองย่อหน้าต่างให้เล็กเป็นมุมมองมือถือ จะพบว่าตารางไม่รองรับ responsive

วิธีการแก้ก็คือเอาตารางไปใส่ใน div class table-responsive

                <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                        ...
                    </table>
                </div>

มันจะสามารถเลื่อน ซ้ายขวาได้

ใน VS Code ตรงไหนโค้ดยาวก็ย่อโค้ดได้นะ

Source code

https://gist.github.com/benznest/d7b07ec41ffef49429ec4c95112c1dcb

Form

สร้างไฟล์ใหม่ login.html จะลองทำหน้า login กัน อย่าลืมเพิ่ม boostrap.css เข้ามาด้วย

ฟอร์มล้อคอินที่จะทำ หน้าตาประมาณนี้

ลองใส่ฟอร์มล็อกอิน แบบง่ายๆ

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Portal</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <div class="row">
                <div class="col">
                    <form action="#">
                        <label for="usernmae">Username: </label>
                        <input type="text" id="username" name="username">

                        
                        <label for="pwd">Password: </label>
                        <input type="password" id="pwd" name="pwd">

                        <button type="submit">Sign in</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

ให้ใช้ class form-group จัดการแถวของฟอร์ม

                <form action="#">
                    <div class="form-group">
                        <label for="usernmae">Username: </label>
                        <input type="text" id="username" name="username">
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password: </label>
                        <input type="password" id="pwd" name="pwd">
                    </div>
                    <button type="submit">Login</button>
                </form>

ใช้ class form-control ให้กับ input เพื่อให้มันรองรับ responsive และความสวยงาม

<input class="form-control" type="text" id="username" name="username">

ส่วนปุ่มใช้ class ชื่อว่า btn และอยากได้ส้มๆก็ใส่ btn-warning

<button class="btn btn-warning text-white" type="submit">Login</button>

ถ้าต้องการให้ปุ่มแสดงตามขนาดจอ ก็ใช้ btn-block

<button class="btn btn-block btn-warning text-white" type="submit">Login</button>

ถ้าต้องการให้แสดงแบบแถวเดียวใช้ form-inline

<form action="#" class="form-inline">

ฟอร์มมันชิดไป ไม่สวยก็สามารถใช้ class margin มาร่วมได้

<form action="#" class="form-inline mt-3">
                    <div class="form-group">
                        <label class="mr-2" for="usernmae">Username: </label>
                        <input class="form-control mr-3" type="text" id="username" name="username">
                    </div>
                    <div class="form-group">
                        <label class="mr-2" for="pwd">Password: </label>
                        <input class="form-control mr-3" type="password" id="pwd" name="pwd">
                    </div>
                    <button class="btn btn-warning text-white" type="submit">Login</button>
                </form>

Source code

https://gist.github.com/benznest/1d77e1a799253e5546b8d4c836cd2f1c

Card

อีกอันที่ใช้บ่อยๆ คือ card มันคือการทำเนื้อหาเป็นบล็อกๆ

สร้างไฟล์ใหม่ชื่อว่า news.html ทำ grid ไว้ 2 คอลัมภ์

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>News</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <!-- Col 1 -->
            </div>
            <div class="col">
                <!-- Col 2 -->
            </div>
        </div>
    </div>
</body>

</html>

Card โครงสร้างจะเป็นประมาณนี้

    <div class="container">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h4>Hot news</h4>
                    </div>
                    <div class="card-body">
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem minus accusantium rerum suscipit, commodi sapiente, saepe doloremque beatae quod architecto voluptatibus. Nobis ratione excepturi omnis incidunt laboriosam quidem quae quibusdam!</p>
                    </div>
                    <div class="card-footer">
                        By Benznest
                    </div>
                </div>
            </div>
            <div class="col">
                <!-- Col 2 -->
            </div>
        </div>
    </div>

สามารถจัดแต่งโดยใช้ utilities class ได้ตามปกติ เช่น bg และ text

<div class="card-header bg-danger text-white">

สามารถนำรูปมาเป็น Header ได้ โดยใช้ class ชือว่า card-img-top

<div class="row">
            <div class="col">
                ...
            </div>
            <div class="col">
                <div class="card">
                    <img class="card-img-top" src="img/staffs/staff4.jpg" >
                    <div class="card-body">
                        <h4 class="card-title">Our Staff</h4>
                        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores excepturi modi voluptate animi repellat? Animi accusantium numquam iste non voluptatem ipsum totam, odio sequi. Fuga amet qui vitae atque. Illo.</p>
                    </div>
                </div>
            </div>
        </div>

เพิ่มปุ่มใน card ให้ดูสวยงาม

<a href="#" class="btn btn-primary">Read more</a>

ซึ่งถ้าจะทำสวยๆ ก็ต้องมีรูป และเนื้อหาที่เหมาะสมกัน

สามารถนำรูปมาวางด้านล่างแทนได้ โดยใช้ class ชื่อว่า card-img-bottom

<div class="card-body">
   ...
</div>
<img class="card-img-bottom" src="img/staffs/staff4.jpg">

Source code

https://gist.github.com/benznest/bb45d6f0affd79d462a837055408f3c8

การใช้ Media

การนำคลิป youtube embed มาใช้ใน bootstrap
ไปที่ youtube คลิกขวาที่คลิป > Copy embed code

มันจะเป็น iframe ถ้ามี width height ให้ลบออก เพราะ เราจะทำให้ responsive

<iframe src="https://www.youtube.com/embed/5nLWk7kzXgI?ecver=1" 
frameborder="0" allow="accelerometer; autoplay; encrypted-media; 
gyroscope; picture-in-picture" allowfullscreen></iframe>

เพิ่ม <div> ครอบตัว video โดยเพิ่ม class ชื่อว่า embed-responsive embed-responsive-4by3
4by3 คือขนาด 4:3 สามารถใช้ตัวอื่นได้เช่น 16by9, 21by9, 1by1
และที่ iframe เพิ่ม class ชื่อว่า embed-responsive-item

โดยจะลองเพิ่มแถวเข้าไปต่อจากเดิม

        <div class="row mt-5">
            <div class="col">
                <h3>Video gallery</h3>
                <div class="embed-responsive embed-responsive-4by3">
                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/5nLWk7kzXgI?ecver=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        </div>

ลองเพิ่มคอมลัมภ์อีกอันเพื่อทำ photo gallery ด้านขวาของ video
ซึ่งสามารถใช้ class ชื่อว่า media การทำงานของมันจะเรียงไปแนวนอน

   <div class="row mt-5">
            <div class="col-md-6">
                ...
            </div>
            <div class="col-md-6">
                <h3>Photo gallery</h3>
                <div class="media">
                    <img class="w-50" src="img/content/office10.jpg">
                    <div class="media-body pl-3">
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquam nisi officiis aut
                            beatae. Voluptas, aliquid! Nostrum quam architecto </p>
                    </div>
                </div>
            </div>
        </div>

การจะเพิ่มแถวของเนื้อหาที่ใช้ class media สามารถใช้ <ul class=”list-unstyled”> และ <li> เข้ามาได้

            <div class="col-md-6">
                <h3>Photo gallery</h3>
                <ul class="list-unstyled">
                    <li>
                        <div class="media">
                            <img class="w-50" src="img/content/office1.jpg">
                            <div class="media-body pl-3">
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquam nisi
                                    officiis aut
                                    beatae. Voluptas, aliquid! Nostrum quam architecto </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <img class="w-50" src="img/content/office3.jpg">
                            <div class="media-body pl-3">
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquam nisi
                                    officiis aut
                                    beatae. Voluptas, aliquid! Nostrum quam architecto </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <img class="w-50" src="img/content/office2.jpg">
                            <div class="media-body pl-3">
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquam nisi
                                    officiis aut
                                    beatae. Voluptas, aliquid! Nostrum quam architecto </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

Source code

https://gist.github.com/benznest/17e5753cff346c5ed5ba8f4689377801

Navigation

เพิ่ม row ไปที่บนสุดของ container ข้างในใช้ list คือ <ul><li> … </li></ul>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <ul><li><a href="#">Home</a></li></ul>
            </div>
        </div>
        ...

ใน bootstrap จะใช้
class ชื่อ nav ใน <ul>
class ชื่อ nav-item ใน <li>
class ชื่อ nav-link ใน <a> ที่เป็นป้ายลิงค์

<div class="row pt-3 pb-3">
            <div class="col">
                <ul class="nav">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Service</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>

เพิ่ม ให้เมนูนึงถูกเลือกใช้ class ชื่อว่า active

<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>

เพิ่ม class nav-pills ให้กับ <ul>

<ul class="nav nav-pills">

หรือจะใช้ class nav-tabs

<ul class="nav nav-tabs">

รายละเอียด

https://getbootstrap.com/docs/4.1/components/navs/

การใช้ Javascript ของ Bootstrap

Bootstrap ต้องใช้ library เพิ่มคือ jquery กับ popper ถึงจะใช้งานได้เต็มประสิทธิภาพ ซึ่ง bootstrap ไม่มีติดมาให้ เพราะ ติด license จำเป็นต้องไปดาวน์ดหลดมาจากต้นทางผู้พัฒนา
ให้ดาวน์โหลด jquery js กับ popper js มาติดตั้งไว้ในโปรเจค ในโฟลดเดอร์ js

เพิ่ม jquery , popper , bootstrap ไปที่ท้าย body โดยใช้คำสั่ง <script></script>
โดยให้ jquery และ popper อยู่ด้านบนของ bootstrap.js เพราะการอ่านโค้ดจะอ่านจากบนลงล่าง วึ่ง bootstrap เรียกใช้งาน jquery
จึงจำเป็นต้องอ่าน jquery มาก่อนนั่นเอง

    ...
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper_1_14_3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>

ถ้าใส่ผิด สามารถ Inspect ดูที่เมนู console

การทำ dropdown

เพิ่ม dropdown ให้เมนู ได้ โดยใช้ dropdown-menu

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Service</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">App</a>
                            <a class="dropdown-item" href="#">Website</a>
                            <a class="dropdown-item" href="#">Desktop</a>
                            <a class="dropdown-item" href="#">IoT</a>
                        </div>
                    </li>

ปัญหาที่ตามมาคือ เมนูแบบนี้ไม่รองรับ responsive ดังนั้นต้องไปใช้ Navbar แบบใหม่

ติตดั้ง extension

ติดตั้ง Bootstrap v4 Snippets

Navbar responsive

พิมพ์ b-navbar มันจะ generate โค้ดมาให้

ซึ่งเยอะมาก เรามีหน้าที่แก้เนื้อหาก็พอ นี่คือการใช้เครื่องมือให้เป็นประโยชน์

    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <a class="navbar-brand">Benznest's blog</a>
        <button class="navbar-toggler" data-target="#my-nav" data-toggle="collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="my-nav" class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Service</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">App</a>
                            <a class="dropdown-item" href="#">Website</a>
                            <a class="dropdown-item" href="#">Desktop</a>
                            <a class="dropdown-item" href="#">IoT</a>
                            <a class="dropdown-item" href="#">Android</a>
                            <a class="dropdown-item" href="#">iOS</a>
                            <a class="dropdown-item" href="#">Windows</a>
                            <a class="dropdown-item" href="#">Linux</a>
                        </div>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

Navbar อันใหม่จะรองรับ responsive

ปรับสีของ Navbar โดยใช้ class uitility

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <a class="navbar-brand text-white">Benznest's blog</a>

และเนื่องจาก Navbar มันใช้ Fix-top มันจะทำให้กินเนื้อด้านบน ก็ให้เนื้อหาของเราเว้นว่างด้านบนนิดนึง โดยใช้ pt-5 ก็คือ padding top 5 rem

    ...
    </nav>
    <div class="container pt-5">
    ...

แนะนำ Bootswatch

bootswatch เป็นเว็บที่รวมแหล่งธีม css ของ bootstrap มาไว้ในที่เดียว เราสามารถดาวน์โหลดธีมที่ชอบมาใช้ได้ ซึ่งมันคือ css ของ bootstrap ดังนั้นสามารถนำมาใช้กับ bootstrap ได้เลย

https://bootswatch.com/

กดดาวน์โหลดธีมที่ชอบ แล้วจะได้ไฟล์ .css

เอาไฟล์ .css ไปไว้ในโฟลเดอร์ css แนะนำเปลี่ยนชื่อเป็นชื่อธีม ไม่ควรใช้ชื่อ bootstrap ทับอันเดิม

ใน html ให้เปลี่ยนการใช้ bootstrap.min.css มาใช้ธีมอันใหม่

    <link rel="stylesheet" href="css/minty.min.css" />

Refresh หน้าเว็บ

การใช้ Carousel

carousel คือ ตัวสไลด์รูปภาพ
ใช้โค้ดลัด พิมพ์ว่า b-carousel เลือก carousel-full

จากนั้นก็ปรับแต่ง carousel จะมีสามส่วน คือ
indicator ที่เป็นจุด ว่ารูปภาพเราคือรูปไหน
Slide คือรูปภาพ
Button คือปุ่มซ้าย ขวา

active คืออันที่ถูกเลือกอยู่

    <div class="container-fluid mt-5 p-0">
        <div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="500">
            <ol class="carousel-indicators" >
                <li class="active" data-target="#my-carousel" data-slide-to="0"></li>
                <li class=""       data-target="#my-carousel" data-slide-to="1"></li>
                <li class=""       data-target="#my-carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="img/banner/banner3.jpg">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Hello , world</h5>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam aliquid doloremque, </p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="img/banner/banner4.jpg">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Hello , world</h5>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam aliquid doloremque, </p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="img/banner/banner5.jpg">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Hello , world</h5>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam aliquid doloremque, </p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#my-carousel" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#my-carousel" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>

การปรับเวลาในการเลื่อนอัตโนมัติ ทำได้โดยใช้ data-interval หน่วยเป็นมิลลิวินาที

<div id="my-carousel" class="carousel slide" data-ride="carousel" 
     data-interval="500">

Source code

https://gist.github.com/benznest/a2c5683a2f19ddd26617415821a2b141

Modal

Modal คือป๊อบอัพแบบสวยๆ อันนี้ก็ใช้บ่อยมากๆ
ใช้โค้ดลัดสร้าง Modal คือพิมพ์ว่ b-modal แล้วเลือก modal-full

Modal ปกติมันจะถูกซ่อนเอาไว้ รอให้เรียกใช้งาน
ให้เพิ่ม id ให้กับ div modal หลัก

  <div class="modal fade" id="myModal">

ปรับแต่ง modal ตามใจ โดยภายในก็แบ่งเป็น header, content , footer

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Hello Modal</h5>
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Content</p>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-danger text-white" data-dismiss="modal">Close</a>
                    <a class="btn btn-success text-white" data-dismiss="modal">Save</a>
                </div>
            </div>
        </div>
    </div>

ปุ่มไหนที่อยากให้กดแล้วแสดง modal ก็เพิ่ม data-toggle=”modal” data-target=”#myModal”
โดย target คือ id ของ modal

<a class="btn btn-primary text-white" data-toggle="modal" data-target="#myModal">Read more</a>

แนะนำ bootsnipp

bootsnipp จะเป็นเว็บที่รวม code หรือ component ต่างๆ เอาไว้สำหรับ bootstrap

https://bootsnipp.com

เช่นอยากลองใช้ตัวที่ชื่อว่า Timeline vertical ในเว็บของเรา

กดเข้าไป ข้างในจะมีรายละเอียด เช่น HTML , CSS

ให้ copy โค้ด HTML มาไว้ในที่ต้องการ และ copy CSS ของมันมาด้วย โดยเอาไปวางไว้ใน custom.css ของเรา

จากนั้น มาเพิ่ม custom.css

    ...
    <link rel="stylesheet" href="css/custom.css" />
</head>
...

แนะนำ Startbootstrap.com

ตัวนี้เป็นแหล่งรวมธีมของ Bootstrap แบบมาทั้ง pack เลย เช่น ธีมสำหรับทำเว็บบริษัท ธีมสำหรับแสดงผลงาน

https://startbootstrap.com/

การใช้ class display

อันนี้เป็นความสามารถใหม่ใน ฺbootstrap4 เช่น อยากให้หน้าจอใหญ่แสดง Carousel แต่ในจอเล็กให้ซ่อน
ใน Bootstrap 4 สามารถใช้ class d-

<div class="container-fluid mt-5 p-0 d-none d-sm-none d-md-block">

Media query

Media query คือการระบุเงื่อนไขเจาะจงสำหรับ css เช่น ถ้าหน้าจอขนาดมากกว่า 700px ให้ h1 , h2, h3 ขนาด 1 rem

@media (max-width:700px){
    h1,h2,h3{
        font-size:1rem;
    }
}

สิ่งที่ใช้ร่วมกับ Bootstrap ไม่ได้

เช่น คู่แข่ง ชื่อว่า Foundation เพราะใช้ชื่อ class เหมือนกัน ตัว Foundation มีความสามารถมากกว่า Bootstrap ทำอะไร Advance ได้มากกว่า แต่ก็ต้องเรียนรู้มากกว่า

สรุป

บทความนี้ก็พาไปทำ component ที่ใช้งานบ่อย เช่น Table , Form , Carousel , Modal , Navbar รวมทั้งแนะนำเว็บที่เกี่ยวกับ bootstrap ที่จะช่วยให้ใช้งานได้ง่ายขึ้นอีกด้วย

benzneststudios

สรุปการใช้งาน Bootstrap 4 แบบพื้นฐาน ตอนที่ 2

Table

Source code

Form

Source code

Card

Source code

การใช้ Media

Source code

Navigation

การใช้ Javascript ของ Bootstrap

การทำ dropdown

ติตดั้ง extension

Navbar responsive

แนะนำ Bootswatch

การใช้ Carousel

Source code

Modal

แนะนำ bootsnipp

แนะนำ Startbootstrap.com

การใช้ class display

Media query

สิ่งที่ใช้ร่วมกับ Bootstrap ไม่ได้

สรุป

benzneststudios