Apakah bootstrap Membantu ?

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Nah oleh karna itu ini jelas membantu, untuk menghandle layout, dan juga membuat anda lebih cepat belajar jika anda sedang menginplementasikan php crud or something.
Nah anda beberapa keuntungan memakai components bootstrap, contoh jika anda membuat user profile, ni sudah pasti sangat gampang, anda bisa lihat di http://getbootstrap.com/components/#media, cara menggunakannya sangat gampang, anda bisa lihat markup di bawah.

1. Media

<div class="media">

  <div class="media-left">

    <a href="#">

      <img class="media-object" src="http://www.imlocora.org/favicon/apple-icon-180x180.png" alt="Locora">

    </a>

  </div>

  <div class="media-body">

    <h4 class="media-heading">Imlocora</h4>

    Imlocora is the one that you need if you want to learn of Web Development Stuff. HMTL, CSS, Javascript, PHP and Framework, that's what we are ...

  </div>

</div>

Imlocora

Imlocora is the one that you need if you want to learn of Web Development Stuff. HMTL, CSS, Javascript, PHP and Framework, that's what we are ...

Bukannya sangat gampang, tanpa anda harus membuat style sendiri anda langsung bisa membuat user profile yang memungkinkan memudah kan anda.

dan tidak hanya itu, anda juga bisa membuat sistem content dan sidebar, tepatnya pemilihan colum yang anda bisa lihat di http://getbootstrap.com/css/#grid Nah disini sangat powerfull sekali, pentingnya adalah, tanpa anda harus mengatur layout baik di iPhone, Tab, widescreen, dan laptop, anda sudah di aturkan oleh bootstrap tersebut, Jika anda tidak menyukai nya ia tidak masalah, tapi ia selagi ini gratis kenapa tidak, dan tidak ada salah nya jika anda mencobanya.

2. Alerts

Alert digunakan untuk sebuah message, baik itu pesan sukses atau pun error, untuk contoh anda telah berhasil login, dan anda bisa buat alertnya langsung di atas atau di bawah tempat di mana log message yang anda inginkan. alert bisa berfungsi 2, bisa tidak di klik bisa juga anda klik. Markup di bawah tanpa klik. 

<div class="alert alert-info">

You are registered...

</div>

You are registered...

Ini tidak ada method sama sekali, tapi jika yang pakai close button, ini perlu markup tambahan, anda bisa lihat dibawah!

<div class="alert alert-danger">

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

<strong>Something wrong!</strong> You have to fill any fields we have!

</div>

Something wrong! You have to fill any fields we have!

Gampang kan, bukannya ini sangat membantu anda dalam hal project seperti ini :)

3. Table

Table juga sangat membantu, anda bisa lihat source nya di http://getbootstrap.com/css/#tables, Ok masalah table juga sangat penting untuk dasar tampilan dan responsive. Banyak variasi pembuatan table, jika anda ingin melihat saya akan beri satu, much like data dari database.

<table class="table">

 <thead>

 <tr>

 <th>Firstname</th>

 <th>Lastname</th>

 <th>Username</th>

 <th>Email</th>

 </tr>

 </thead>

 <tbody>

 <tr>

 <td>Irsyad</td>

 <td>Panjaitan</td>

 <td>IrsyadAdl</td>

 <td>irsyad@imlocora.org</td>

 </tr>

 <tr>

 <td>Mark</td>

 <td>Otto</td>

 <td>Mdo</td>

 <td>mdo@example.com</td>

 </tr>

 <tr>

 <td>Iqbal</td>

 <td>MH</td>

 <td>IqbalMH</td>

 <td>iqbalmh@imlocora.org</td>

 </tr>

 </tbody>

</table>

 

<br>

 

<table class="table table-striped">

 <thead>

 <tr>

 <th>Firstname</th>

 <th>Lastname</th>

 <th>Username</th>

 <th>Email</th>

 </tr>

 </thead>

 <tbody>

 <tr>

 <td>Irsyad</td>

 <td>Panjaitan</td>

 <td>IrsyadAdl</td>

 <td>irsyad@imlocora.org</td>

 </tr>

 <tr>

 <td>Mark</td>

 <td>Otto</td>

 <td>Mdo</td>

 <td>mdo@example.com</td>

 </tr>

 <tr>

 <td>Iqbal</td>

 <td>MH</td>

 <td>IqbalMH</td>

 <td>iqbalmh@imlocora.org</td>

 </tr>

 </tbody>

</table>

 

<br>

 

<table class="table table-bordered">

 <thead>

 <tr>

 <th>Firstname</th>

 <th>Lastname</th>

 <th>Username</th>

 <th>Email</th>

 </tr>

 </thead>

 <tbody>

 <tr>

 <td>Irsyad</td>

 <td>Panjaitan</td>

 <td>IrsyadAdl</td>

 <td>irsyad@imlocora.org</td>

 </tr>

 <tr>

 <td>Mark</td>

 <td>Otto</td>

 <td>Mdo</td>

 <td>mdo@example.com</td>

 </tr>

 <tr>

 <td>Iqbal</td>

 <td>MH</td>

 <td>IqbalMH</td>

 <td>iqbalmh@imlocora.org</td>

 </tr>

 </tbody>

</table>

Nah itu beberapa table yang sangat nice bukan, lihat outputnya.

Firstname	Lastname	Username	Email
Irsyad	Panjaitan	IrsyadAdl	irsyad@imlocora.org
Mark	Otto	Mdo	mdo@example.com
Iqbal	MH	IqbalMH	iqbalmh@imlocora.org

Firstname	Lastname	Username	Email
Irsyad	Panjaitan	IrsyadAdl	irsyad@imlocora.org
Mark	Otto	Mdo	mdo@example.com
Iqbal	MH	IqbalMH	iqbalmh@imlocora.org

Firstname	Lastname	Username	Email
Irsyad	Panjaitan	IrsyadAdl	irsyad@imlocora.org
Mark	Otto	Mdo	mdo@example.com
Iqbal	MH	IqbalMH	iqbalmh@imlocora.org

Banyak lagi hal yang lainnya yang anda bisa lihat di http://getbootstrap.com/ . Trimakasih, dan jika anda ada pertanyaan silah kan post dibawah.

Newer Post Older Post