Cara Menggunakan Bootstrap

Cara Menggunakan Bootstrap

Tutorial Bootstrap
Selamat malam, salam perjuangan untuk yang biasa mengunjungi blog sederhana ini. kali ini saya akan share tentang bootstrap dan bagaimana cara menggunakanya? Sebelum saya bahas cara penggunaanya disini saya akan jelaskan terlebih dahulu apa itu bootstrap.

Sesuai dengan deskripsi pada website bootstrap, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Jadi bootstap adalah framework HTML, CSS dan JS yang sudah populer dikalangan web desain dan salah satu framework pertama yang suport dengan tampilan di mobile, tablet dan desktop. Hemmm keren bukan sobat saya akan kasih salah satu contohnya seperti gambar berikut :
Tutorial Bootstrap
Gambar Pertama

Tutorial Bootstrap
Gambar Kedua
Perhatikan antara gambar pertama dan kedua :
Gambar pertama : dibuka di tampilan desktop (laptop atau PC)
Gambar kedua : dibuka di tampilan mobile

Otomatis menu akan menyesuaikan tampilan sesuai dengan device client. Ini adalah salah satu keunggulan dari bootstap masih banyak keunggulan-keunggulan lainya yang bisa langsung dibaca diwebsite resmi Bootstap

Cara Menggunakan Bootstap


Sebelum menggunakan bootstap saya harap kita sudah bisa menggunakan CSS dan JavaScript jika belum memahami maka akan sedikit sulit untuk menggunakan Bootstap.

1. Download bootstap Disini
2. Struktur folder bootstap
Tutorial Bootstrap
Struktur Folder Bootstrap
3. Syarat untuk menggunakan Bootrap kita harus sisipkan kode untuk memanggil CSS dan JavaScript di HTML, Basic Template Bootrap adalah sebagai berikut :
<html>
<head>
<title>Belajar Bootstrap - JamiatAbdillah.Net</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
4. file harus disimpan satu folder dengan css,js, dan font dari bootstrap
5. Sobat tinggal tulisankan perintah dibawah tag <body>, contoh kita tulisan kode heading dibawah body : <h1>Selamat Belajar Bootrap</h1>

Jika berhasil maka jenis font sudah menggunakan jenis font dari bootstrap, seperti tampilan berikut :
Tampilan Hasil
Demikanlah tutorial singkat tentang bootstrap adapun untuk membuat tampilan lainya seperti input, table, button dan lainya dapat langsung belajar disini (diwebsite resmi bootstrap). OK sekian dulu tutorialnya semoga Bermanfaat ^-^

Artikel Terkait :

Silhakan memberi Komentar, Kritik, atau Saran ConversionConversion EmoticonEmoticon

Subscribe to: Post Comments (Atom)