Bir Izgara-View nedir?
Pek çok web sayfaları sayfa sütun ayrılmıştır anlamına gelir ızgara-view dayanmaktadır:
web sayfalarını tasarlarken bir şebekeye görünümü kullanmak çok yararlıdır. Bu daha kolay sayfadaki öğeleri yerleştirmek kolaylaştırır.
Duyarlı ızgara görünümlü genellikle 12 sütun ve% 100'lük bir toplam genişliğe sahiptir ve tarayıcı penceresini yeniden boyutlandırmak olarak küçültmek ve genişleyecektir.
Duyarlı Izgara-Görünüm Bina
Duyarlı bir ızgara-görünümü oluşturmaya başlayalım.
Öncelikle HTML öğeleri olmasını sağlamak box-sizing ayarlı özelliği border-box . Bu vatka ve kenar elemanlarının toplam genişliği ve yüksekliği dahil olmasını sağlar.
CSS'nizde aşağıdaki kodu ekleyin:
* {
box-sizing: border-box;
}
Hakkında daha fazlasını okuyun box-sizing bizim mülkiyet CSS3 Kutu Boyutlandırma bölüm.
Aşağıdaki örnek, iki sütunlu basit duyarlı web sayfasını gösterir:
web sayfası sadece iki sütun içeriyorsa Yukarıdaki örnekte gayet iyi.
Ancak, web sayfası üzerinde daha fazla kontrol sahibi olmak, 12 sütunlu bir tepki ızgara-görünümünü kullanmak istiyorum.
% 100/12 sütun =% 8.33: Öncelikle bir sütun yüzdesini hesaplamak gerekir.
Sonra 12 sütunların her biri için bir sınıf oluşturun, class="col-" ve bölüm yayılan kaç sütun tanımlayan bir sayı:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;} Kendin dene " Bütün bu sütunlar sola yüzen olabilir ve 15px bir dolgu olması gerekir:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} Her satır bir sarılmış edilmelidir <div> . Bir satır içinde sütun sayısı her zaman 12 eşit olmalıdır:
HTML:
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>Bir satır içinde sütunları, tüm sola yüzen ve bu nedenle sayfanın akışının dışına alınır ve diğer unsurlar sütunları yoksa olarak yerleştirilecektir. Bunu engellemek için, biz akışını temizler bir stil katacak:
CSS:
.row::after {
content: "";
clear: both;
display: block;
}Biz de daha iyi görünmesi için bazı stilleri ve renkleri eklemek istiyorum:
Örnek
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
} Kendin dene " Eğer çok küçük bir genişliğe tarayıcı penceresini yeniden boyutlandırmak Örneğin web sayfası iyi görünmüyor dikkat edin. Bir sonraki bölümde bunu düzeltmek için öğreneceksiniz.