Bootstrap 2.3.2: Başlangıç ​​Kılavuzu

Bootstrap bir CSS çerçevesi tüm ağda çok popüler hale geldi. Stilleri duyarlı sosyal ağlarda görülüyor Tuenti y Twitter. Bunun kullanılması, bir web uygulaması geliştirirken bize çok zaman kazandırır, çünkü tüm cihazlara uygun temiz bir sayfa stili oluşturmak için gereken tüm çalışma ve çabadan tasarruf etmemizi sağlar. Bu çerçevede kullanılan stillere baktığımızda, bugün birçok web sitesi bunu uyguladığı için bize tanıdık geldiklerini anlayacağız.

Yapı

Web sitemizin cep telefonlarından ve tabletlerden erişilebilir olması için Bootstrap'in bize sunduğu akışkan yapıyı kullanmamız gerekecek. Bu yapının kullanımı çok basit, her şey elementlere dayanıyor karış bu bize yardımcı olacak Yerleşim web tasarımımız. Daha sonra bu tasarıma bir akıllı telefon o tabletbu, söz konusu cihaza otomatik olarak adapte olacak ve navigasyon kalitesini önemli ölçüde artıracaktır. Kullanacağız karış akışkan yapısı içindeki mantıksal bölümlerdeki sınıflarla, yani:

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

2 sayısının açıklığın boyutunu temsil ettiği yer. Her sıra, 12 boyut 1 veya 2 boyut 6 için yeterli alan içerir, bu istediğiniz gibi dağıtılabilir. Bir satırın alanı aşıldığında, bir sonraki satıra otomatik olarak inecek ve bize bir karış satır sonu oluşturmak için boyut 12. Bazılarını atlamak istersek karış bir tane oluştururken, yani 4'ten başlayın karışve 3 boyutunu uygularsak bu kodu kullanırız:

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

Bu, bölümün dört atlamasına izin verir açıklıklı içeriği görüntülemeden önce. Bunu özgür irademizle kullanabiliriz, kodumuzla istediğimizi atlayabiliriz.

Her cihaz için farklı tasarım

Her cihaz türü için farklı bir tasarım uygulamak için, aşağıdaki sınıfları kullanarak her bir mantıksal bölüme hangi cihaz için yönlendirildiğini söyleyeceğiz:

Bu sayede aynı URL'ye sahip her cihaz için tamamen farklı bir tasarım gösterebiliyoruz.

düğmeler

Bootstrap bize temiz bir renkli düğmeler repertuvarı sunuyor, kullanımı çok basit:

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

nerede btn btn-success düğmenin rengine atıfta bulunur, onu değiştirmek için onu yalnızca önceki resimde gösterilen sınıflarla değiştirmemiz gerekir.

Bootstrap Kurulumu

Bu CSS çerçevesinin kurulumu için gönderinin sonunda bırakacağım linkten zip dosyasını indirip aşağıdaki kodu yazacağız. HTML dosyamızın başında.

<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>

CSS ve JS dosyalarının HTML dosyamızla aynı klasörde olduğundan emin olduktan sonra, duyarlı web sitemizi tasarlamaya başlayabiliriz.

Daha fazla bilgi - Form Doğrulama

İndir - Önyükleme: CSS Çerçevesi