Mendesain Layout Web Dengan Bootstrap Twitter

Metode dan Algoritma | Mendesain Layout Web Dengan Bootstrap Twitter . Anda bisa melakukan konsultasi tentang Mendesain Layout Web Dengan Bootstrap Twitter melalui form di samping kanan !!!

Sepertinya Twitter Bootstrap semakin naik daun nih. Pertama kali penulis diberitahu oleh adik. Setelah dipantau beberapa bulan eh ternyata benar, lumayan booming Desain Layout dengan Bootstrap.

Karena ikut-ikutan, coba kita pelajari beberapa cara penggunaan layout Bootstrap, tetapi karena dasarnya penulis tidak terlalu berbakat di Desain, coba kita gunakan saja beberapa fitur penting yang dirasa cukup bagus. Fitur yang penulis coba yaitu :

1. Starter Template, bagaimana menyiapkan library javascript dan CSS dari Bootstrap.
2. Grid Layout dan Container
3. Table, bagaimana memakai Table
4. Navbar, Menu Navigasi
5. Navlist, Menu Berbentuk Sidebar
6. PrettyPrint, untuk menampilkan kode program di web (misal untuk tutorial)
7. Carousel Slider

Kali ini kita coba saja menyiapkan Starter Template yaitu halaman Web Kosong yang sudah dihubungkan dengan Library Javascript dan CSS milik Bootstrap. Penulis sarankan agar mendownload saja dari Github yang lengkap. Buka URL http://github.com/twitter/bootstrap, kemudian Download.

Extract bootstrap-master.zip, ambil saja folder assets, disitu sudah lengkap semua library, css, javascript dan image yang dibutuhkan. Copy - Paste ke folder kita misal htdocs/bootstrap.

Kemudian buat file HTML dengan isi sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">


<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">





<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>

<body>

<div class="container">

<h2>Bootstrap starter template</h2>
<p>Dokumen kosong dengan library Bootstrap siap digunakan.</p>

</div> 



<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>

</body>
</html>

Hasilnya sudah jadi starter template atau desain dasar halaman web dengan menggunakan Bootstrap.

Fitur lain kita coba pelajari di artikel yang lain.

Desain selengkapnya dapat didownload disini. Klik link ini, kemudian klik File-Download (Unduh)

Selamat mencoba

ActionScript AS3 ASP.NET AJAX C / C++ C# Clipper COBOL ColdFusion DataFlex Delphi Emacs Lisp Fortran FoxPro Java J2ME JavaScript JScript Lingo MATLAB Perl PHP PostScript Python SQL VBScript Visual Basic 6.0 Visual Basic .NET Flash MySQL Oracle Android

Related Post :

Judul: Mendesain Layout Web Dengan Bootstrap Twitter
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh hank2

Anda sedang membaca artikel tentang Mendesain Layout Web Dengan Bootstrap Twitter, Semoga artikel tentang Mendesain Layout Web Dengan Bootstrap Twitter ini sangat bermanfaat bagi teman-teman semua, jangan lupa untuk mengunjungi lagi melalui link Mendesain Layout Web Dengan Bootstrap Twitter.

Posted by: Metode Algoritma Updated at: 22.57

Mendesain Layout Web Dengan Bootstrap Twitter

{ 0 komentar... Views All / Send Comment! }

Posting Komentar

Label