Pengertian Bootstrap ~ Tulisan Tugas Mahasiswa Secara Otomatis

Pengertian Bootstrap

            Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.

            Bootstrap juga memudahkan pengaturan website bagi mereka yang kurang mahir coding atau tidak punya waktu banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.
            Misalkan dulu untuk menambahkan menubar di blogspot, maka Anda perlu menyisipkan file CSS, HTML bahkan JavaScript untuk effect tertentu. Kemudian ketika Anda ingin menambahkan dropdown menu, maka per widget, paling tidak Anda butuh menambahkan CSS dan HTML lagi. Belum lagi jika ingin lebih menarik akan dibutuhkan javascript tambahan. Begitu seterusnya setiap penambahan widget selalu dibutuhkan banyak kode. Tapi setelah instalasi bootstrap, Anda hanya perlu menambahkan kode HTML nya saja.
            Tapi Penggunaan bootstrap kadang membuat kita jadi kurang kreatif, Coding yang sudah di buatkan oleh pengembang membuat desain web kita terbatas. Sebenarnya kita masih bisa tambahkan CSS manual pada elemen-elemen bootstrap untuk mempercantiknya, tapi jelas ini membuat web kita nanggung. Menambahkan CSS manual sama saja kembali ke cara lama.
            Jadi, pilihan Anda apakah akan mengikuti perkembangan jaman bersama bootstrap, editing dan kelola website secara instan. Atau lebih suka oprek template sendiri berkutat dengan kode CSS yang Anda susun-susun sendiri.
Fungsi bootstrap
            Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Cara membuat Bootstrap
Untuk memulai belajar Bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut. Baiklah langsung saja.
Persiapan:

    Anda Harus memiliki file distribusi Bootstrap

Untuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap sebagaimana terlihat pada gambar diatas, langsung saja! klik tombol tersebut. Kemudian pilih lagi Download Bootstrap
Setelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis) atau winRAR (shareware). Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder lain.

    Download jQuery Library Untuk Bekerja Offline

Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet). Silahkan download jQuery library dengan menuju situs resmi jQuery Download, pilih jQuery 1.x kemudian, download dengan mengklik link Download the compressed, production jQuery 1.11.1

    Anda harus memiliki code editor.

Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.
Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan baik yang gratis maupun yang berbayar. Sebagai pemula, mungkin kita bisa memulai dengan menggunakan Notepad++. Aplikasi ini gratis dan banyak digunakan oleh developer. Download aplikasi Notepad++
Memulai...
Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:

    Buat Folder Baru

Buatlah folder baru, beri nama misalkan "Belajar_Bootstrap".

    Copy seluruh file Bootstrap ke dalam Folder Baru Tersebut

Copy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap)

    Copy file jQuery ke dalam folder js

Copy dan Gabungkan file jquery-1.11.1.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.

    Buat file html

Buat file baru dengan notepadd++ kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama seperti: index.html atau default.html dan simpanlah file tersebut ke folder "Belajar_Bootstrap" yang telah dibuat diatas. Berikut kodenya:



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 3.3.0 Starter Template - by dul.web.id</title>

    

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

    

    

    

</head>

<body>



<div class="container">

    <h1>Apa Kabar Dunia?</h1>

    

<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

    <div class="modal-dialog modal-sm">

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

          <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>

        </div>

        <div class="modal-body">

          Hai... salam kenal dari <strong>dul</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar

        </div>

      </div>

    </div>

</div>

</div>



    

    <script src="js/jquery-1.11.1.min.js"></script>

    

    <script src="js/bootstrap.min.js"></script>

</body>

</html>

Cara Membuat Tabel Dengan Bootstrap
Cara Membuat Tabel / Table Dengan Bootstrap : Langkah-langkah membuat tabel dengan css twitter bootstrap. Bagaimana cara membuat tabel dengan bootstrap?. Tabel sangat berguna untuk menampilkan sebuah data. Kita sering menjumpai tabel dimana-mana begitu juga dalam suatu halaman web. Table juga memilki berbagai macam tampilan ada yang berwarna-warni dan juga ada yang berupa garis biasa. Dalam setiap platform blog pasti tersedia fitur tabel, namun terkadang tampilannya kurang menarik dan tidak sesuai dengan apa yang kita inginkan. Berikut ini adalah contoh tabel yang dibuat dengan menggunakan css dari twitter yaitu Bootstrap.

Cara Membuat Tabel Dengan Bootstrap

Dengan CSS twitter bootstrap kita semakin mudah dalalm membuat table dengan tampilan yang lebih menarik. Kita juga tidak perlu mendesain dengn CSS yang harus kita tulis sendiri yang tentunya akan memakan waktu.
Ø Langkah-langkah membuat tabel dengan bootstrap

    Copy terlebih dahulu kode berikut ke template anda


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

§ Table Style 1
#

First Name

Last Name

Username
1

Mark

Otto

@mdo
2

Jacob

Thornton

@fat
3

Larry

the Bird

@twitter
<div class="col-md-6">
          <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
§ Table Style 2
#

First Name

Last Name

Username
1

Mark

Otto

@mdo
2

Jacob

Thornton

@fat
3

Larry

the Bird

@twitter
<div class="col-md-6">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
§ Table Style 3
#

First Name

Last Name

Username
1

Mark

Otto

@mdo
Mark

Otto

@TwBootstrap
2

Jacob

Thornton

@fat
3

Larry the Bird

@twitter
<div class="col-md-6">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="2">1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>Mark</td>
                <td>Otto</td>
                <td>@TwBootstrap</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
§ Table Style 4
#

First Name

Last Name

Username
1

Mark

Otto

@mdo
2

Jacob

Thornton

@fat
3

Larry the Bird

@twitter

<div class="col-md-6">
          <table class="table table-condensed">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
Untuk pengisian data-datanya bisa anda ubah sesuai dengan keinginan dan kebutuhan anda. Kelebihannya adalah kita tidak perlu menuliskan css secara manual untuk membuat tampilan tabel lebih menarik

   Template Blogger Bisa Dibuat Dengan Bootstrap
                Template Blogger Bisa Dibuat Dengan Bootstrap : Membuat Template Blogger Responsive Dengan Bootstrap - template yang dipakai blogger sekarang ini belum banyak yang menggunakan Bootsrap, dan masih menggunakan Style / CSS yang ditulis sendiri. Dengan hadirnya teknologi Bootsrap semakin memudahkan seorang web designer dalam melakukan design terhadap tampilan sebuah website. Karena anda tidak perlu lagi menulis baris kode CSS, HTML dan JavaScript yang terlalu panjang. Bagi anda yang belum tahu apa itu Bootstrap? Dan apa saja kelebihan dan kekurangan Bootstrap silahkan baca artikel saya sebelumnya Pengertian Twitter Bootstrap Fungsi Kelebihan dan Kekurangannya.

Bootstrap bisa diterapkan hampir disemua Platform, selain itu Bootsatrap juga memiliki banyak kelebihan.

            Menurut saya ini adalah sesuatu yang sangan melelahkan karena harus mengatur tampilan Blog agar sesuai di semua layar baik komputer, tablet maupun smartphone. Dalam Pengunaan bootstrap Untuk membuat template Blogger anda hanya membutuhkan 3 komponen utama yaitu 2 Style CSS dan 1 Buah JavaScript ditambah Jquery. Berikut adalah style dan java Script.


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

Kedua Style tersebut ditempatkan di dalam elemen <head> yaitu sebelum kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>

<script src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'/>

Kedua Komponen Javascript diatas ditempatkan di dalam element <body> bagian akhir yaitu sebelum </body>. Tujuannya adalah untuk mempercepat loading sebuah website.

    Cara Membuat Menu Navigasi Dengan Bootstrap
Cara Membuat Menu Navigasi / Navigation Dengan Bootstrap dan Langkah-langkahnya : Navigation Fixed dan Navigasi Responsive Otomatis – salah satu kemudahan yang diberikan oleh Bootstrap yaitu degan adanya Menu Navigasi / Navigation Menu. Kita tidak perlu susah-susah membuat menu navigasi degan CSS buatan sendiri, karena dengan Bootstrap Anda bisa membuat menu navigasi dengan cepat dan mudah. Anda hanya perlu memanggil kelas / class dari CSS yang disediakan oleh Bootstrap. Menu navigasi yang disediakan terdapat berbagai macam variasi, seperti Navigation Fixed. Yang menarik dari menu navigasi ini yaitu, Menu Navigasi Bootstrap Akan Otomatis menyesuaikan ukuran layar atau sering disebut Responsive. Bagi anda yang menggunakan Blogger, Bootstrap bisa menjadi pilihan dalam template anda. Bagi anda yang belum mengetahui cara penggunaanya dalam template blogger, silahkan baca artikel berikut TemplateBlogger Bisa Dibuat Dengan Bootstrap. Baiklah berikut adalah langkah-langkah dalam membuat Menu Navigasi atau Navigation Menu dengan Bootstrap.
Cara Membuat Menu Navigasi Dengan Bootstrap

Ø Langkah-Langkah Membuat Menu Navigasi Dengan Bootstrap

    Pertama, jika anda pengguna Blogger silahkan login terlebih dahulu.
    Kemudian pilih Template > Edit HTML.
    Tempatkan CSS berikut sebelum kode </head>


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

    Jika sudah kemudian tempatkan kode JavaSript berikut ini diatas kode </body>

    
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>
    
    <script src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'/>

    Langkah Selanjutnya dalah pemanggilan kelas / class dari Navigasi.

    Silahkan Pilih Style Navigasi yang anda inginkan, kemudian Tempatkan kode berikut ini sesuai keinginan anda.

§ Fixed Navigation On Top

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bootstrap theme</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
§ Dark Navigation (non Fixed)
<div class="navbar navbar-inverse">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
§ Light Navigation (non Fixed)
      <div class="navbar navbar-default">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>

    misalnya anda ingin menempatkan menu navigasi diatas header. Maka cari lokasi header contoh :

<div id="header-wrapper">

    Tempatken kode tersebut diatas header-wrapper. Perlu diperhatikan, setiap template tidak sama. Bisa jadi anda tidaka akan menemukan header-wrapper. Sesuaikan dengan template yang anda gunakan.

    Jika Sudah silahkan anda Simpan dan lihatlah hasilnya.

Membuat Sebuah menu navigasi dengan bootstrap terasa lebih mudah, selain itu Menu navigasi tersebut bisa anda edit sesuai dengan keinginan anda dengan menambahkan CSS. Mungkin Bootstrap bisa menjadi pilihan bagi anda yang ingin membuat template tapi malas untuk menulis satu-persatu kode dalam template anda. Bootstrap juga ringan, dan tidak membuat template menjadi lambat saat dibuka.

Cara Membuat Alerts Peringatan atau Pesan Dengan Bootstrap
                Cara Membuat Alerts, Peringatan atau Pesan Dengan Bootstrap : Langkah-langkah membuat alerts atau pesan dengan css twitter Bootstrap, Bagaimana cara membuat alert dengan bootstrap? Bagaimana menampilkan alerts oada artikel atau posting blog?. Sebuah pesan hampir kita jumpai disetiap halaman blog sebagai contoh dalam blog dengan kategori template mungkin anda akan menjumpai pesan berikut.

"Jangan Hapus Credit Link"
Selain itu anda mungkin juga pernah menjumpai pesan berupa Pop Up dengan javascript. Begitu juga diatas form komentar anda pasti juga pernah menjumpai beberapa pesan. Pesan yang muncul memiliki tampilan yang berbeda-beda. Berikut ini adalah beberapa contoh tampilan Alerts yang dibuat dengan CSS Twitter Bootstrap. Bagi anda yang belum tahu apa Bootstrap silahkan baca artikel berikut Pengertian Twitter Bootstrap Fungsi Kelebihan dan Kekurangannya
Cara Membuat Alerts Peringatan atau Pesan Dengan Bootstrap

Dengan menggunakan Bootstrap kita tidak perlu lagi mempercantik alerts atau pesan dengan CSS yang harus kita tulis. Kita cukup memanggil Class dari Css yang telah disediakan oleh Bootstrap. Dengan begitu, kita semakin mudah dalam membuat alerts. Bagaimana cara membuat alert dengan bootstrap?
Ø Langkah Membuat Alerts atau Pesan Dengan Bootstrap

    Pertama, jika anda pengguna Blogger silahkan login terlebih dahulu.
    Kemudian pilih Template > Edit HTML.
    Tempatkan CSS berikut sebelum kode </head>


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

    Kemudian Simpan

    Untuk lokasi menampikan alerts sesuai dengan keinginan anda, secagai contoh pesan akan ditampilkan di dalam salah satu Posting artikel.

    Pilih Artikel kemudian edit dan ubah dari Compose ke HTML.

    Silahkan Pilih tampilan pesan yang anda inginkan berikut ini.

§ Green Alerts Successs
Well done! You successfully read this important alert message.
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
§ Blue Alerts Info
Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
§ Yellow Alerts Warning
Warning! Best check yo self, you're not looking too good.
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

§ Red Alerts Danger
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

    Jika sudah silahkan simpan dan lihat hasilnya

Mudah bukan, selain beberapa tampilan alerts yang telah disediakan oleh bootstrap anda juga bisa menambahkan CSS agar lebih menarik dan mengubah pesan sesuai dengan keinginan anda.

Kelebihan dan kekurangan bootstrap

Kelebihan Dari Bootstrap :

    Anda tidak perlu menuliskan baris kode CSS, HTML dan JavaScript yang terlalu panjang.
    Terdapat banyak varian style pada bootstrap.
    Ada banyak pilihan button, navigation, carousel dll.
    Otomatis Responsive, Tidak perlu mengatur.
    CSS dan JavaScript yang ringan.
    Dan masih banyak lagi

Kekurangan Bootstrap :

    Minim gambar karena menggunakan CSS3.
    Belum mampu memberikan tampilan yang sesuai di semua web browser.
    Membuat kita menjadi kurang kreatif karena terpaku dengan coding yang dikembangkan oleh developer

DAFTAR PUSTAKA
http://itcentrestainbatusangkar.blogspot.com/2014/11/website-atau-blog-langsung-ngacirr.html
http://themasdoyok.com/2013/08/pengertian-apa-itu-bootstrap.html
http://www.gee.web.id/2013/10/bootstrap-itu-apa-sih.html?m=1

Tulisan Tugas Mahasiswa Secara Otomatis

Pengertian Bootstrap

Related Post