Bootstrap Przegląd CSS
W tym rozdziale omówimy pod spodem konstrukcji kluczowego części Bootstrap, w tym nasi developerzy zrobić lepiej, szybciej, mocniej najlepszych praktyk.
HTML 5 doctype (Doctype)
Bootstrap wykorzystuje niektóre elementy HTML5 i właściwości CSS. Aby to do pracy, trzeba użyć odpowiedniego typu dokumentu (DOCTYPE HTML5). A zatem, na początku do zastosowania projektu Bootstrap zawiera następujące segmentu kodu.
<!DOCTYPE html> <html> .... </html>
Jeśli na początku strony w Bootstrap utworzonego nie używa HTML5 typ dokumentu (DOCTYPE), można napotkać przeglądarki wyświetlają problemy niespójności, które mogą nawet napotkać pewne sytuacje wynikające niespójne, które nie mogą przejść walidację W3C standardowy w kodzie ,
Urządzenie mobilne priorytetem
Urządzenia mobilne priorytetem jest najbardziej znacząca zmiana w Bootstrap 3.
W poprzednich wersjach Bootstrap (do 2.x), trzeba ręcznie zacytować inny CSS, aby cały projekt przyjazne wsparcie dla urządzeń mobilnych.
Już nie, Bootstrap 3 domyślny sam CSS jest przyjazne wsparcie dla urządzeń mobilnych.
Bootstrap 3 przeznaczony jest priorytet urządzenia mobilnego, a następnie na pulpicie. To jest rzeczywiście bardzo aktualne zmiany, gdyż coraz więcej osób korzysta z urządzeń mobilnych.
Aby internetowej Bootstrap rozwoju przyjaznych dla urządzeń przenośnych w celu zapewnienia właściwego świadczenia i powiększania ekranu dotykowego, trzeba dodać tagi meta rzutnia do głowy strony, w sposób następujący:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Właściwość width Szerokość urządzenia sterującego. Załóżmy, że Twoja strona będzie za pomocą różnych urządzeń rozdzielczości ekranu do przeglądania, a następnie ustawić go do szerokości urządzenia, aby zapewnić, że renderuje poprawnie na różnych urządzeniach.
Początkowy skalę = 1,0, aby zapewnić obciążenia strony, stosunek 1: 1 prezentacji nie będzie skalowania.
W przeglądarce urządzenia mobilnego poprzez dodanie użytkownika skalowalne = no dla rzutni tag wyłączyć jego skalowania (powiększanie) funkcję.
Zazwyczaj maksymalna skala = 1.0 i łatwy skalowalne = no razem. Następnie funkcja zoomu jest wyłączona, użytkownik może przewinąć ekran, można zrobić własną stronę wyglądają bardziej jak native czuć aplikacji.
Należy zauważyć, że w ten sposób nie zalecamy korzystanie ze wszystkich stron, będzie zależeć od indywidualnych okoliczności!
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
responsive obrazu
<img src="..." class="img-responsive" alt="响应式图像">
Dodając img reagujący klasy Bootstrap 3 pozwala na zdjęcie, aby wspierać reagujący układ, który jest bardziej przyjazny.
Spójrzmy na to, co klasa ta zawiera właściwość CSS.
W poniższym kodzie, można zobaczyć obraz img reagujący klasy daje max-width: 100%; i wysokość: auto; nieruchomość może być skalowane, tak aby obraz nie przekracza wielkości elementu nadrzędnego.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
Oznacza to, że wiąże się obraz wyświetlany jako inline-block. Po ustawieniu właściwości wyświetlania elementu jest inline-block, inline elementem w odniesieniu do zawartości formie prezentacji wokół niego, ale z tą różnicą, inline jest, że w tym przypadku możemy ustawić szerokość i wysokość.
Wysokość Otoczenie: Wysokość auto, powiązanych elementów zależy od przeglądarki.
Ustaw max-width jest w 100% zastępuje dowolną szerokość określoną przez właściwość width. Pozwala zdjęcia wspierać reagujący układ, który jest bardziej przyjazny.
Globalny wyświetlacz, układ i linki
Podstawowe globalne wyświetlacz
Bootstrap 3 używając body {margin: 0;}, aby zabrać ciało marże.
Rozważmy następujące ustawienia dla organizmu:
body {
font-family: "Neue Helvetica", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1,428571429;
color: # 333333;
background-color: #ffffff;
}
Pierwsza zasada, aby ustawić domyślny styl czcionki dla ciała "Neue Helvetica", Helvetica, Arial , sans-serif.
Druga zasada tekście domyślny rozmiar czcionki 14 pikseli.
Trzecią zasadą jest, aby ustawić wysokość domyślny wiersz jest 1,428571429.
Czwarta reguła ustawia domyślny kolor tekstu na # 333333.
Zasada Finał ustawia domyślny kolor tła jest biały.
Skład
Użyj @ font-family-base, @ font-size-zasadowej i mienia @ line-height-zasadowej w typografii.
Styl link
Ustaw kolor przez Global Property podnośnik @ link-kolorze.
Domyślny styl dla łącza następujące ustawienia:
a: hover
A: {ostrości
color: # 2a6496;
text-decoration: podkreślenia;
}
A: {ostrości
Outline: cienka przerywana # 333;
Zarys: 5px auto-focus -webkit-ring-color;
outline-offset: -2px;
}
Tak więc, gdy kursor myszy znajdzie się nad link lub linki kliknięciu, kolor jest ustawiony na # 2a6496. W tym samym czasie, nie będzie podkreślenia.
Ponadto linki kliknięciu, pojawi się kod koloru za cienką przerywaną zarys # 333. Kolejną zasadą jest, aby ustawić szkic do 5 pikseli szerokości, a dla przeglądarki WebKit oparte ma rozszerzenia przeglądarki -webkit-focus-ring-kolorów. Kontur nastawy wynosi -2 pikseli.
Każdy z tych stylów można znaleźć w scaffolding.less.
Unikaj nieścisłości różnych przeglądarkach
Bootstrap używać Normalizuj budować spójność różnych przeglądarkach.
Normalize.css to mały plik CSS, który zapewnia lepszą spójność różnych przeglądarkach w elementach HTML domyślny styl.
Pojemnik (Container)
<div class="container"> ... </div>
Klasa Bootstrap 3 za treści na stronie opakowania pojemnika. Rzućmy okiem na ten plik klasy bootstrap.css .container.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Dzięki powyższym kodem, lewy i prawy margines kontenera (margin-right, margin-left) postanowił przez przeglądarkę.
Należy pamiętać, że ze względu na padding (padding) są stałej szerokości, pojemniki domyślne nie mogą być zagnieżdżone.
.container: przed,
.container: after {
Wyświetlacz: Stół;
content: "";
}
Generuje to pseudo-elementy. Ustawienie tabeli wyświetlacza, stworzy anonimowe table-cell i nowy kontekst formatowania blokowego. : Przed pseudo-elementu, aby zapobiec upadkowi marginesu ,: po pseudoelementów wyczyścić pływak.
Jeśli atrybut conteneditable pojawia się w kodzie HTML, ponieważ niektóre z błędów Opera, stworzyć przestrzeń wokół tych elementów. Można to zrobić za pomocą zawartości: "" do naprawy.
.container: after {
clear: both;
}
Tworzy pseudoelement i zapewnia, że wszystkie pływającego statku, który zawiera wszystkie elementy.
Bootstrap 3 CSS ma aplikację w odpowiedzi na zapytania mediów, zapytań o media w różnych wartości progowych są ustawione max-width do pojemnika, w celu dostosowania istniejącej sieci energetycznej.
@media (min-width: 768px) {
.container {
width: 750px;
}
Bootstrap Przeglądarka / Device Support
Bootstrap może pracować również w najnowszym stacjonarnych i mobilnych terminali przeglądarce.
Starsze przeglądarki mogą nie być dobrze obsługiwane.
Poniższa tabela Bootstrap obsługują najnowsze wersje przeglądarek i platform:
| chrom | Firefox | IE | opera | safari | |
|---|---|---|---|---|---|
| android | TAK | TAK | nie dotyczy | NIE | nie dotyczy |
| iOS | TAK | nie dotyczy | nie dotyczy | NIE | TAK |
| Mac OS X | TAK | TAK | nie dotyczy | TAK | TAK |
| Okna | TAK | TAK | TAK * | TAK | NIE |
* Wsparcie Bootstrap dla programu Internet Explorer 8 i nowszych wersjach IE.