Rabu, 08 Maret 2017

Bootstrap Navbar Part 1

Assalamualaikum Wr.Wb


Berjumpa lagi dengan bootstrap kali ini saya akan membahas navbar bootstrap,namanya juga navbar pasti sudah banyak yang tahu bukan?tetapi membuat navbar bootstrap menurut saya lebih mudah karena lagi - lagi sudah tersedia style untuk membuat navbar sehingga membuat navbar menjadi lebih mudah,cepat dan hasilnya menurut saya cukup bagus,baiklah mari kita mulai

  • Navigation bar
Pada bootstrap, style navbar ini memiliki style yang sederhana

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</nav>
</body>
</html>

Dan inilah hasilnya

  •  Inverted Navigation Bar
Navbar ini hampir sama dengan navbar yang di atas yang membedakan hanya warnanya saja
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</nav>
</body>
</html>

Dan inilah hasilnya

 

  •  Navigation Bar Dropdown
Yaitu navbar yang di lengkapi dengan dropdown
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact
            <span class="caret"></span></a>   
            <ul class="dropdown-menu">
                <li><a href="#">Google Plus</a></li>
                <li><a href="#">Email</a></li>   
            </ul>
            </li>
           
            <li><a href="#">About</a></li>
        </ul>
    </div>
</nav>
</body>
</html>

Dan ini hasilnya


  •  Right Aligned Navigation Bar
Ini di gunakan untuk membuat menu pada navbar tetapi dengan letak di sebelah kanan

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact
            <span class="caret"></span></a>   
            <ul class="dropdown-menu">
                <li><a href="#">Google Plus</a></li>
                <li><a href="#">Email</a></li>   
            </ul>
            </li>
           
            <li><a href="#">About</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
        </ul>
    </div>
</nav>
</body>
</html>
 Dan inilah hasilnya



Oke sebenarnya masih ada beberapa macam navbar, tetapi karena postingannya sudah cukup panjang maka akan saya sambung di postingan berikutnya,sekian sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb 
Read More

Selasa, 07 Maret 2017

Bootstrap Form Inputs

Assalamualaikum Wr.Wb



Mari kita lanjutkan postingan sebelumnya yaitu Membuat Form Dengan Bootstrap dan kali ini kita akan membahas form inputs,ini hampir sama dengan form biasa yang sudah kita bahas sebelumnya.Namun tetap ada perbedaannya,baiklah mari kita mulai satu persatu karena ada beberapa jenis form inputs.

  • Input
Ini merupakan jenis input biasa,masukkan tag atau script  di bawah ini

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<form>
    <div class="form-group">
    <label>Nama:</label>
    <input type="text" class="form-control">       
    </div>
    <div class="form-group">
    <label>Password:</label>
    <input type="password" class="form-control">
    </div>
</form>
   
</div>
</body>
</html>

Dan inilah hasilnya


  • Text Area
Ini bisa di gunakan untuk menuliskan komentar atau semacamnya

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<h2>Text Area</h2>
<form class="form-group">
<label>Comment:</label>
<textarea class="form-control" rows="5"></textarea>   
</form>
</div>
</body>
</html>

Dan hasilnya seperti di bawah ini

   
  • Checkbox
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<h2>Checkbox</h2>
<form>
    <div class="checkbox">
        <label><input type="checkbox"> Bakso</label>
    </div>   
    <div class="checkbox">
    <label><input type="checkbox">Soto</label>       
    </div>
    <div class="checkbox">
    <label><input type="checkbox">Sate</label>
       
    </div>
</form>
</div>
</body>
</html>
Dan inilah hasilnya
  •  Radio Button
Hampir sama dengan checkbox bedanya hanya pada bentuknya radio button berbentuk bulat
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<h2>Radio Button</h2>
<form>
    <div class="checkbox">
        <label><input type="radio"> Bakso</label>
    </div>   
    <div class="checkbox">
    <label><input type="radio">Soto</label>       
    </div>
    <div class="checkbox">
    <label><input type="radio">Sate</label>
       
    </div>
</form>
</div>
</body>
</html>
Dan inilah hasilnya
Ya itu tadi beberapa jenis form inputs yang prinsipnya hampir sama dengan form yang sudah kita bahas sebelumnya,oke mungkin cukup sekian dulu postingan kali ini.Terima kasih sudah mau berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/
 
Wassalamualaikum Wr.Wb   
Read More

Senin, 06 Maret 2017

Membuat Form Dengan Bootstrap

Assalamualaikum Wr.Wb



Kali ini saya akan berbagi tutorial membuat form dengan bootstrap,membuat form dengan bootstrap sangatlah mudah karena bootstrap telah menyediakan style untuk form.Sebelum kita mulai pastikan teman semua sudah mendownload bootstrap di sini lalu simpan file form dalam folder bootstrap yang telah di ekstrak.

  • Bootstrap Vertical Form
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Vertical form</h2>
  <form>
    <div class="form-group">
      <label for="email">Tulis Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Email Anda">
    </div>
    <div class="form-group">
      <label for="pwd">Masukkan Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox">Tetap Masuk</label>
    </div>
    <button type="submit" class="btn btn-danger btn-lg">Submit</button>
  </form>
</div>
</body>
</html>

Dan hasilnya seperti di bawah


  • Inline Form(form dalam satu garis)
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Vertical form</h2>
  <form class="form-inline">
    <div class="form-group">
      <label for="email">Tulis Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Email Anda">
    </div>
    <div class="form-group">
      <label for="pwd">Masukkan Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox">Tetap Masuk</label>
    </div>
    <button type="submit" class="btn btn-danger btn-lg">Submit</button>
  </form>
</div>
</body>
</html>

Sebenarnya tinggal tambahkan clas form-inline pada <form> dan hasilnya

  • Horizontal Form
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Horizontal form</h2>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Masukkan Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="Email Anda">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Masukkan Password:</label>
      <div class="col-sm-10">         
        <input type="password" class="form-control" id="pwd" placeholder="password">
      </div>
    </div>
    <div class="form-group">       
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox"> Tetap Masuk</label>
        </div>
      </div>
    </div>
    <div class="form-group">       
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-success btn-lg">Submit</button>
      </div>
    </div>
  </form>
</div>
</body>
</html>

Maka hasilnya seperti di bawah 
 


Ya itu tadi tutorial membuat form dengan bootstrap yang menurut saya hasilnya lebih baik di banding dengan html biasa bahkan kita tidak perlu repot - repot membuat style dengan css.Oke sekian dulu postingan kali ini sampai jumpa di potingan berikutnya terimakasih telah berkunjung semoga bermanfaat.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb       
Read More

Sabtu, 04 Maret 2017

Bootstrap Collapse

Assalamualaikum Wr.Wb


Pada kesempatan kali ini saya akan berbagi tutorial bootstrap collapse,apa itu bootstrap collapse yaitu sebuah style yang di sediakan bootstrap misalnya kita mengklik suatu tombol atau link maka akan muncul element lain tanpa berpindah halaman.Baiklah mari kita mulai satu - persatu karena ada berbagai jenis collapse.

  • Basic Collapsible 
Seperti namanya basic collapsible adalah collapse yang memiliki style biasa,di sini saya menggunakan button untuk menampilkan collapse.Jadi saat tombol di klik maka akan muncul collapse nya.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Collapse</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Bassic Collapsible</h2>
    <p>Klik tombol di bawah untuk menampilkan collapse</p>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Klik Di Sini</button>
    <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       
    </div>
</div>
</body>
</html>

Berikut hasilnya sebelum di klik
 

Setelah tombol di klik maka akan muncul collapse nya


  •  Collapsible Panel
Yaitu collapsible yang ada di dalam panel atau menggunakan panel
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Collapse</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Contoh Collapsible Panel</h2>   
    <p>Klik tulisan pada panel untuk membuka dan menutup collapse</p>
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse1">Collapsible Panel</a>
                </h4>
            </div>
        <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">Ini Panel Body</div>
            <div class="panel-footer">Ini Panel Footer</div>
        </div>   
        </div>
       
    </div>
</div>
</body>
</html>

Dan inilah hasilnya


 Setelah di klik maka akan muncul collapse nya seperti gambar di bawah


  • Collapsible List Group
Ini hampir sama dengan collapsible panel yang membedakan ini digunakan untuk membuat list
 <!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Collapse</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Collapsible List Group</h2>
    <p>Klik tulisan di dalam panel untuk membuka atau menutup collapse</p>
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse1">
                    Klik Untuk Melihat Menu
                    </a>                      
                    </h4>                  
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <ul class="List-group">
                        <li class="List-group-item">Bakso</li>
                        <li class="List-group-item">Soto</li>
                        <li class="List-group-item">Sate</li>
                    </ul>
                    <div class="panel-footer">Footer Menu</div>
                </div>
            </div>          
        </div>
</div>
</body>
</html>
Dan inilah hasilnya
  
Setelah di klik maka akan tampil collapse seperti di bawah ini

  
  • Accordion
Collapse Accordion ini memiliki tampilan yang serupa dengan akordion,jika salah satu di klik maka yang lain akan otomatis menutup.
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Collapse</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Klik Salah Satu Collapse</h2>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapse 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapse 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapse 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
Dan inilah hasilnya
 
Ya itu tadi sedikit tutorial mengenai Bootstrap Collapse semoga bermanfaat,sampai jumpa di postingan berikutnya,Sekian.

Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb 
Read More

Jumat, 03 Maret 2017

Membuat List Group Dengan Bootstrap

Assalamualaikum Wr.Wb


Masih dengan dengan bootsrap kali ini saya akan berbagi tutrial membuat list dengan bootstrap.List di sini maksudnya sama seperti list di html yang berbeda hanya secara tampilan lebih menarik dari list yang ada di html dan kita tidak perlu terlalu repot untuk membuat style atau yang lainnya jika ingin membuat tampilan list kita menjadi lebih menarik,baiklah mari kita mulai.

  • Basic List Group(yaitu list dengan model biasa)
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Basic List Group</h2>
    <ul class="list-group">
        <li class="list-group-item">Soto</li>
        <li class="list-group-item">Bakso</li>
        <li class="list-group-item">Sate</li>
       
    </ul>
</div>
</body>
</html>

Dan inilah hasilnya




  • List Group Whith Linked Item(list grup dengan link)
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Basic List Group Whith Linked Item</h2>
    <div class="list-group">
        <a href="#" class="list-group-item">Soto</a>
        <a href="#" class="list-group-item">Bakso</a>
        <a href="#" class="list-group-item">Sate</a>
    </div>
</div>
</body>
</html>

Dan inilah hasilnya


 
  • Contextual Clases(yaitu list dengan beberapa warna)
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Contextual Clases</h2>
    <ul class="list-group">
        <li class="list-group-item list-group-item-warning">Bakso</li>
        <li class="list-group-item list-group-item-danger">Soto</li>
        <li class="list-group-item list-group-item-info">Sate</li>
    </ul>
</div>
</body>
</html>

Dan inilah hasilnya

 
  •  Active state
 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="list-group">
    <a href="#" class="list-group-item active">Bakso</a>
    <a href="#" class="list-group-item">Soto</a>
    <a href="#" class="list-group-item">Sate</a>  
    </div>
</div>
</body>
</html>
 Dan inilah hasilnya
Mudah bukan untuk membuat list dengan bootstrap? dan hasilnya saya rasa lebih menarik daripada html biasa,baiklah mungkin sekian dulu postingan kali ini semoga bermanfaat sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb 
Read More

Kamis, 02 Maret 2017

Mengenal Bootstrap Button Groups

Assalamualaikum Wr.Wb




Kali ini saya akan membahas tentang Button Group pada bootstrap,seperti namanya button group adalah beberapa kumpulan button yang style nya telah di sediakan bootstrap,oke mari kita mulai satu persatu karena ada beberapa jenis button group dengan catatan teman semua sudah mendownload bootstrap dan simpan filenya dalam satu folder dengan bootstrap.

  • Button Groups(button biasa)
<!DOCTYPE html>
<html>
<head>
    <title></title>

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Contoh Button Groups</h2>
    <div class="btn-group">
    <button type="button" class="btn btn-primary btn-danger">Button1</button>
    <button type="button" class="btn btn-primary">Button2</button>
    <button type="button" class="btn btn-primary btn-warning">Button3</button>
       
    </div>
</div>
</body>
</html>
  
Hasilnya seperti di bawah ini

 
  • Vertical Button Group(button dengan gaya vertikal)
<!DOCTYPE html>
<html>
<head>
    <title></title>

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Contoh Button Groups Vertical</h2>
    <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary btn-danger">Button1</button>
    <button type="button" class="btn btn-primary">Button2</button>
    <button type="button" class="btn btn-primary btn-warning">Button3</button>
       
    </div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini
 
  • Justified Button Group(button ini modelnya agak lebar tergantung banyaknya button yang di buat)
<!DOCTYPE html>
<html>
<head>
    <title></title>

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Contoh Button Groups Justified</h2>
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary btn-danger">Button1</a>   
        <a href="#" class="btn btn-primary ">Button2</a>
        <a href="#" class="btn btn-primary btn-warning">Button3</a>
       
    </div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini
 

  • Nesting Button Groups Dropdown Menu(button dengan dropdown)
<!DOCTYPE html>
<html>
<head>
    <title></title>

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Contoh Button Groups Dengan Dropdown</h2>
   
<div class="container">
 
  <div class="btn-group">
    <button type="button" class="btn btn-primary btn-danger">Button1</button>
    <button type="button" class="btn btn-primary">Button2</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary btn-warning dropdown-toggle" data-toggle="dropdown">
      Button3<span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini
 

Ya mungkin sekian dulu postingan kali ini tentang Button Groups semoga bermanfaat di balik banyaknya kekurangan sampai jumpa di postingan berikutnya terimakasih.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Read More

Rabu, 01 Maret 2017

Bootstrap Alerts

Assalamualaikum Wr.Wb



Berjumpa lagi dengan bootstrap,sesuai dengan namanya bootstrap alerts bisa di artikan sebuah style atau fitur atau apalah itu yang intinya bisa di gunakan untuk membuat sebuah tampilan pesan peringatan maupun pesan yang intinya untuk info.Daripada bingung - bingung mari langsung kita coba untuk membuatnya ada 4 jenis style bootstrap alert.
  •  Danger yaitu alert dengan background yang cenderung merah
Di sini saya meletakkan bootstrap alerts di dalam tag container agar lebih tertata.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Alert</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-danger">
    <strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap danger</a>.
  </div>   
</div>
</body>
</html>

Dan inilah hasilnya


 
  • Warning yaitu alerts dengan background yang cenderung kuning
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Alert</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-warning">
    <strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap warning</a>.
  </div>   
</div>
</body>
</html>
Hasilya seperti di bawah
 
  • Info yaitu alert yang background nya cenderung berwarna biru

 <!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Alert</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-warning">
    <strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap warning</a>.
  </div>   
</div>
</body>
</html>
Dan hasilnya seperti di bawah
  •  Success yaitu alerts yang backgrond nya cenderung berwarna hijau
 <!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Alert</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-success">
    <strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap succes</a>.
  </div>  
</div>
</body>
</html>
Dan hasilnya seperti di bawah
  
saya beri satu contoh lagi yaitu alerts yang bisa di close tapi untuk membuktikan harus langsung di coba langsung
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Alert</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-success alert-dismissable">
    <strong>Danger!</strong> Contoh Tekan simbol "X" untuk close<a href="#" class="close" data-dismiss="alert" >X</a>.
  </div>   
</div>
</body>
</html>
 Hasilnya seperti di bawah,tapi ingat harus di coba langsung
Oke mungkin sekian dulu untuk postingan kali ini semoga bermanfaat,sampai jumpa di postingan berikutnya terimakasih sudah berkunjung.

Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb 
Read More