Bootstrap 3 Przegląd CSS
cel
W tym poradniku, omówiliśmy Bootstrap 3 punkty CSS. Dalej będziemy wyjaśniać Bootstrap 3 pracuje kilka kluczowych czynników.
HTML 5 doctype (Doctype)
Bootstrap 3 stosowane pewne elementy HTML5 i atrybutów CSS. Aby to do pracy, trzeba użyć odpowiedniego typu dokumentu (DOCTYPE HTML5).
<! DOCTYPE html> <Html lang = "pl"> ... </ 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
Jest to prawdopodobnie najbardziej znacząca zmiana w Bootstrap 3. W poprzednich wersjach Bootstrap (do 2.x), trzeba ręcznie zacytować inny CSS, aby uczynić ten projekt wraz z głównym urządzeniem mobilnym w obsłudze CSS. Już nie, Bootstrap 3 domyślny sam CSS jest urządzenie mobilne obsłudze.
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 = "rzutni" 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 upewnić się, że czyni słusznie 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, a zależy na własnych warunkach!
responsive obrazu
Dodając img reagujący klasę pozwala Bootstrap 3 zdjęć w celu wspierania reagujący układ, który jest bardziej przyjazny. Spójrzmy na to, co zawiera ta klasa własności CSS. Jego istotą jest, aby dać obraz max-width: 100%; oraz height: auto; właściwość umożliwia skalowanie obrazu, nie przekracza wielkości elementu nadrzędnego.
.img reagujący {
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
Bootstrap 3 używając body {margin: 0;}, aby zabrać ciało marże.
Rozważmy następujący zestaw właściwego organu
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.
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 3, podobnie jak jego poprzedniej wersji, należy użyć Normalizuj, w celu stworzenia spójności międzysektorowej przeglądarki.
pojemnik
Klasa Bootstrap 3 za treści na stronie opakowania pojemnika. Rzućmy okiem na następujące klasy
.container {
margin-right: auto;
margin-left: auto;
}
Dzięki powyższym kodem, lewy i prawy margines pojemnika przez przeglądarkę zdecydować.
.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.