Bootstrap Chapter 9 - Membuat List dengan Bootstrap - Blogger Baper

Blogger Baper

Tutorial Seo, Info, Tips Trik

    • Breaking

    Post Top Ad

    Monday, April 10, 2017

    demo-image
    Home Bootstrap Bootstrap Chapter 9 - Membuat List dengan Bootstrap

    Bootstrap Chapter 9 - Membuat List dengan Bootstrap

    Responsive Ads Here

    bs9


    MEMBUAT LIST DENGAN BOOTSTRAP
    Sekarang kita akan mempelajari bagaimana cara Membuat List Dengan Bootstrap. Untuk membuat list dengan Bootstrap seperti biasa, saya kira cukup mudah kita tinggal memasukkan class Bootstrap saja. Tambahkan class "list-group" pada tag <ul> pembuka.
    <ul class="list-group">
    Kemudian tambahkan class "list-group-item" pada setiap tag <li> pembuka yang menandakan bahwa list tersebut merupakan pembuka dari list
    <li class="list-group-item">
    Berikut contoh penggunaan List pada Bootstrap

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Part 9 : Membuat list dengan bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body>        
        <div class="container">
            <h1>Membuat List Dengan Bootstrap<br>

            <a href="https://www.script-kiddies.org">Script Kiddies</a></h1> 
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Baju</a></li>
                <li class="list-group-item"><a href="#">Celana</a></li>
                <li class="list-group-item"><a href="#">Jaket</a></li>
                <li class="list-group-item"><a href="#">Sepatu</a></li>            
                <li class="list-group-item"><a href="#">Sendal</a></li>            
            </ul>
        </div>
    </div>

    </body>

    Screenshot+from+2016-12-23+10%253A58%253A52

    Sobat juga bisa menambahkan penandaan dengan warna pada list Bootstrap diatas. Yaitu dengan menambahkan class berikut :
    • list-group-item-success : Untuk membuat list berwarna hijau
    • list-group-item-info : Untuk membuat list berwarna biru
    • list-group-item-warning : Untuk membuat list berwarna kuning
    • list-group-item-danger : Untuk membuat list berwarna merah
     Perhatikan contoh berikut :

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Part 9 : Membuat list dengan bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body>        
        <div class="container">
            <h1>Membuat List Dengan Bootstrap<br>
            <a href="https://www.script-kiddies.org">Script Kiddies</a></h1> 
           <ul class="list-group">
                <li class="list-group-item list-group-item-success"><a href="#">Baju</a></li>
                <li class="list-group-item list-group-item-warning"><a href="#">Celana</a></li>
                <li class="list-group-item list-group-item-info"><a href="#">Jaket</a></li>
                <li class="list-group-item list-group-item-danger"><a href="#">Sepatu</a></li>            
                <li class="list-group-item"><a href="#">Sendal</a></li>            
            </ul>
        </div>
    </div>
    </body> 
    </html>

    Screenshot+from+2016-12-23+13%253A08%253A17

    Membuat List Badge dengan Bootstrap
     
    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Part 9 : Membuat list dengan bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body>        
        <div class="container">
            <h1>Membuat List Dengan Bootstrap<br>
           <a href="https://www.script-kiddies.org">Script Kiddies</a></h1> 
          <ul class="list-group">
                <li class="list-group-item list-group-item-success"><a href="#"><span class="badge pull-right">12</span> Baju</a></li>
                <li class="list-group-item list-group-item-warning"><a href="#"><span class="badge pull-right">2</span> Celana</a></li>
                <li class="list-group-item list-group-item-info"><a href="#"><span class="badge pull-right">90</span> Jaket</a></li>
                <li class="list-group-item list-group-item-danger"> <span class="badge pull-right">78</span> <a href="#">Sepatu</a></li>            
                <li class="list-group-item"><a href="#"><span class="badge pull-right">16</span> Sendal</a></li>            
            </ul>
            
        </div>
    </div>
    </body> 

    </html>

    Screenshot+from+2016-12-23+13%253A18%253A18
    KESIMPULAN
    Bagaimana? Mudah bukan? Untuk membuat list responsive dan modern kita dapat menggunakan class Bootstrap seperti yang sudah saya jelaskan diatas kita hanya tinggal mengkreasikan sesuai pemikiran kita. Jika ada yang ditanyakan silahkan berikan komentar, Sekian Terima Kasih

    REFERENSI : Malas Ngoding
    Tags
    Responsive Ads Here
    Share This

    About bangpras
    Templatesyard is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates which are professionally designed and perfectlly seo optimized to deliver best result for your blog.

    Newer Article Bootstrap Chapter 11 - Membuat Navigasi dan Pils Bootstrap Older Article Bootstrap Chapter 10 - Membuat Panel dengan Bootstrap
    By di icon18_edit_allbkg
    Label:
    Subscribe to: Post Comments (Atom)

    No comments:

    Post a Comment

    Post Bottom Ad

    Author Details

    Pages

    Contact Form

    Name

    Email *

    Message *