Rozpoczęcie pracy
Omówienie Bootstrapa, sposobu pobierania i używania, podstawowych szablonów i przykładów oraz nie tylko.
Omówienie Bootstrapa, sposobu pobierania i używania, podstawowych szablonów i przykładów oraz nie tylko.
Bootstrap (obecnie v3.3.7) ma kilka łatwych sposobów na szybkie rozpoczęcie pracy, z których każdy odnosi się do innego poziomu umiejętności i przypadku użycia. Czytaj dalej, aby zobaczyć, co odpowiada Twoim konkretnym potrzebom.
Skompilowany i zminimalizowany CSS, JavaScript i czcionki. Nie są dołączone żadne dokumenty ani oryginalne pliki źródłowe.
Source Less, JavaScript i pliki czcionek wraz z naszą dokumentacją. Wymaga kompilatora Less i pewnej konfiguracji.
Bootstrap przeniesiony z Less do Sass w celu łatwego włączenia do projektów Rails, Compass lub Sass-only.
Ludzie z jsDelivr łaskawie zapewniają wsparcie CDN dla CSS i JavaScript Bootstrap. Po prostu użyj tych linków Bootstrap CDN .
Możesz także zainstalować i zarządzać plikami Bootstrap's Less, CSS, JavaScript i fontami za pomocą Bower :
Możesz także zainstalować Bootstrap za pomocą npm :
require('bootstrap')
załaduje wszystkie wtyczki jQuery Bootstrap do obiektu jQuery. Sam bootstrap
moduł niczego nie eksportuje. Możesz ręcznie ładować wtyczki Bootstrap jQuery indywidualnie, ładując /js/*.js
pliki do katalogu najwyższego poziomu pakietu.
Bootstrap package.json
zawiera dodatkowe metadane pod następującymi kluczami:
less
- ścieżka do głównego pliku źródłowego Less Bootstrapastyle
- ścieżka do niezminifikowanego CSS Bootstrapa, który został wstępnie skompilowany przy użyciu ustawień domyślnych (bez dostosowywania)Możesz także zainstalować i zarządzać plikami Bootstrap's Less, CSS, JavaScript i fontami za pomocą Composer :
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.
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.
Pamiętaj, że wszystkie wtyczki JavaScript wymagają dołączenia jQuery, jak pokazano w szablonie startowym . Skonsultuj się z naszymbower.json
, aby dowiedzieć się, które wersje jQuery są obsługiwane.
Po pobraniu rozpakuj skompresowany folder, aby zobaczyć strukturę (skompilowanego) Bootstrapa. Zobaczysz coś takiego:
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.
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:
, 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.
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.
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.
Następnie z wiersza poleceń:grunt-cli
globalnie za pomocą npm install -g grunt-cli
./bootstrap/
katalogu głównego, a następnie uruchom npm install
. npm sprawdzi package.json
plik 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ń.
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 bezgłowo uruchamia testy Qunit w PhantomJS .
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.
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
.
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.
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.
Super podstawowy szablon, który zawiera pasek nawigacyjny wraz z dodatkową zawartością.
Podstawowa struktura pulpitu administracyjnego ze stałym paskiem bocznym i paskiem nawigacyjnym.
Utwórz niestandardowy pasek nawigacyjny z wyjustowanymi łączami. Heads-up! Niezbyt przyjazny Safari.
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.
Bądź na bieżąco z rozwojem Bootstrap i skontaktuj się ze społecznością dzięki tym pomocnym zasobom.
irc.freenode.net
serwerze, na kanale ##bootstrap .twitter-bootstrap-3
.bootstrap
w pakietach, które modyfikują lub zwiększają funkcjonalność Bootstrap podczas dystrybucji za pośrednictwem npm lub podobnych mechanizmów dostarczania, aby zapewnić maksymalną wykrywalność.Możesz także śledzić @getbootstrap na Twitterze , aby otrzymywać najnowsze plotki i niesamowite teledyski.
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 .
<meta>
wymieniony w dokumentacji CSSwidth
na .container
dla 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ąć !important
z zapytaniami o media lub niektórymi selektorami-fu..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”.
Zastosowaliśmy te kroki na przykładzie. Przeczytaj jego kod źródłowy, aby zobaczyć wprowadzone zmiany.
Chcesz przeprowadzić migrację ze starszej wersji Bootstrap do v3.x? Sprawdź nasz przewodnik po migracji .
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.
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.
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.
Chrom | Firefox | Safari | |
---|---|---|---|
Android | Utrzymany | Utrzymany | Nie dotyczy |
iOS | Utrzymany | Utrzymany | Utrzymany |
Podobnie obsługiwane są najnowsze wersje większości przeglądarek komputerowych.
Chrom | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Prochowiec | Utrzymany | Utrzymany | Nie dotyczy | Utrzymany | Utrzymany |
Okna | Utrzymany | Utrzymany | Utrzymany | Utrzymany | Nieobsługiwany |
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 .
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.
Funkcja | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Nieobsługiwany | Utrzymany |
box-shadow |
Nieobsługiwany | Utrzymany |
transform |
Nieobsługiwany | Obsługiwane, z -ms prefiksem |
transition |
Nieobsługiwany | |
placeholder |
Nieobsługiwany |
Odwiedź stronę Czy mogę użyć..., aby uzyskać szczegółowe informacje na temat obsługi przez przeglądarkę funkcji CSS3 i HTML5.
Podczas korzystania z Respond.js w środowiskach programistycznych i produkcyjnych programu Internet Explorer 8 należy mieć na uwadze następujące zastrzeżenia.
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 .
file://
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 .
@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 .
IE8 nie obsługuje w pełni box-sizing: border-box;
w połączeniu z min-width
, max-width
, min-height
lub max-height
. Z tego powodu od wersji 3.0.1 nie używamy już max-width
na .container
s.
IE8 ma pewne problemy w @font-face
połą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.
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:
Potwierdź tryb dokumentu, otwierając narzędzia do debugowania: naciśnij F12i 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 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ć:
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 .
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.
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-*-1
klasach 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:
.pull-right
do ostatniej kolumny siatki, aby uzyskać wyrównanie do prawej stronyWsparcie dla overflow: hidden
elementu <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 .
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 .
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: absolute
lub 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.
Element .dropdown-backdrop
nie 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 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.
:hover
/ :focus
na urządzeniu mobilnymMimo ż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, :hover
style zaczynają obowiązywać po dotknięciu elementu i przestają stosować dopiero po dotknięciu innego elementu przez użytkownika. Może to spowodować, że :hover
stany Bootstrap'a utkną w niepożądany sposób w takich przeglądarkach. Niektóre przeglądarki mobilne również są :focus
podobnie lepkie. Obecnie nie ma prostego obejścia tych problemów poza całkowitym usunięciem takich stylów.
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:
@screen-*
zmiennych Less, aby papier drukarki był uważany za większy niż bardzo mały.Ponadto, począwszy od Safari w wersji 8.0, stała szerokość .container
s 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:
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.
W <select>
elementach przeglądarka giełdowa systemu Android nie wyświetli bocznych elementów sterujących, jeśli istnieje border-radius
i/lub border
zastosowano. (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.
Chcesz zobaczyć przykład? Sprawdź to demo JS Bin.
Aby zapewnić najlepszą możliwą obsługę starych i wadliwych przeglądarek, Bootstrap wykorzystuje w kilku miejscach 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 .
Chociaż oficjalnie nie wspieramy żadnych wtyczek ani dodatków innych firm, oferujemy przydatne porady, które pomogą uniknąć potencjalnych problemów w projektach.
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 padding
się 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).
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 .
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-only
klasy wizualnie ukryje link do pominięcia, a .sr-only-focusable
klasa zapewni, że link stanie się widoczny po uaktywnieniu (dla widzących użytkowników klawiatury).
Z powodu długotrwałych niedociągnięć/błędów w Chrome (zobacz problem 262171 w narzędziu do śledzenia błędów Chromium ) i Internet Explorerze (zobacz ten artykuł na temat linków na stronie i kolejności wyświetlania ), musisz upewnić się, że cel pominięcia linku można przynajmniej programowo skoncentrować, dodając tabindex="-1"
.
Ponadto możesz chcieć wyraźnie pominąć widoczne wskazanie fokusa na obiekcie docelowym (szczególnie, że Chrome obecnie ustawia fokus na elementach za pomocą tabindex="-1"
, gdy są klikane myszą) za pomocą #content:focus { outline: none; }
.
Pamiętaj, że ten błąd wpłynie również na wszelkie inne linki na stronie, z których może korzystać Twoja witryna, czyniąc je bezużytecznymi dla użytkowników klawiatury. Możesz rozważyć dodanie podobnej poprawki tymczasowej do wszystkich innych nazwanych kotwic/identyfikatorów fragmentów, które działają jako cele linków.
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 .
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.
Bootstrap jest wydany na licencji MIT i jest chroniony prawem autorskim 2016 Twitter. Sprowadzając się do mniejszych kawałków, można to opisać następującymi warunkami.
Pełna licencja Bootstrap znajduje się w repozytorium projektu, aby uzyskać więcej informacji.
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.
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.