Bootstrap 2.3.2: Panduan Bermula

Bootstrap adalah a Kerangka CSS yang telah menjadi sangat popular di seluruh rangkaian. Gaya mereka responsif dilihat di rangkaian sosial Tuenti y Twitter. Penggunaan ini menjimatkan banyak masa semasa mengembangkan aplikasi web kerana ini menjimatkan kita semua kerja dan usaha yang terlibat dalam membuat gaya halaman bersih yang sesuai untuk semua peranti. Dengan meninjau gaya yang digunakan dalam kerangka ini, kami akan menyedari bahawa mereka sudah biasa bagi kami, kerana hari ini banyak laman web telah menerapkannya.

Strukturnya

Agar laman web kami dapat diakses dari telefon bimbit dan tablet, kami harus menggunakan struktur cecair yang ditawarkan Bootstrap kepada kami. Penggunaan struktur ini sangat mudah, semuanya berdasarkan elemen span yang akan membantu kita susun atur reka bentuk laman web kami. Kemudian, apabila kita mengakses reka bentuk ini dari a telefon pintar o tablet, ini secara automatik akan menyesuaikan diri dengan peranti itu, meningkatkan kualiti navigasi. Kami akan menggunakan span dengan kelas dalam pembahagian logik dalam struktur bendalir, iaitu:

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

Di mana nombor 2 mewakili ukuran span. Setiap baris mengandungi ruang yang cukup untuk 12 rentang ukuran 1, atau 2 dari ukuran 6, ini dapat diedarkan sesuka hati. Setelah ruang baris dilebihi, ia akan turun ke baris berikutnya secara automatik, yang memungkinkan kita menggunakan span saiz 12 untuk membuat pemecahan garis. Sekiranya kita mahu melangkau beberapa span semasa membuatnya, iaitu bermula dari 4 span, dan menggunakan ukuran 3, kami akan menggunakan kod ini:

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

Ini membolehkan bahagian melonjak empat menjangkau sebelum memaparkan kandungannya. Kami boleh menggunakan ini dengan kehendak bebas, melangkau apa yang kami mahukan dengan kod kami.

Reka bentuk yang berbeza untuk setiap peranti

Untuk menerapkan reka bentuk yang berbeza untuk setiap jenis peranti, kami akan memberitahu setiap bahagian logik untuk peranti mana yang berorientasikannya, menggunakan kelas berikut:

Dengan cara ini, kita dapat menunjukkan reka bentuk yang sama sekali berbeza untuk setiap peranti dengan URL yang sama.

Butang

Bootstrap menawarkan repertoar butang berwarna yang bersih, penggunaannya sangat mudah:

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

di mana btn btn-success merujuk kepada warna butang, untuk mengubahnya, kita hanya perlu menggantinya dengan kelas yang ditunjukkan pada gambar sebelumnya.

Memasang Bootstrap

Untuk pemasangan rangka kerja CSS ini, kami akan memuat turun zip dari pautan yang akan saya tinggalkan di akhir catatan, dan kami akan menulis kod berikut di kepala fail 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 bahawa fail CSS dan JS berada dalam folder yang sama dengan fail HTML kami, kami dapat mulai merancang laman web responsif kami.

Maklumat lanjut - Pengesahan Borang

Muat turun - Bootstrap: Kerangka CSS