Bootstrap elastycznego projektowania

krótkie wprowadzenie

Ten poradnik pokazuje, jak korzystać z elastycznego projektowania układu strony. W trakcie dowiesz Responsive Web Design. Z popularności urządzeń mobilnych, jak umożliwić użytkownikom przeglądanie urządzeń mobilnych do witryny, aby uzyskać dobre efekty wizualne, jest już nieodłącznym problemem. Responsive Web design jest skutecznym sposobem, aby osiągnąć ten cel.

Czym jest Responsive Web Design

Responsive Web design jest pozwalając użytkownikom na dostęp do różnych rozmiarów urządzeń do przeglądania witryny dobrą skuteczność wizualny. Na przykład, na monitorze komputera, które użytkownik odwiedza stronę internetową, a następnie przejdź na smartfony, inteligentny telefon jest rozmiar ekranu jest znacznie mniejsza niż monitor komputera, ale nie czuję żadnej różnicy pomiędzy doświadczenia użytkownika jest prawie taka sama, co wskazuje, że w miejscu w projektowaniu odpowiedzi ma dobrą pracę.

Mamy przykłady układu płynu z zastosowaniem wydajności reakcji i zaprasza do przeglądania w różnych rozmiarach ekranu. Można używać Chrome lub FireFox , aby dostosować ekspansję zmiany rozmiaru okna przeglądarki.

Kliknij tutaj, można zobaczyć Bootstrap przykłady reaguje projektowych .

Responsive Web Prace projektowe

Responsive Web Design w celu zastosowania, trzeba stworzyć gamę urządzeń do przystosowania się do rozmiaru CSS style dołączyć. Po załadowaniu strony na konkretnym urządzeniu, używać różnych czcionek na stronie i rozwoju technologii internetowych, takich jak zapytaniami mediów (media queries), tym razem, będzie pierwszym sprawdzianem wielkości rzutni urządzenia, a następnie ładuje urządzenie specyficzny styl.

Badanie Głębokość Responsive Web Design CSS

Będziemy "bootstrap-responsive.css" nauczenie się "responsive design" jest osiągnięcie niuans. Wcześniej należy dodać następujący wiersz kodu w obszarze nagłówka strony:

 <Meta name = "rzutni" content = "width = device-width, initial-scale = 1.0"> 

rzutnia tag, przesłania domyślny rzutnię i pomóc załadować określony styl związany rzutnię.

Szerokość nieruchomość do szerokości ekranu. Zawiera wartości, takie jak 320, reprezentuje 320 pikseli lub wartość 'device-width', używany powiedzieć przeglądarkę wykorzystać oryginalną rozdzielczość.

Obiekt początkowa skala jest stosunek początkowego rzutni. Przy ustawieniu 1,0 urządzenie pokazują pierwotnej szerokości.

Oczywiście, należy dodać Bootstrap Responsive CSS, co następuje:

 <Link href = "aktywa / css / bootstrap-responsive.css" rel = "stylesheet"> 

Teraz, jeśli okaże się, czułe plik CSS, można zauważyć, że w niektórych wypowiedziach publicznych tyłu (z numerem linii 10-22), do różnych powierzchni '@media "zaczęło. W ten sposób zapisu styl odpowiedni dla różnych urządzeń.

Pierwszy obszar do '@media (max-width: 480px ) " zaczęło się od maksymalnej szerokości 480 pikseli stylu ustawieniach urządzenia.

Drugi obszar do '@media (max-width: 767px ) " zaczęło się od maksymalnej szerokości 767 pikseli stylu ustawieniach urządzenia.

Trzeci obszar "@media (min-width: 768px ) oraz (max-width: 979px)" rozpoczęła minimalnej szerokości 768 pikseli i maksymalnej szerokości 979 pikseli stylu ustawieniach urządzenia.

Kolejnym obszarem jest maksymalna szerokość stylu ustawień urządzenia 979 pikseli. Więc to jest "@media (max-width: 979px )" zacząć.

Ostatnie dwa obszary, odpowiednio "@media (min-width: 980px ) ' i' @media (min-width: 1200 pikseli )" początek, zanim urządzenie zostanie ustawione na szerokości nie mniejszej niż 980 pikseli w stylu, ten ostatni jest najmniejsza szerokość ustawić styl dla urządzenia 1200 pikseli.

Dlatego podstawowym zadaniem tego arkusza stylów jest za pomocą 'min-width' i 'max-width' właściwość, aby określić styl używany zgodnie z maksymalnej szerokości i minimalnej szerokości urządzenia.

wyjaśnienie

W celu uczynienia układ czułe Bootstrap zrobić trzy rzeczy:

1. Modyfikacja szerokości kolumn w siatce.

2. Tak długo jak potrzeba, to wykorzystuje elementy stosu, a nie elementów pływających. Jeśli nie wiesz, co jest elementem stosu, następujące formularze z w3.org może zapewnić jakąś pomoc:

Element główny (HTML), aby utworzyć kontekst główny komin, druga generacja kontekst stosu (w tym elementów pozycjonowanych relatywnie nie jest "z-index 'obliczono wartość zamiast' auto ') za pomocą dowolnego elementu pozycjonującego. Kontekst stosu w stosunku do bloku nie zawiera wymagane.

3. Aby poprawnie renderować tytuł i treść ich wielkości.

Szybszy rozwój dla urządzeń mobilnych obsłudze układ

Bootstrap klasa ma kilka przydatnych dla rozwoju mobilnego przyjaznego układu. Klasy te mogą być widoczne w 'responsive.less' na.

.Visible Właściwość ta-phone, szerokość 767px i mniej widoczne na telefon, na 979px na 768px Tablet zasłaniany, ukryte z pulpitu, co jest wartością domyślną.

.Visible Właściwość ta tabletka, szerokość 767px i poniżej ukryty telefon komórkowy nie jest widoczny, 979px na 768px widoczne na talerzu, nie jest widoczny na pulpicie, aby ukryć, która jest wartością domyślną.

.Visible Właściwość ta-desktop, ukryty na szerokości 767px i poniżej telefon nie jest widoczny, ukryty na 979px na 768px Tablet niewidzialnego, widoczny na pulpicie, który jest domyślnym.

.hidden-phone, szerokość 767px i ukryć w następnym telefonie nie jest widoczny, na 979px na 768px Tablet widoczne, widoczne na pulpicie, który jest domyślnym.

.hidden-tabletki, szerokość 767px i mniej widoczne na telefon, na Tablet 979px na 768px ukrytych niewidzialne, widoczne na pulpicie, który jest domyślnym.

.hidden-desktop, przy szerokości 767px i poniżej widoczności telefonu na 979px na 768px Tablet widoczny, ukryty na pulpicie, który jest domyślnym.

Kliknij tutaj, aby pobrać poradnik do używania przez cały HTML, CSS, JS i plików graficznych.