Skip to main content

Cara Menggunakan Bootstrap Framework

Mandailing Natal - Cara Menggunakan Bootstrap Framework - bootstrap merupakan salah satu dari framework yang banyak di gunakan untuk membuat website, di karenakan kemudahannya dalam menggunakannya. Tulisan Cara Menggunakan Bootstrap Framework saya ambil dari web w3schools.com saya terjemah bebas, agar mudah di gunakan dan di fahami anak-anak tkj-trpl Smk swasta teruna padangsidimpuan.

Bootstrap menggunakan elemen html dan properti css dan merupakan prasyarat utama dalam html5. Untuk memberitahukan kepada browser bahwa code yang kita buat merupakan html5 dalam dokument html yang kita buat harus di sertakan <doctype html5>

Beberapa hal yang harus di kenal dan di hapal adalah selektor-selektor yang sudah tersedia didalam bootstrap, berikut merupakan selektor-selektor yang digunakan dan harus di fahami serta hapal luar kepala.

.container
.container-fluid


contoh penggunakan selektor kelas .container
<!DOCTYPE html>
<html lang="en">
    <head>
        <title> BOOTSTRAP </title>
        <link href="css/bootstrap.min.css" rel="stylesheet" >
    </head>
<body>

<div class="container">
    <div class="jumbotron">
    <h1> Gunawan</h1>
    <h5> Test bootstrap</h5>
    </div>
   
   
</div>
</body>
</html>
Contoh penggunaan selektor kels .container-fluid
<!DOCTYPE html>
<html lang="en">
    <head>
        <title> BOOTSTRAP </title>
        <link href="css/bootstrap.min.css" rel="stylesheet" >
    </head>
<body>

<div class="container-fluid">
    <div class="jumbotron">
    <h1> Gunawan</h1>
    <h5> Test bootstrap</h5>
    </div>
   
   
</div>
</body>
</html>

Bootstrap Grid View System

Bootstrap memiliki 12 grid kolom, jika kita tidak ingin menggunakan ke-12 kolom tersebut kita bisa menggabungnya, sehingga kolom-kolom tersebut sesuai dengan keinginan kita. Misalnya ingin menampilkan 2 kolom saja, maka masing-masing kolom kiri dan kanan kita bagi 2 dari ke-12 kolom tersebut, dapat kita lihat pada gambar berikut:

gambar grid-coloumn w3schools.com
Untuk membagi halaman kedalam beberapa bagian, kita bisa menggunakan  kelas .col-namakelasnya-jumlahkolomyangdigabung . Dalam gambar diatas kita melihat kolom-kolom kecil sebanyak 12kolom. masing-masing dibagi atas 4buah kolom.

Format code kelas kolom diatas saya karang-karang sendiri, untuk mudah digunakan. namakelasnya secara default telah di sediakan oleh bootstrap, pada tulisan namakelasnya bisa kita ganti dengan yang telah di sediakan oleh bootstrap diantaranya:

  • xs (untuk phones)
  • sm (untuk tablets)
  • md (untuk desktops)
  • lg (untuk desktops yang lebih besar)

Kita dapat menggunakan kelas yang ada dengan bebas-sebebas-bebasnya. Tentunya tergantung target kontent kita mau di buka dengan apa. Nah untuk menggunakan kolom grid, kita harus memanggil sebuah selektor kelas bernama row untuk contohnya kita sambung dari contoh sebelumnya saja.
<!DOCTYPE html>
<html lang="en">
    <head>
        <title> BOOTSTRAP </title>
        <link href="css/bootstrap.min.css" rel="stylesheet" >
    </head>
<body>

<div class="container">
    <div class="jumbotron">
    <h1> Gunawan</h1>
    <h5> Test bootstrap</h5>
    </div>
   
    <div class="row"> <!-- selektor kelas row, wajib katanya ada kalau mau membagi halaman jadi 3 bagian -->
        <div class="col-md-4"> <!-- nih bagian yang membagi 12 masing-masing 4kolom -->
            <h2> Kolom 1 </h2>
            <p> Kolom 1 merupakn gabungan 4 buah kolom dari 12 kolom yang ada didalam bootstrap </p>
            <p> Mudahkan menggunakannya... </p>
        </div>
        <div class="col-md-4">
            <h2> Kolom 2 </h2>
            <p> Kolom 2 merupakn gabungan 4 buah kolom dari 12 kolom yang ada didalam bootstrap, Masih ingatkan kolom bootstrap ada 12 kolom, berikut kolom nomor 5-8 </p>
            <p> Mudahkan menggunakannya... </p>
        </div>
        <div class="col-md-4">
            <h2> Kolom 3 </h2>
            <p> Kolom 3 merupakn gabungan 4 buah kolom dari 12 kolom yang ada didalam bootstrap,nah berikut kolom nomor 9-12 </p>
            <p> Mudahkan menggunakannya... </p>
        </div>
    </div>
   
</div>
</body>
</html>

Tampilannya seperti gambar di bawah


Nah kalo kelas .col-md-4 saya ganti misalnya dengan .col-xs-8 atau .col-lg-6 bagaimana ?. Kamu bisa exprimentkan sendiri ya. Gunakan aja editor text notepad++ biar asyik utak-atik kodeknya, pake sublime juga bisa. download di internet.

Bootstrap Text/Typography

Konon katanya si w3schools, bootstrap sudah memiliki ukuran yang di defaultkan, termasuk untuk ukuran huruf, paragraf dan macam-macamnya, misalnya saja untuk jarak paragrap, tag pmemiliki line-height 10px; sedangkan ukuran huruf (font-size) sekitar 14px dengan line-height 1.428.

Untuk elemen h1 - h6 seperti berikut:

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

Selain yang sudah ada diatas, masih banyak lagi, element html dan property css yang sudah di format sedemikian rupa dan default menjadi bawaan dari bootstrap, untuk mempersingkat tulisan Cara Menggunakan Bootstrap Framework, saya rasa sampai disini dulu. Insya Allah saya coba nanti lanjutkan, dan bagi yang ingin mencoba silahkan kunjungi w3schools.com saya juga membacanya dari sana.

Comments

Popular posts from this blog

Pengertian Masquerade Mikrotik

Pengertian Masquerade Mikrotik - Jasa setting mikrotik - Fungsi Masquerade pada mikrotik - Masquerade mungkin bisa di artikan sebagai topeng untuk bisa terkenoneksi ke jaringan internet menggunakan ip private, atau simplenya masquerade mikrotik atau masquerade linux merupakan sebuah metode yang mengizinkan dan memperbolehkan ip private untuk terkoneksi ke internet dengan mengunakan bantuan sebuah ip public /bertopengkan sebuah ip publik. Dengan bantuan masquerade sebuah ip publik dapat mendistribusikan koneksi internet ke banyak ip private. Ip private merupakan ip address yang tidak masuk kedalam routing table router jaringan internet global. Dan ip private hanya bisa di gunakan didalam jaringan lokal. Karena ip private ini hanya bisa di gunakan dalam jaringan LAN atau local area network, maka lahirlah masquerade yang menjadi topeng agar ip private (LAN) dapat berinteraksi ke internet. Berikut ini range ip private yang sering di gunakan dijaringan lokal: 10.0.0.0 - 10.255.255.255 172.

SIUP TDP Lama Tak Perlu Diperpanjang

Permendag Baru Terbit, SIUP Tak Perlu Diperpanjang Pelaku usaha yang telah memiliki SIUP tidak perlu lagi melakukan pendaftaran ulang karena SIUP berlaku selama perusahaan perdagangan menjalankan kegiatan usaha di bidang perdagangan.   Menteri Perdagangan Enggartiasto Lukita menyatakan telah mengeluarkan Peraturan Menteri Perdagangan (Permendag) terbaru yang mengatur penghapusan kewajiban pendaftaran ulang Surat Izin Usaha Perdagangan (SIUP), serta Penyederhanaan prosedur dan penghapusan kewajiban biaya administrasi pembaruan Tanda Daftar Perusahaan (TDP). Kedua Permendag baru ini memberi jaminan kemudahan berusaha bagi pelaku usaha di bidang perdagangan. Mendag menegaskan kewajiban pendaftaran ulang Surat Izin Usaha Perdagangan (SIUP) setiap lima tahun dihapus.  "Pemerintah Ingin meningkatkan pelayanan dan kemudahan berusaha kepada seluruh pelaku usaha di bidang perdagangan," tegas Mendag Enggar dalam rilis, Kamis (23/2). (Baca Juga: Bekraf Janji Bantu Pembuatan Badan Hukum

Error 404: Not Found User Manager Mikrotik

Jasa setting hotspot mikrotik - Jika anda sedang di pusingkan ERROR 404: Not Found saat membuka user manager hotspot anda dari browser, kesalahan itu hanya sedikit saja. Anda hanya perlu merubah port http pada  IP->SERVICE ke salah satu port kosong yang anda miliki, secara default port http mikrotik adalah 80, nah anda bisa menggantinya dengan port lain, misalnya port 81, 8080, atau port berapa saja yang terbuka.