Ściągnij

Bootstrap (obecnie v3.4.1) ma kilka łatwych sposobów na szybkie rozpoczęcie pracy, z których każdy jest apelowany do innego poziomu umiejętności i przypadku użycia. Czytaj dalej, aby zobaczyć, co odpowiada Twoim konkretnym potrzebom.

jsDelivr

Ludzie z jsDelivr łaskawie zapewniają wsparcie CDN dla CSS i JavaScript Bootstrap. Po prostu użyj tych linków jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Zainstaluj za pomocą Bowera

Możesz także zainstalować i zarządzać plikami Bootstrap's Less, CSS, JavaScript i fontami za pomocą Bower :

bower install bootstrap

Zainstaluj za pomocą npm

Możesz także zainstalować Bootstrap za pomocą npm :

npm install bootstrap@3

require('bootstrap')załaduje wszystkie wtyczki jQuery Bootstrap do obiektu jQuery. Sam bootstrapmoduł niczego nie eksportuje. Możesz ręcznie ładować wtyczki Bootstrap jQuery indywidualnie, ładując /js/*.jspliki do katalogu najwyższego poziomu pakietu.

Bootstrap package.jsonzawiera dodatkowe metadane pod następującymi kluczami:

• less- ścieżka do głównego pliku źródłowego Less Bootstrapa
• style- ścieżka do niezminifikowanego CSS Bootstrapa, który został wstępnie skompilowany przy użyciu ustawień domyślnych (bez dostosowywania)

Zainstaluj z Composer

Możesz także zainstalować i zarządzać plikami Bootstrap's Less, CSS, JavaScript i fontami za pomocą Composer :

composer require twbs/bootstrap

Wymagany autoprefiks dla Less/Sass

Bootstrap używa Autoprefixera do obsługi prefiksów dostawców CSS . Jeśli kompilujesz Bootstrap z jego źródła Less/Sass i nie używasz naszego pliku Grunt, musisz samodzielnie zintegrować Autoprefixer z procesem kompilacji. Jeśli używasz prekompilowanego Bootstrapa lub używasz naszego pliku Gruntfile, nie musisz się tym martwić, ponieważ Autoprefixer jest już zintegrowany z naszym Gruntfile.

Co jest zawarte

Bootstrap jest dostępny do pobrania w dwóch formach, w których znajdziesz następujące katalogi i pliki, logicznie grupujące wspólne zasoby i udostępniające zarówno skompilowane, jak i zminimalizowane odmiany.

Prekompilowany Bootstrap

Po pobraniu rozpakuj skompresowany folder, aby zobaczyć strukturę (skompilowanego) Bootstrapa. Zobaczysz coś takiego:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Jest to najbardziej podstawowa forma Bootstrapa: wstępnie skompilowane pliki do szybkiego użycia w prawie każdym projekcie internetowym. Dostarczamy skompilowane CSS i JS ( bootstrap.*), a także skompilowane i zminimalizowane CSS i JS ( bootstrap.min.*). Mapy źródłowe CSS ( bootstrap.*.map) są dostępne do użytku z niektórymi narzędziami programistycznymi przeglądarek. Dołączone są czcionki z Glyphicons, podobnie jak opcjonalny motyw Bootstrap.

Kod źródłowy Bootstrapa

Pobrany kod źródłowy Bootstrap zawiera wstępnie skompilowane zasoby CSS, JavaScript i czcionek, wraz z kodem źródłowym Less, JavaScript i dokumentacją. Mówiąc dokładniej, obejmuje następujące i nie tylko:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, less/i js/to fonts/kod źródłowy naszych czcionek CSS, JS i ikon (odpowiednio). Folder zawiera wszystko , dist/co znajduje się w powyższej sekcji prekompilowanego pobierania. docs/Folder zawiera kod źródłowy naszej dokumentacji i użycia examples/Bootstrap. Poza tym każdy inny dołączony plik zapewnia obsługę pakietów, informacji licencyjnych i rozwoju.

Kompilowanie CSS i JavaScript

Bootstrap używa Grunt do swojego systemu kompilacji, z wygodnymi metodami pracy z frameworkiem. W ten sposób kompilujemy nasz kod, uruchamiamy testy i nie tylko.

Instalowanie Grunta

Aby zainstalować Grunt, musisz najpierw pobrać i zainstalować node.js (w tym npm). npm oznacza moduły w pakietach węzłów i jest sposobem na zarządzanie zależnościami programistycznymi za pośrednictwem node.js.

1. Zainstaluj grunt-cliglobalnie za pomocą npm install -g grunt-cli.
2. Przejdź do /bootstrap/katalogu głównego, a następnie uruchom npm install. npm sprawdzi package.jsonplik i automatycznie zainstaluje wymienione tam niezbędne zależności lokalne.

Po zakończeniu będziesz mógł uruchamiać różne polecenia Grunt dostarczane z wiersza poleceń.

Dostępne polecenia Grunt

grunt dist(Wystarczy skompilować CSS i JavaScript)

Regeneruje /dist/katalog ze skompilowanymi i zminimalizowanymi plikami CSS i JavaScript. Jako użytkownik Bootstrap zwykle jest to polecenie, którego potrzebujesz.

grunt watch(Zegarek)

Obserwuje pliki źródłowe Less i automatycznie rekompiluje je do CSS za każdym razem, gdy zapisujesz zmianę.

grunt test(Uruchom testy)

Uruchamia JSHint i uruchamia testy QUnit w prawdziwych przeglądarkach dzięki Karmie .

grunt docs(Tworzenie i testowanie zasobów dokumentów)

Buduje i testuje CSS, JavaScript i inne zasoby, które są używane podczas lokalnego uruchamiania dokumentacji przez bundle exec jekyll serve.

grunt(Zbuduj absolutnie wszystko i uruchom testy)

Kompiluje i minifikuje CSS i JavaScript, tworzy witrynę z dokumentacją, uruchamia walidator HTML5 w odniesieniu do dokumentów, ponownie generuje zasoby narzędzia Customizer i nie tylko. Wymaga Jekylla . Zwykle jest to konieczne tylko wtedy, gdy hakujesz sam Bootstrap.

Rozwiązywanie problemów

W przypadku problemów z instalowaniem zależności lub uruchamianiem poleceń Grunta należy najpierw usunąć /node_modules/katalog wygenerowany przez npm. Następnie uruchom ponownie npm install.

Szablon podstawowy

Zacznij od tego podstawowego szablonu HTML lub zmodyfikuj te przykłady . Mamy nadzieję, że dostosujesz nasze szablony i przykłady, dostosowując je do swoich potrzeb.

Skopiuj poniższy kod HTML, aby rozpocząć pracę z minimalnym dokumentem Bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Przykłady

Zbuduj na powyższym podstawowym szablonie z wieloma komponentami Bootstrapa. Zachęcamy do dostosowywania i dostosowywania Bootstrapa do indywidualnych potrzeb Twojego projektu.

Pobierz kod źródłowy dla każdego poniższego przykładu, pobierając repozytorium Bootstrap . Przykłady można znaleźć w docs/examples/katalogu.

Korzystanie z ram

Szablon startowy

Tylko podstawy: skompilowany CSS i JavaScript wraz z kontenerem.

Motyw Bootstrap

Załaduj opcjonalny motyw Bootstrap, aby uzyskać lepsze wrażenia wizualne.

Siatki

Wiele przykładów układów siatki ze wszystkimi czterema warstwami, zagnieżdżaniem i nie tylko.

Jumbotron

Buduj wokół jumbotronu za pomocą paska nawigacyjnego i kilku podstawowych kolumn siatki.

Wąski jumbotron

Stwórz bardziej niestandardową stronę, zawężając domyślny kontener i jumbotron.

Navbary w akcji

Pasek nawigacyjny

Super podstawowy szablon, który zawiera pasek nawigacyjny wraz z dodatkową zawartością.

Statyczny górny pasek nawigacyjny

Super podstawowy szablon ze statycznym górnym paskiem nawigacyjnym wraz z dodatkową zawartością.

Naprawiono pasek nawigacyjny

Super podstawowy szablon ze stałym górnym paskiem nawigacyjnym wraz z dodatkową zawartością.

Komponenty niestandardowe

Pokrywa

Jednostronicowy szablon do tworzenia prostych i pięknych stron głównych.

Karuzela

Dostosuj pasek nawigacyjny i karuzelę, a następnie dodaj nowe komponenty.

Blog

Prosty dwukolumnowy układ bloga z niestandardową nawigacją, nagłówkiem i typem.

Panel

Podstawowa struktura pulpitu administracyjnego ze stałym paskiem bocznym i paskiem nawigacyjnym.

Strona logowania

Niestandardowy układ i projekt formularza dla prostego formularza logowania.

Uzasadniona nawigacja

Utwórz niestandardowy pasek nawigacyjny z wyjustowanymi łączami. Heads-up! Niezbyt przyjazny Safari.

Przyklejona stopka

Dołącz stopkę na dole rzutni, gdy zawartość jest od niej krótsza.

Przyklejona stopka z paskiem nawigacyjnym

Dołącz stopkę na dole rzutni ze stałym paskiem nawigacyjnym u góry.

Eksperymenty

Niereagujący Bootstrap

Łatwo wyłącz responsywność Bootstrap w naszych dokumentach .

Poza płótnem

Zbuduj przełączalne menu nawigacyjne poza kanwą do użytku z Bootstrapem.

Narzędzia

Bootlint

Bootlint jest oficjalnym narzędziem Linter Bootstrap HTML. Automatycznie sprawdza kilka typowych błędów HTML na stronach internetowych, które używają Bootstrap w dość "waniliowy" sposób. Komponenty/widgety Vanilla Bootstrap wymagają, aby ich części DOM były zgodne z określonymi strukturami. Bootlint sprawdza, czy instancje składników Bootstrap mają poprawną strukturę HTML. Rozważ dodanie Bootlint do swojego łańcucha narzędzi programistycznych Bootstrap, aby żaden z typowych błędów nie spowolnił rozwoju twojego projektu.

Wspólnota

Bądź na bieżąco z rozwojem Bootstrap i skontaktuj się ze społecznością dzięki tym pomocnym zasobom.

• Przeczytaj i zasubskrybuj Oficjalny blog Bootstrap .
• Rozmawiaj z innymi Bootstrapperami używając IRC na irc.freenode.netserwerze, na kanale ##bootstrap .
• Aby uzyskać pomoc dotyczącą Bootstrap, poproś na StackOverflow za pomocą tagutwitter-bootstrap-3 .
• Deweloperzy powinni używać słowa kluczowego bootstrapw pakietach, które modyfikują lub zwiększają funkcjonalność Bootstrap podczas dystrybucji za pośrednictwem npm lub podobnych mechanizmów dostarczania, aby zapewnić maksymalną wykrywalność.
• Znajdź inspirujące przykłady ludzi budujących z Bootstrap na Bootstrap Expo .

Możesz także śledzić @getbootstrap na Twitterze , aby otrzymywać najnowsze plotki i niesamowite teledyski.

Wyłączanie responsywności

Bootstrap automatycznie dostosowuje strony do różnych rozmiarów ekranu. Poniżej opisano, jak wyłączyć tę funkcję, aby Twoja strona działała jak w tym przykładzie bez responsywności .

Kroki, aby wyłączyć responsywność strony

1. Pomiń widoczny obszar <meta>wymieniony w dokumentacji CSS
2. Zastąp widthna .containerdla każdej warstwy siatki pojedynczą szerokość, na przykład width: 970px !important;Upewnij się, że następuje to po domyślnym CSS Bootstrap. Możesz opcjonalnie uniknąć !importantz zapytaniami o media lub niektórymi selektorami-fu.
3. Jeśli używasz pasków nawigacyjnych, usuń wszystkie zachowania związane z zwijaniem i rozwijaniem pasków nawigacyjnych.
4. W przypadku układów siatek używaj .col-xs-*klas dodatkowo lub zamiast średnich/dużych. Nie martw się, siatka bardzo małego urządzenia skaluje się do wszystkich rozdzielczości.

Nadal będziesz potrzebować Respond.js dla IE8 (ponieważ nasze zapytania o media nadal istnieją i muszą zostać przetworzone). Powoduje to wyłączenie aspektów Bootstrap „witryny mobilnej”.

Szablon Bootstrap z wyłączoną responsywnością

Zastosowaliśmy te kroki na przykładzie. Przeczytaj jego kod źródłowy, aby zobaczyć wprowadzone zmiany.

Zobacz przykład niereagujący

Obsługa przeglądarek i urządzeń

Bootstrap działa najlepiej w najnowszych przeglądarkach stacjonarnych i mobilnych, co oznacza, że ​​starsze przeglądarki mogą wyświetlać renderowanie niektórych komponentów w innym stylu, ale w pełni funkcjonalne.

Obsługiwane przeglądarki

W szczególności obsługujemy najnowsze wersje następujących przeglądarek i platform.

Alternatywne przeglądarki korzystające z najnowszej wersji WebKit, Blink lub Gecko, bezpośrednio lub za pośrednictwem interfejsu API widoku internetowego platformy, nie są wyraźnie obsługiwane. Jednak Bootstrap powinien (w większości przypadków) wyświetlać się i działać poprawnie również w tych przeglądarkach. Bardziej szczegółowe informacje dotyczące pomocy znajdują się poniżej.

Urządzenia mobilne

Ogólnie rzecz biorąc, Bootstrap obsługuje najnowsze wersje domyślnych przeglądarek każdej z głównych platform. Pamiętaj, że przeglądarki proxy (takie jak Opera Mini, tryb Turbo Opera Mobile, UC Browser Mini, Amazon Silk) nie są obsługiwane.

Przeglądarki komputerowe

Podobnie obsługiwane są najnowsze wersje większości przeglądarek komputerowych.

W systemie Windows obsługujemy Internet Explorer 8-11 .

W przypadku przeglądarki Firefox, poza najnowszą normalną stabilną wersją, obsługujemy również najnowszą wersję programu Firefox Extended Support Release (ESR) .

Nieoficjalnie Bootstrap powinien wyglądać i zachowywać się wystarczająco dobrze w Chromium i Chrome dla Linuksa, Firefoksie dla Linuksa i Internet Explorerze 7, a także Microsoft Edge, chociaż nie są one oficjalnie obsługiwane.

Aby zapoznać się z listą niektórych błędów przeglądarki, z którymi musi się zmagać Bootstrap, zapoznaj się z naszą ścianą błędów przeglądarki .

Internet Explorer 8 i 9

Obsługiwane są również Internet Explorer 8 i 9, jednak należy pamiętać, że niektóre właściwości CSS3 i elementy HTML5 nie są w pełni obsługiwane przez te przeglądarki. Ponadto Internet Explorer 8 wymaga użycia Respond.js w celu włączenia obsługi zapytań o media.

Odwiedź stronę Czy mogę użyć..., aby uzyskać szczegółowe informacje na temat obsługi przez przeglądarkę funkcji CSS3 i HTML5.

Internet Explorer 8 i Respond.js

Podczas korzystania z Respond.js w środowiskach programistycznych i produkcyjnych programu Internet Explorer 8 należy mieć na uwadze następujące zastrzeżenia.

Respond.js i międzydomenowy CSS

Korzystanie z Respond.js z CSS hostowanym w innej (sub)domenie (na przykład w sieci CDN) wymaga dodatkowej konfiguracji. Szczegóły znajdziesz w dokumentacji Respond.js .

Respond.js ifile://

Ze względu na reguły bezpieczeństwa przeglądarki, Respond.js nie działa ze stronami przeglądanymi za pośrednictwem file://protokołu (np. podczas otwierania lokalnego pliku HTML). Aby przetestować responsywne funkcje w IE8, przeglądaj swoje strony przez HTTP(S). Szczegóły znajdziesz w dokumentacji Respond.js .

Respond.js i@import

Respond.js nie działa z CSS, do którego odwołuje się @import. W szczególności, niektóre konfiguracje Drupala są znane z używania @import. Szczegóły znajdziesz w dokumentacji Respond.js .

Internet Explorer 8 i rozmiar pudełka

IE8 nie obsługuje w pełni box-sizing: border-box;w połączeniu z min-width, max-width, min-heightlub max-height. Z tego powodu od wersji 3.0.1 nie używamy już max-widthna .containers.

Internet Explorer 8 i @font-face

IE8 ma pewne problemy w @font-facepołączeniu z :before. Bootstrap używa tej kombinacji ze swoimi Glyphiconami. Jeśli strona jest buforowana i ładowana bez wskaźnika myszy nad oknem (tj. naciśnij przycisk odświeżania lub załaduj coś w iframe), strona zostanie wyrenderowana przed załadowaniem czcionki. Najechanie kursorem na stronę (treść) pokaże niektóre ikony, a najechanie na pozostałe ikony również je pokaże. Zobacz numer #13863 , aby uzyskać szczegółowe informacje.

Tryby zgodności z IE

Bootstrap nie jest obsługiwany w starych trybach zgodności programu Internet Explorer. Aby mieć pewność, że korzystasz z najnowszego trybu renderowania dla IE, rozważ umieszczenie odpowiedniego <meta>tagu na swoich stronach:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Potwierdź tryb dokumentu, otwierając narzędzia do debugowania: naciśnijF12 i zaznacz „Tryb dokumentu”.

Ten znacznik jest zawarty w całej dokumentacji i przykładach Bootstrap, aby zapewnić najlepsze możliwe renderowanie w każdej obsługiwanej wersji Internet Explorera.

Zobacz to pytanie StackOverflow, aby uzyskać więcej informacji.

Internet Explorer 10 w Windows 8 i Windows Phone 8

Internet Explorer 10 nie rozróżnia szerokości urządzenia od szerokości widocznego obszaru, przez co nie stosuje prawidłowo zapytań o media w CSS Bootstrap. Zwykle wystarczy dodać krótki fragment kodu CSS, aby to naprawić:

@-ms-viewport       { width: device-width; }

Nie działa to jednak na urządzeniach z systemem Windows Phone 8 w wersji starszej niż aktualizacja 3 (aka GDR3) , ponieważ powoduje to wyświetlanie widoku głównie pulpitu zamiast wąskiego widoku „telefonu”. Aby rozwiązać ten problem, musisz dołączyć następujący kod CSS i JavaScript w celu obejścia błędu .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Aby uzyskać więcej informacji i wskazówek dotyczących użytkowania, przeczytaj Windows Phone 8 i szerokość urządzenia .

Jako heads-up włączamy to do całej dokumentacji Bootstrap i przykładów jako demonstracji.

Zaokrąglanie procentowe w Safari

Silnik renderujący w wersjach Safari wcześniejszych niż v7.1 dla OS X i Safari dla iOS v8.0 miał pewne problemy z liczbą miejsc dziesiętnych używanych w naszych .col-*-1klasach siatki. Więc jeśli masz 12 pojedynczych kolumn siatki, zauważysz, że okazały się krótkie w porównaniu z innymi rzędami kolumn. Oprócz aktualizacji Safari/iOS masz kilka opcji obejścia:

• Dodać.pull-right do ostatniej kolumny siatki, aby uzyskać wyrównanie do prawej strony
• Dostosuj swoje wartości procentowe ręcznie, aby uzyskać idealne zaokrąglenie dla Safari (trudniejsze niż pierwsza opcja)

Modals, paski nawigacyjne i klawiatury wirtualne

Przepełnienie i przewijanie

Wsparcie dla overflow: hiddenelementu <body>jest dość ograniczone w iOS i Androidzie. W tym celu, gdy przewiniesz górną lub dolną część modalności w jednej z przeglądarek tych urządzeń, <body>zawartość zacznie się przewijać. Zobacz błąd Chrome #175502 (naprawiony w Chrome v40) i błąd WebKit #153852 .

Pola tekstowe iOS i przewijanie

Od iOS 9.3, gdy mod jest otwarty, jeśli pierwsze dotknięcie gestu przewijania znajduje się w granicach tekstu <input>lub a <textarea>, <body>zawartość pod modą zostanie przewinięta zamiast samego modalu. Zobacz błąd nr 153856 dotyczący WebKit .

Klawiatury wirtualne

Należy również pamiętać, że jeśli używasz stałego paska nawigacyjnego lub używasz danych wejściowych w trybie modalnym, system iOS ma błąd renderowania, który nie aktualizuje pozycji stałych elementów po uruchomieniu klawiatury wirtualnej. Kilka obejścia tego problemu obejmuje przekształcenie elementów position: absolutelub wywołanie licznika czasu przy fokusie, aby spróbować ręcznie poprawić pozycjonowanie. Nie jest to obsługiwane przez Bootstrap, więc od Ciebie zależy, które rozwiązanie będzie najlepsze dla Twojej aplikacji.

Menu rozwijane paska nawigacyjnego

Element .dropdown-backdropnie jest używany w systemie iOS w nawigacji ze względu na złożoność indeksowania Z. Tak więc, aby zamknąć listy rozwijane w paskach nawigacyjnych, musisz bezpośrednio kliknąć element listy rozwijanej (lub dowolny inny element, który wywoła zdarzenie kliknięcia w systemie iOS ).

Powiększanie przeglądarki

Powiększanie strony nieuchronnie przedstawia artefakty renderowania w niektórych komponentach, zarówno w Bootstrap, jak iw pozostałej części sieci. W zależności od problemu możemy go naprawić (najpierw wyszukaj, a następnie otwórz problem, jeśli zajdzie taka potrzeba). Jednak zwykle je ignorujemy, ponieważ często nie mają one bezpośredniego rozwiązania poza hakerskimi obejściami.

Przyklejony :hover/:focus na urządzeniu mobilnym

Mimo że prawdziwe najechanie kursorem nie jest możliwe na większości ekranów dotykowych, większość przeglądarek mobilnych emuluje obsługę najeżdżania i sprawia, że ​​są :hover„przyklejone”. Innymi słowy, :hoverstyle zaczynają obowiązywać po dotknięciu elementu i przestają stosować dopiero po dotknięciu innego elementu przez użytkownika. Może to spowodować, że :hoverstany Bootstrap'a utkną w niepożądany sposób w takich przeglądarkach. Niektóre przeglądarki mobilne również są :focuspodobnie lepkie. Obecnie nie ma prostego obejścia tych problemów poza całkowitym usunięciem takich stylów.

Druk

Nawet w niektórych nowoczesnych przeglądarkach drukowanie może być dziwaczne.

W szczególności od Chrome v32 i niezależnie od ustawień marginesów Chrome używa szerokości widocznego obszaru znacznie węższej niż fizyczny rozmiar papieru podczas rozwiązywania zapytań o media podczas drukowania strony internetowej. Może to spowodować nieoczekiwane aktywowanie bardzo małej siatki Bootstrapa podczas drukowania. Więcej informacji znajdziesz w numerze 12078 i błędzie Chrome #273306 . Sugerowane obejścia:

• Zaakceptuj bardzo małą siatkę i upewnij się, że Twoja strona wygląda pod nią akceptowalnie.
• Dostosuj wartości@screen-* zmiennych Less, aby papier drukarki był uważany za większy niż bardzo mały.
• Dodaj niestandardowe zapytania o media, aby zmienić punkty przerwania rozmiaru siatki tylko dla mediów drukowanych.

Ponadto, począwszy od Safari w wersji 8.0, stała szerokość .containers może spowodować, że Safari podczas drukowania użyje niezwykle małego rozmiaru czcionki. Zobacz #14868 i błąd WebKit #138192 , aby uzyskać więcej informacji. Jednym z potencjalnych rozwiązań tego problemu jest dodanie następującego kodu CSS:

@media print {
  .container {
    width: auto;
  }
}

Przeglądarka giełdowa na Androida

Po wyjęciu z pudełka system Android 4.1 (a nawet niektóre nowsze wersje) jest dostarczany z aplikacją Browser jako domyślną wybraną przeglądarką internetową (w przeciwieństwie do Chrome). Niestety, aplikacja Przeglądarka ma wiele błędów i niespójności z CSS w ogóle.

Wybierz menu

W <select>elementach przeglądarka giełdowa systemu Android nie wyświetli bocznych elementów sterujących, jeśli istnieje border-radiusi/lub borderzastosowano. (Zobacz to pytanie StackOverflow, aby uzyskać szczegółowe informacje). Użyj poniższego fragmentu kodu, aby usunąć naruszający kod CSS i wyrenderować go <select>jako element bez stylu w przeglądarce giełdowej systemu Android. Sniffing agenta użytkownika pozwala uniknąć zakłóceń w przeglądarkach Chrome, Safari i Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Chcesz zobaczyć przykład? Sprawdź to demo JS Bin.

Walidatory

Aby zapewnić najlepszą możliwą obsługę starym i błędnym przeglądarkom, Bootstrap wykorzystuje hacki CSS przeglądarki , aby kierować specjalny CSS do niektórych wersji przeglądarek w celu obejścia błędów w samych przeglądarkach. Te hacki, co zrozumiałe, powodują, że walidatory CSS narzekają, że są nieprawidłowe. W kilku miejscach używamy również najnowocześniejszych funkcji CSS, które nie są jeszcze w pełni ustandaryzowane, ale służą wyłącznie do progresywnego ulepszania.

Te ostrzeżenia walidacyjne nie mają znaczenia w praktyce, ponieważ niehackowa część naszego CSS jest w pełni walidowana, a zhakowane części nie zakłócają prawidłowego funkcjonowania niehackowanej części, dlatego celowo ignorujemy te konkretne ostrzeżenia.

Nasza dokumentacja HTML również zawiera kilka trywialnych i nieistotnych ostrzeżeń dotyczących sprawdzania poprawności HTML z powodu włączenia obejścia pewnego błędu w Firefoksie .

Wsparcie stron trzecich

Chociaż oficjalnie nie wspieramy żadnych wtyczek ani dodatków innych firm, oferujemy przydatne porady, które pomogą uniknąć potencjalnych problemów w projektach.

Rozmiar pudełka

Niektóre oprogramowanie innych firm, w tym Google Maps i Google Custom Search Engine, powoduje konflikt z Bootstrap z powodu * { box-sizing: border-box; }reguły, która sprawia, że ​​tak paddingsię dzieje, nie wpływa na ostateczną obliczoną szerokość elementu. Dowiedz się więcej o modelu pudełkowym i rozmiarze na stronie Sztuczki CSS .

W zależności od kontekstu możesz w razie potrzeby zastąpić (Opcja 1) lub zresetować rozmiar pudełka dla całych regionów (Opcja 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Dostępność

Bootstrap jest zgodny z powszechnymi standardami sieciowymi i — przy minimalnym dodatkowym wysiłku — może być używany do tworzenia witryn dostępnych dla osób korzystających z AT .

Pomiń nawigację

Jeśli nawigacja zawiera wiele łączy i znajduje się przed główną zawartością w DOM, dodaj Skip to main contentłącze przed nawigacją (aby uzyskać proste wyjaśnienie, zobacz ten artykuł dotyczący projektu A11Y dotyczący pomijania łączy nawigacyjnych ). Użycie .sr-onlyklasy wizualnie ukryje link do pominięcia, a .sr-only-focusableklasa zapewni, że link stanie się widoczny po uaktywnieniu (dla widzących użytkowników klawiatury).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Zagnieżdżone nagłówki

W przypadku zagnieżdżania nagłówków ( <h1>- <h6>), główny nagłówek dokumentu powinien mieć postać <h1>. Kolejne nagłówki powinny logicznie wykorzystywać <h2>-<h6> tak, aby czytniki ekranu mogły tworzyć spis treści dla twoich stron.

Dowiedz się więcej na HTML CodeSniffer i AccessAbility Penn State .

Kontrast kolorów

Obecnie niektóre domyślne kombinacje kolorów dostępne w Bootstrap (takie jak różne stylizowane klasy przycisków, niektóre kolory podświetlania kodu używane w podstawowych blokach kodu , .bg-primary kontekstowa klasa pomocnicza tła i domyślny kolor linku, gdy jest używany na białym tle) mają niski współczynnik kontrastu (poniżej zalecanego współczynnika 4,5:1 ). Może to powodować problemy dla użytkowników niedowidzących lub daltonistów. Te kolory domyślne mogą wymagać modyfikacji w celu zwiększenia ich kontrastu i czytelności.

Dodatkowe zasoby

• Bookmarklet „HTML Codesniffer” do identyfikowania problemów z dostępnością
• Rozszerzenie Narzędzi dla programistów ułatwień dostępu do Chrome
• Analizator kontrastu kolorów
• Projekt A11Y
• Dokumentacja dostępności MDN

Najczęściej zadawane pytania dotyczące licencji

Bootstrap jest wydany na licencji MIT i jest chroniony prawem autorskim 2019 Twitter. Sprowadzając się do mniejszych kawałków, można to opisać następującymi warunkami.

Wymaga od Ciebie:

• Zachowaj informacje o licencji i prawach autorskich zawarte w plikach CSS i JavaScript Bootstrap, gdy używasz ich w swoich pracach

Pozwala na:

• Swobodnie pobieraj i używaj Bootstrap, w całości lub w części, do celów osobistych, prywatnych, wewnętrznych firmy lub komercyjnych
• Używaj Bootstrapa w tworzonych przez siebie pakietach lub dystrybucjach
• Zmodyfikuj kod źródłowy
• Udziel sublicencji na modyfikację i dystrybucję Bootstrap osobom trzecim nieobjętym licencją

Zabrania ci:

• Ponosić odpowiedzialność autorów i właścicieli licencji za szkody, ponieważ Bootstrap jest dostarczany bez gwarancji
• Pociągnąć do odpowiedzialności twórców lub posiadaczy praw autorskich Bootstrap
• Redystrybuuj dowolny element Bootstrap bez odpowiedniego przypisania
• Używaj wszelkich znaków należących do Twittera w jakikolwiek sposób, który może wskazywać lub sugerować, że Twitter popiera Twoją dystrybucję
• Używaj wszelkich znaków należących do Twittera w jakikolwiek sposób, który może wskazywać lub sugerować, że stworzyłeś dane oprogramowanie Twittera

Nie wymaga:

• Uwzględnij źródło samego Bootstrapa lub wszelkich modyfikacji, które w nim wprowadziłeś, w każdej redystrybucji, którą możesz złożyć, która go zawiera
• Prześlij zmiany wprowadzone w Bootstrap z powrotem do projektu Bootstrap (chociaż takie opinie są zalecane)

Pełna licencja Bootstrap znajduje się w repozytorium projektu, aby uzyskać więcej informacji.

Tłumaczenia

Członkowie społeczności przetłumaczyli dokumentację Bootstrap na różne języki. Żadne z nich nie są oficjalnie obsługiwane i mogą nie zawsze być aktualne.

• Bootstrap 中文文档 (chiński)
• Bootstrap w Danii (duński)
• Bootstrap en Français (francuski)
• Bootstrap auf Deutsch (niemiecki)
• Bootstrap po włosku (włoski)
• Bootstrap 한국어 (koreański)
• Bootstrap em Português do Brasil (brazylijski portugalski)
• Bootstrap по-русски (rosyjski)
• Bootstrap en Español (hiszpański)
• Türkçe Bootstrap (turecki)
• Bootstrap українською (ukraiński)
• Bootstrap Bằng Tiếng Việt (wietnamski)

Nie pomagamy w organizowaniu ani hostowaniu tłumaczeń, po prostu tworzymy do nich linki.

Ukończyłeś nowe lub lepsze tłumaczenie? Otwórz pull request, aby dodać go do naszej listy.