Czym jest Grid View?
Wiele stron są oparte na siatce-widzenia, co oznacza, że strona jest podzielona na kolumny:
Korzystanie z siatki-view jest bardzo pomocne przy projektowaniu stron internetowych. To sprawia, że łatwiej jest umieścić elementy na stronie.
Dostosowana do siatki widoku często posiada 12 kolumn i ma całkowitą szerokość 100% i będzie się kurczyć i rozszerzać podczas zmiany rozmiaru okna przeglądarki.
Budowanie Responsive Grid View
Zacznijmy budowanie elastyczne siatki-view.
Najpierw upewnić się, że wszystkie elementy HTML mają box-sizing nieruchomości ustawiony border-box . Daje to pewność, że padding i border są uwzględnione w całkowitej szerokości i wysokości elementów.
Dodaj następujący kod w swoim CSS:
* {
box-sizing: border-box;
}
Czytaj więcej o box-sizing nieruchomości w naszej CSS3 Box Dobór rozdziału.
Poniższy przykład pokazuje prosty czułe stronę internetową, z dwoma kolumnami:
Powyższy przykład jest w porządku, jeśli strona zawiera tylko dwie kolumny.
Chcemy jednak, aby użyć elastycznej siatki-view z 12 kolumnami, aby mieć większą kontrolę nad strony internetowej.
Najpierw musimy obliczyć procent dla jednej kolumny: 100% / 12 kolumn = 8.33%.
Następnie wykonujemy jedną klasę dla każdej z 12 kolumn, class="col-" i liczba określające ile kolumn sekcja powinna obejmować:
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%;} Spróbuj sam " Wszystkie kolumny te powinny być pływające po lewej, i mają dopełnienie 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} Każdy wiersz powinien być zawinięty w <div> . Liczba kolumn wewnątrz rzędzie należy zawsze sumują się do 12:
HTML:
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>Kolumny wewnątrz rzędu są przestawne w lewo, a zatem są wyjęte z przepływem strony, a inne elementy zostaną umieszczone, jeśli kolumny nie istnieje. Aby temu zapobiec, dodamy styl, który czyści przepływ:
CSS:
.row::after {
content: "";
clear: both;
display: block;
}Chcemy również dodać kilka stylów i kolorów, aby wyglądać lepiej:
Przykład
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;
} Spróbuj sam " Zauważ, że w tym przykładzie strona nie wygląda dobrze przy zmianie rozmiaru okna przeglądarki do bardzo małej szerokości. W następnym rozdziale dowiesz się, jak to naprawić.