Bootstrap 2.3.2: Panduan Memulai

Bootstrap adalah file Kerangka CSS yang menjadi sangat populer di seluruh jaringan. Gaya mereka responsif terlihat di jejaring sosial Tuenti y Twitter. Penggunaan ini menghemat banyak waktu saat mengembangkan aplikasi web karena menghemat semua pekerjaan dan usaha yang terlibat dalam membuat gaya halaman bersih yang cocok untuk semua perangkat. Melihat gaya yang digunakan dalam kerangka ini, kita akan menyadari bahwa itu sudah tidak asing lagi bagi kita, karena saat ini banyak situs web telah menerapkannya.

Struktur

Agar situs web kami dapat diakses dari ponsel dan tablet, kami harus menggunakan struktur fluida yang ditawarkan Bootstrap. Penggunaan struktur ini sangat sederhana, semuanya berdasarkan elemen merentang itu akan membantu kami tata letak desain web kami. Nanti, ketika kita mengakses desain ini dari a smartphone o tablet, ini secara otomatis akan beradaptasi dengan perangkat tersebut secara signifikan meningkatkan kualitas navigasi. Kami akan menggunakan merentang dengan kelas-kelas dalam divisi logis dalam struktur fluida, yaitu:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Dimana angka 2 mewakili besar kecilnya bentang. Setiap baris berisi cukup ruang untuk 12 bentang ukuran 1, atau 2 ukuran 6, ini dapat didistribusikan sesuka Anda. Setelah spasi baris terlampaui, itu akan turun ke baris berikutnya secara otomatis, memungkinkan kita untuk menggunakan file merentang ukuran 12 untuk membuat jeda baris. Jika kami ingin melewatkan beberapa merentang saat membuatnya, yaitu mulai dari 4 merentang, dan menerapkan ukuran 3, kami akan menggunakan kode ini:

<div class="span2 offset4">Contenido</div>

Ini memungkinkan divisi untuk melompat empat rentang sebelum menampilkan konten. Kita dapat menggunakan ini sesuai keinginan kita, melewatkan apa yang kita inginkan dengan kode kita.

Desain berbeda untuk setiap perangkat

Untuk menerapkan desain yang berbeda untuk setiap jenis perangkat, kami akan memberi tahu setiap divisi logis untuk perangkat mana yang diorientasikan, menggunakan kelas berikut:

Dengan cara ini, kami dapat menunjukkan desain yang sangat berbeda untuk setiap perangkat dengan URL yang sama.

kancing-kancing

Bootstrap menawarkan repertoar tombol berwarna yang bersih, penggunaannya sangat sederhana:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

Dimana btn btn-success mengacu pada warna tombol, untuk mengubahnya, kita hanya perlu menggantinya dengan kelas yang ditunjukkan pada gambar sebelumnya.

Menginstal Bootstrap

Untuk pemasangan framework CSS ini, kita akan mendownload zip dari link yang akan saya tinggalkan di akhir postingan, dan kita akan menulis kode berikut di bagian atas file HTML kami.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

Setelah kami memastikan bahwa file CSS dan JS berada di folder yang sama dengan file HTML kami, kami dapat mulai mendesain situs web responsif kami.

Informasi lebih lanjut - Validasi Formulir

Unduh - Bootstrap: Kerangka CSS