Иконографияны, ашылмалы тізімдерді, енгізу топтарын, навигацияны, ескертулерді және т.б. қамтамасыз ету үшін жасалған оннан астам қайта пайдалануға болатын компоненттер.
Глифондар
Қолжетімді глифтер
Glyphicon Halflings жинағынан қаріп пішіміндегі 250-ден астам глифтерді қамтиды. Glyphicons Halflings әдетте тегін қол жетімді емес, бірақ оларды жасаушы оларды Bootstrap үшін ақысыз қол жетімді етті. Рахмет ретінде мүмкіндігінше Glyphicons сілтемесін қосуыңызды сұраймыз .
глификон глификон-жұлдызша
glyphicon glyphicon-plus
глификон глификон-еуро
glyphicon glyphicon-eur
глификон глификон-минус
глификон глификон-бұлт
глификон глификон-конверт
глификон глификон-қарындаш
глификон глификон-әйнек
глификон глификон-музыка
glyphicon glyphicon-іздеу
глификон глификон-жүрек
глификон глификон-жұлдыз
глификон глификон-жұлдыз-бос
глификон глификон-пайдаланушы
глификон глификон-пленка
глификон глификон-үлкен
глификон глификон-th
глификон глификон-тізімі
глификон глификон-жақсы
glyphicon glyphicon-жою
глификон глификон-үлкейту
глификон глификон-кішірейту
глификон глифоны өшірулі
глификон глификон-сигнал
глификон глификон-тісті
глификон глификон-қоқыс
глификон глификон-үй
glyphicon glyphicon-файл
глификон глификон-уақыты
глификон глификон-жол
glyphicon glyphicon-download-alt
glyphicon glyphicon-жүктеу
glyphicon glyphicon-жүктеп салу
glyphicon glyphicon-кіріс жәшігі
глификон глификон-ойын-шеңбері
глификон глификон-қайталау
glyphicon glyphicon-жаңарту
glyphicon glyphicon-list-alt
глификон глификон-құлыптау
glyphicon glyphicon-ту
глификон глификон-құлаққаптар
глификон глификон-көлемді өшіру
глификон глификон-көлемді азайту
глификон глификон-көлемді арттыру
глификон глификон-qrcode
глификон глификон-штрих-код
глификон глификон-тег
глификон глификон-тегтері
глификон глифоны-кітап
glyphicon glyphicon-бетбелгі
глификон глификон-басып шығару
глификон глификон-камера
глификон глификон-шрифт
глифон глификон-қалың
глификон глификон-курсив
glyphicon glyphicon-мәтін-биіктігі
glyphicon glyphicon-мәтін-ені
glyphicon glyphicon-солға туралау
glyphicon glyphicon-align-центр
glyphicon glyphicon-туралау-оңға
glyphicon glyphicon-туралау-ақтау
глификон глифоны тізімі
glyphicon glyphicon-шегініс-солға
glyphicon glyphicon-шегініс-оң жақ
glyphicon glyphicon-facetime-бейне
глификон глификон-сурет
глификон глификон-карта-маркер
glyphicon glyphicon-реттеу
глификон глификон-түсі
glyphicon glyphicon-редакциялау
глификон глификон-үлесі
глификон глификон-тексеру
глификон глификон-қозғалыс
глификон глификон-қадам-артқа
glyphicon glyphicon-тез-артқа
глификон глификон-артқа
глификон глификон ойыны
глификон глификон-үзіліс
глификон глификон-тоқтамасы
глификон глификон алға
glyphicon glyphicon-жылдам алға
глификон глификон-алға қадам
глификон глификон-шығару
глифон глификон-шеврон-сол
глифон глификон-шеврон-оң жақ
глификон глификон-плюс-белгісі
глификон глификон-минус-белгісі
глификон глификон-жою-белгісі
глификон глификон-ок-белгісі
глификон глификон-сұрақ белгісі
глификон глификон-ақпарат-белгісі
glyphicon glyphicon-скриншот
glyphicon glyphicon-жою-шеңбер
глификон глификон-ок-шеңбер
глификон глификон-тыйым шеңбері
глификон глификон-көрсеткі-солға
глификон глификон-көрсеткі-оңға
глификон глификон-көрсеткі жоғары
глификон глификон-төмен көрсеткі
glyphicon glyphicon-pay-alt
glyphicon glyphicon-өлшемін өзгерту-толық
глификон глификон-өлшемін өзгерту-кіші
глификон глификон-леп белгісі-белгісі
глификон глификон-сыйлық
глификон глификон-жапырақ
глификон глификон-от
глификон глификон-көз ашық
глификон глификон-көзді жақын
глификон глификон-ескерту белгісі
глификон глификон-жазықтық
глификон глификон-күнтізбе
глификон глификон-кездейсоқ
глификон глификон-түсініктеме
глификон глификон-магнит
глифон глификон-шеврон-жоғары
глифон глификон-шеврон-төмен
glyphicon glyphicon-retweet
glyphicon glyphicon-сатып алу арбасы
glyphicon glyphicon-қалта-жабу
glyphicon glyphicon-қалта-ашық
глификон глификон-өлшемін өзгерту-тік
glyphicon glyphicon-өлшемін өзгерту-көлденең
глификон глификон-hdd
глификон глификон-бульгорн
глификон глификон-қоңырау
глификон глификон-сертификат
глификон глификон-бас бармақ
глификон глификон-бас бармақ
glyphicon glyphicon-қол-оң
глифон глификон-сол жақ
глификон глификон-қол жоғары
глификон глификон-төмен
глификон глификон-шеңбер-көрсеткі-оңға
глификон глификон-шеңбер-көрсеткі-солға
глификон глификон-шеңбер-көрсеткі-жоғары
глификон глификон-шеңбер-көрсеткі-төмен
глифон глификон-глобус
глификон кілті
глификон глификон-тапсырмалар
глификон глификон-сүзгісі
глификон глификон-портфель
glyphicon glyphicon-толық экран
glyphicon glyphicon-бақылау тақтасы
глификон глификон-қағаз қыстырғыш
глификон глификон-жүрек-бос
глификон глификон-сілтеме
глификон глификон-телефон
глификон глификон-итергіш
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
глификон глификон-сорт
глификон глификон-алфавит бойынша сұрыптау
glyphicon glyphicon-алфавит бойынша сұрыптау
глификон глификон-рет бойынша сұрыптау
glyphicon glyphicon-рет бойынша-сұрыптау-алт
атрибуттар бойынша сұрыптау
glyphicon glyphicon-атрибуттар бойынша сұрыптау-alt
glyphicon glyphicon-белгісіз
glyphicon glyphicon-кеңейту
глификон глификон-құла-төмен
глификон глификон-құлауы
glyphicon glyphicon-кіру
глификон глификон-жарқыл
glyphicon glyphicon-шығу
glyphicon glyphicon-жаңа терезе
глификон глификон-жазба
глификон глификонды сақтау
глификон глификон-ашық
глификон глифоны сақталды
глификон глификон-импорт
глификон глификон-экспорт
glyphicon glyphicon-жіберу
глификон глификон-дискет-диск
глификон глификон-дискет-сақталған
glyphicon glyphicon-floppy-жою
glyphicon glyphicon-дискет-сақтау
глификон глификон-иілгіш-ашық
glyphicon glyphicon-кредиттік карта
глификон глификон-тасымалдау
глификон глификон-ас құралдары
глификон глификон-тақырып
глификон глификонмен сығымдалған
глификон глификон-құлаққап
glyphicon glyphicon-телефон-алт
глификон глификон-мұнарасы
глификон глификон-стат
glyphicon glyphicon-sd-бейне
glyphicon glyphicon-hd-бейне
глификон глификон-субтитрлер
глифон глификон-дыбыс-стерео
глификон глификон-дыбыс-долби
glyphicon glyphicon-дыбыс-5-1
glyphicon glyphicon-дыбыс-6-1
glyphicon glyphicon-дыбыс-7-1
glyphicon glyphicon-авторлық құқық белгісі
глификон глификон-тіркеу белгісі
glyphicon glyphicon-бұлтты-жүктеу
glyphicon glyphicon-бұлт-жүктеп салу
глификон глификон-ағаш-қылқан жапырақты
глификон глификон-ағаш-жапырақты
glyphicon glyphicon-cd
glyphicon glyphicon-сақтау файлы
glyphicon glyphicon-open-файл
глификон глификон деңгейін жоғарылату
глификон глификон-көшірме
глификон глификон-паста
глификон глификонды ескерту
глификон глификон-эквалайзер
глификон глификон-патша
глификон глификон-ханшайымы
глификон глификон- пешка
глификон глификон-епископ
глификон глификон-рыцарь
глификон глификон-бала формуласы
глификон глификон-шатыр
глификон глификон-қара тақта
глификон глификон-қабат
глификон глификон-алма
глификон глификонды өшіру
глификон глификон-құм сағаты
глификон глификон-шам
глификон глификон-көшірме
глификон глификон-погги-банк
глификон глификон-қайшы
глификон глификон-биткоин
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
глификон глификон-йен
glyphicon glyphicon-jpy
глификон глификон-рубль
глификон глификон-руб
глификон глификон-шкала
глификон глификон-мұзды лола
глификон глификон-мұзды тәтті дәмі бар
глификон глификон-білім беру
glyphicon glyphicon-опция-көлденең
glyphicon glyphicon-опция-тік
glyphicon glyphicon-мәзір-гамбургер
глификон глификон-модальды-терезе
глификон глификон-май
глификон глификон-дән
глификон глификон-күн көзілдірігі
глификон глификон-мәтін өлшемі
глификон глификон-мәтін-түсі
глификон глификон-мәтін-фон
glyphicon glyphicon-объектіні туралау-жоғарғы
glyphicon glyphicon-нысанды-туралау-төменгі
glyphicon glyphicon-нысанды-туралау-көлденең
glyphicon glyphicon-нысанды-солға туралау
glyphicon glyphicon-нысанды-туралау-тік
glyphicon glyphicon-нысанды-оңға туралау
глификон глификон-үшбұрыш-оң жақ
глифон глификон-үшбұрыш-сол
глифон глификон-үшбұрыш-төменгі
глифон глификон-үшбұрыш-төбе
glyphicon glyphicon-консоль
глифон глификон-жоғарғы жазу
глифон глификон-жазба
glyphicon glyphicon-мәзір-сол жақта
glyphicon glyphicon-мәзір-оң жақта
glyphicon glyphicon-мәзір-төмен
glyphicon glyphicon-мәзірі
Қалай пайдалануға болады
Өнімділік себептері бойынша барлық белгішелер негізгі сыныпты және жеке белгіше сыныбын талап етеді. Пайдалану үшін келесі кодты кез келген жерге орналастырыңыз. Тиісті толтыру үшін белгіше мен мәтін арасында бос орын қалдырыңыз.
Басқа компоненттермен араластырмаңыз
Белгіше кластарын басқа компоненттермен тікелей біріктіру мүмкін емес. Оларды бір элементтегі басқа сыныптармен бірге қолдануға болмайды. Оның орнына кірістірілгенді қосып <span>, белгіше сыныптарын <span>.
Тек бос элементтерде пайдалануға арналған
Белгіше сыныптары мәтін мазмұны жоқ және еншілес элементтері жоқ элементтерде ғана пайдаланылуы керек.
Белгіше қаріпінің орнын өзгерту
../fonts/Bootstrap белгіше қаріп файлдары құрастырылған CSS файлдарына қатысты каталогта орналасады деп болжайды . Бұл қаріп файлдарын жылжыту немесе атын өзгерту CSS-ті үш жолдың бірімен жаңартуды білдіреді:
@icon-font-pathБастапқы аз файлдардағы және/немесе @icon-font-nameайнымалы мәндерді өзгертіңіз .
url()Құрастырылған CSS ішіндегі жолдарды өзгертіңіз .
Арнайы әзірлеу параметрлеріне сәйкес келетін кез келген опцияны пайдаланыңыз.
Қолжетімді белгішелер
Көмекші технологиялардың заманауи нұсқалары CSS жасалған мазмұнды, сондай-ақ нақты Юникод таңбаларын жариялайды. Экранды оқу құралдарында күтпеген және шатастыратын нәтижелерді болдырмау үшін (әсіресе белгішелер тек безендіру үшін пайдаланылған кезде) біз оларды aria-hidden="true"атрибутпен жасырамыз.
Мағынаны беру үшін белгішені пайдалансаңыз (тек сәндік элемент ретінде емес), бұл мағынаның көмекші технологияларға да жеткізілетініне көз жеткізіңіз – мысалы, .sr-onlyсыныппен көрнекі түрде жасырылған қосымша мазмұнды қосыңыз.
Басқа мәтінсіз басқару элементтерін жасасаңыз (мысалы, <button>белгішені ғана қамтитын), басқару құралының мақсатын анықтау үшін әрқашан балама мазмұнды қамтамасыз ету керек, осылайша ол көмекші технологияларды пайдаланушыларға түсінікті болады. Бұл жағдайда aria-labelбасқару элементінің өзіне төлсипат қосуға болады.
Мысалдар
Оларды түймелерде, құралдар тақтасы үшін түймелер топтарында, шарлау немесе алдын ала берілген пішін енгізулерінде пайдаланыңыз.
Көмекші технологияларды пайдаланушыларға осы кеңесті жеткізу үшін қосымша мәтіні бар қате туралы хабарды жеткізу үшін ескертуде пайдаланылатын белгіше ..sr-only
Қате:Жарамды электрондық пошта мекенжайын енгізіңіз
Ашылмалы тізімдер
Сілтемелер тізімдерін көрсетуге арналған ауыспалы, контекстік мәзір. Ашылмалы JavaScript плагинімен интерактивті етіп жасалған .
Мысал
Ашылмалы тізімнің триггерін және ашылмалы мәзірді ішіне .dropdownнемесе жариялайтын басқа элементке ораңыз position: relative;. Содан кейін мәзірге HTML қосыңыз.
Әдепкі бойынша, ашылмалы мәзір ата-анасының жоғарғы жағында және сол жағында автоматты түрде 100% орналасады. А-ға қосыңыз .dropdown-menu-right, .dropdown-menuашылмалы мәзірді оңға туралаңыз.
Қосымша орналастыруды қажет етуі мүмкін
Ашылмалы тізімдер CSS арқылы құжаттың қалыпты ағынында автоматты түрде орналасады. Бұл ашылмалы тізімдерді белгілі бір overflowсипаттары бар ата-аналар қиюы немесе көру терезесінің шегінен тыс шығуы мүмкін дегенді білдіреді. Бұл мәселелерді олар туындаған кезде өзіңіз шешіңіз.
Ескірген .pull-rightтуралау
v3.1.0 нұсқасынан бастап біз .pull-rightашылмалы мәзірлерді қолданыстан шығардық. Мәзірді оң жаққа туралау үшін пайдаланыңыз .dropdown-menu-right. Шарлау тақтасындағы оң жаққа тураланған шарлау құрамдастары мәзірді автоматты түрде туралау үшін осы сыныптың араластыру нұсқасын пайдаланады. Оны қайта анықтау үшін пайдаланыңыз .dropdown-menu-left.
Тақырыптар
Кез келген ашылмалы мәзірдегі әрекеттер бөлімдерін белгілеу үшін тақырып қосыңыз.
Түймешіктер тобымен бірге бір жолға түймелер қатарын топтаңыз. Біздің түймелер плагинімен қосымша JavaScript радиосын және құсбелгі мәнерінің әрекетін қосыңыз .
Түйме топтарындағы кеңестер мен қалқымалы құралдар арнайы параметрді қажет етеді
Құрал кеңестерін немесе қалқымалы элементтерді пайдаланған кезде қажетсіз жанама әсерлерді болдырмау .btn-groupопциясын көрсетуіңіз керек container: 'body'(мысалы, құрал кеңесі немесе қалқымалы түйме іске қосылғанда кеңейетін элемент және/немесе дөңгелектелген бұрыштарын жоғалтады).
Дұрыстығына көз жеткізіп role, белгіні беріңіз
Көмекші технологиялар (мысалы, экраннан оқу құралдары) түймелердің топтастырылғанын жеткізуі үшін сәйкес roleатрибут қамтамасыз етілуі керек. Түйме топтары үшін бұл болады role="group", ал құралдар тақталарында болуы керек role="toolbar".
Бір ерекшелік тек бір басқару элементін (мысалы, элементтері бар негізделген түйме топтары<button> ) немесе ашылмалы тізімді қамтитын топтар болып табылады.
roleСонымен қатар, топтар мен құралдар тақталарына анық белгі берілуі керек, себебі көмекші технологиялардың көпшілігі дұрыс атрибуттың болуына қарамастан, оларды жарияламайды . Мұнда келтірілген мысалдарда біз пайдаланамыз aria-label, бірақ сияқты баламаларды aria-labelledbyда қолдануға болады.
Негізгі мысал
Түймелердің қатарын ішіне .btnораңыз .btn-group.
Түйме құралдар тақтасы
Күрделі құрамдас бөліктерге арналған жиынтықтарды біріктіріңіз <div class="btn-group">.<div class="btn-toolbar">
Өлшемді анықтау
Топтағы әрбір түймеге түйме өлшемдерін қолданудың орнына жай ғана .btn-group-*әрқайсысына қосыңыз .btn-group, соның ішінде бірнеше топтарды кірістіру кезінде.
Ұя салу
Ашылмалы мәзірлерді бірнеше түймелермен араластырғыңыз келсе, .btn-groupбасқасына қойыңыз ..btn-group
Түймешіктер тобын негізгі элементтің бүкіл енін қамту үшін бірдей өлшемдерде созыңыз. Сондай-ақ түймелер тобында ашылмалы түймелермен жұмыс істейді.
Шекараларды өңдеу
Түймешіктерді негіздеу үшін қолданылатын арнайы HTML және CSS арқасында (атап айтқанда display: table-cell), олардың арасындағы шекаралар екі еселенеді. Кәдімгі түймелер топтарында margin-left: -1pxшекараларды жоюдың орнына жинақтау үшін қолданылады. Дегенмен, margin-мен жұмыс істемейді display: table-cell. Нәтижесінде, Bootstrap теңшеулеріне байланысты жиектерді алып тастағыңыз немесе қайта бояғыңыз келуі мүмкін.
IE8 және шекаралар
<a>Internet Explorer 8 қосылған немесе <button>элементтер болса да негізделген түймелер тобындағы түймелердің шекараларын көрсетпейді . Оны айналып өту үшін әр түймені екіншісіне ораңыз .btn-group.
Егер <a>элементтер ағымдағы беттегі басқа құжатқа немесе бөлімге шарлаудың орнына бет ішіндегі функцияларды іске қосатын түймелер ретінде әрекет ету үшін пайдаланылса, оларға сәйкес таңба да берілуі керек role="button".
<button>Элементтермен _
<button>Элементтері бар негізделген түйме топтарын пайдалану үшін әрбір түймені түймелер тобына орау керек . Көптеген браузерлер элементтерге негіздеу үшін біздің CSS-ті дұрыс қолданбайды <button>, бірақ біз түймелердің ашылмалы тізімдерін қолдайтындықтан, оны айналып өтуге болады.
Түймелердің ашылмалы тізімдері
Ашылмалы мәзірді ашу үшін кез келген түймені пайдаланып, оны а ішіне орналастырып .btn-group, тиісті мәзір белгілеуін қамтамасыз етіңіз.
Плагинге тәуелділік
Түймелердің ашылмалы тізімдері ашылмалы плагинді Bootstrap нұсқасына қосуды талап етеді.
Жалғыз түйменің ашылмалы тізімдері
Түймені кейбір негізгі белгілеу өзгерістерімен ашылмалы қосқышқа айналдырыңыз.
Кез келген мәтінге негізделген мәтіннің алдына, соңына немесе екі жағына мәтін немесе түймелерді қосу арқылы пішін басқару элементтерін кеңейтіңіз <input>. Жалғыз элементке элементтерді қосу немесе қосу .input-groupүшін .input-group-addonнемесе көмегімен пайдаланыңыз ..input-group-btn.form-control
<input>Тек мәтіндік
Бұл жерде элементтерді пайдаланудан аулақ болыңыз <select>, себебі оларды WebKit браузерлерінде толық стильдеу мүмкін емес.
<textarea>Мұнда элементтерді пайдаланудан аулақ болыңыз , себебі олардың rowsатрибуты кейбір жағдайларда сақталмайды.
Енгізу топтарындағы кеңестер мен қалқымалы құралдар арнайы параметрді қажет етеді
Құрал кеңестерін немесе қалқымалы элементтерді ішіндегі элементтерде пайдаланған кезде .input-group, қалаусыз жанама әсерлерді болдырмау үшін опцияны көрсету керек болады container: 'body'(мысалы, құрал кеңесі немесе қалқымалы терезе іске қосылғанда кеңейіп жатқан элемент және/немесе дөңгелектелген бұрыштарын жоғалтады).
Басқа компоненттермен араластырмаңыз
Пішін топтарын немесе тор бағанының сыныптарын енгізу топтарымен тікелей араластырмаңыз. Оның орнына енгізу тобын пішін тобының немесе торға қатысты элементтің ішіне кірістіріңіз.
Әрқашан белгілерді қосыңыз
Әрбір енгізу үшін белгіні қоспасаңыз, экранды оқу бағдарламаларында пішіндеріңізде қиындықтар туындайды. Бұл енгізу топтары үшін кез келген қосымша белгі немесе функцияның көмекші технологияларға тасымалдануын қамтамасыз етіңіз.
Қолданылатын нақты техника (көрінетін <label>элементтер, сынып <label>арқылы жасырылған элементтер немесе , , , немесе төлсипатты пайдалану) және қандай қосымша ақпаратты жеткізу қажет болатыны сіз енгізіп жатқан интерфейс виджетінің нақты түріне байланысты өзгереді. Бұл бөлімдегі мысалдар нақты жағдайға қатысты бірнеше ұсынылған тәсілдерді береді..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
Негізгі мысал
Бір қондырманы немесе түймені кірістің екі жағына орналастырыңыз. Біреуін кірістің екі жағына да қоюға болады.
Біз бір жағында бірнеше қондырмаларды ( .input-group-addonнемесе ) қолдамаймыз ..input-group-btn
Біз бір енгізу тобында бірнеше пішін басқару элементтеріне қолдау көрсетпейміз.
Өлшемді анықтау
Өзіне қатысты пішін өлшемдері сыныптарын қосыңыз .input-groupжәне ішіндегі мазмұн автоматты түрде өлшемін өзгертеді — әр элементте пішінді басқару өлшемінің сыныптарын қайталаудың қажеті жоқ.
Құсбелгілер мен радио қосымшалары
Кез келген құсбелгіні немесе радио опциясын мәтіннің орнына енгізу тобының қосымшасына қойыңыз.
Түйме қосымшалары
Енгізу топтарындағы түймелер сәл өзгеше және бір қосымша кірістіру деңгейін қажет етеді. Оның орнына түймелерді орау .input-group-addonүшін пайдалану керек . .input-group-btnБұл қайта анықтау мүмкін емес әдепкі шолғыш мәнерлеріне байланысты қажет.
Ашылмалы тізімі бар түймелер
Сегменттелген түймелер
Бірнеше түймелер
Бір жағында бір ғана қондырма болуы мүмкін болса да, бір ішінде бірнеше түймелер болуы мүмкін .input-group-btn.
Navs
Bootstrap жүйесінде қолжетімді Navs негізгі сыныптан бастап ортақ белгілеулерге, .navсондай-ақ ортақ күйлерге ие. Әр стиль арасында ауысу үшін модификатор сыныптарын ауыстырыңыз.
Қойынды тақталары үшін navs пайдалану JavaScript қойындылары плагинін қажет етеді
Қойынды аймақтары бар қойындылар үшін JavaScript плагині қойындыларын пайдалану керек . Белгілеуге қосымша roleжәне ARIA атрибуттары қажет болады – қосымша мәліметтер алу үшін плагин үлгісінің белгілеуін қараңыз.
Навигация ретінде пайдаланылатын навигацияларды қолжетімді етіңіз
Шарлау жолағын қамтамасыз ету үшін navs қолданып жатсаңыз, role="navigation"ең логикалық негізгі контейнерге a қосуды ұмытпаңыз <ul>немесе <nav>элементті бүкіл шарлаудың айналасына ораңыз. Рөлді өзіне қоспаңыз <ul>, себебі бұл көмекші технологиялар арқылы оның нақты тізім ретінде жариялануына жол бермейді.
Қойындылар
.nav-tabsСынып негізгі сыныпты қажет ететінін ескеріңіз .nav.
-мен ені 768 пиксельден асатын экрандарда қойындыларды немесе таблеткаларды ата-анасының еніне тең етіп оңай жасаңыз .nav-justified. Кішірек экрандарда шарлау сілтемелері жинақталады.
Негізделген шарлау тақтасының шарлау сілтемелеріне қазіргі уақытта қолдау көрсетілмейді.
Safari және жауапты негізделген навигациялар
v9.1.2 нұсқасы бойынша Safari қатесін көрсетеді, онда браузер өлшемін көлденеңінен өзгерту жаңартылған кезде жойылатын негізделген навигацияда көрсету қателерін тудырады. Бұл қате негізделген навигация мысалында да көрсетілген .
Шарлау жолақтары қолданбаңыз немесе сайтыңыз үшін шарлау тақырыптары ретінде қызмет ететін жауап беретін мета құрамдас бөліктер болып табылады. Олар мобильді көріністерде жиырылған (және ауыстырылатын) күйде басталады және қолжетімді қарау алаңының ені ұлғайған сайын көлденең болады.
Негізделген шарлау тақтасының шарлау сілтемелеріне қазіргі уақытта қолдау көрсетілмейді.
Толып жатқан мазмұн
Bootstrap шарлау тақтасындағы мазмұнға қанша орын қажет екенін білмейтіндіктен, мазмұнды екінші жолға орау кезінде мәселелер туындауы мүмкін. Мұны шешу үшін сіз:
Шарлау тақтасы элементтерінің санын немесе енін азайтыңыз.
Шарлау тақтасы жиырылған және көлденең режим арасында ауысатын нүктені өзгертіңіз. Айнымалы мәнді теңшеңіз @grid-float-breakpointнемесе өзіңіздің медиа сұрауыңызды қосыңыз.
JavaScript плагинін қажет етеді
JavaScript өшірілсе және шолу терезесі шарлау тақтасы жиырылатындай тар болса, шарлау тақтасын кеңейту және ішіндегі мазмұнды көру мүмкін болмайды .navbar-collapse.
Шарлау тақтасы көру порты өлшемінен тар болған кезде өзінің тік мобильді көрінісіне жиырылады және көру порты кемінде ені @grid-float-breakpointболған кезде көлденең мобильді емес көрініске кеңейеді . @grid-float-breakpointШарлау тақтасы жиырылған/кеңейетін уақытты басқару үшін осы айнымалы мәнді «Азырақ көзде» реттеңіз. Әдепкі мән 768px(ең кіші «кіші» немесе «планшет» экраны).
Шарлау жолақтарын қолжетімді етіңіз
Элементті пайдаланғаныңызға көз жеткізіңіз <nav>немесе , сияқты жалпы элементті пайдалансаңыз, көмекші технологияларды пайдаланушылар үшін бағдар аймағы ретінде анық анықтау үшін әрбір шарлау тақтасына <div>a қосыңыз .role="navigation"
Бренд бейнесі
Мәтінді мәтінге ауыстыру арқылы шарлау тақтасының брендін өзіңіздің суретіңізбен ауыстырыңыз <img>. .navbar-brandӨз толтырғышы мен биіктігі болғандықтан , кескініңізге байланысты кейбір CSS-ті қайта анықтау қажет болуы мүмкін.
Пішіндер
.navbar-formТар көрініс порттарында дұрыс тік туралау және жиырылған әрекет үшін пішін мазмұнын орналастырыңыз. Оның шарлау тақтасының мазмұнында орналасқан жерін анықтау үшін туралау опцияларын пайдаланыңыз.
.navbar-formНазар аударыңыз , кодтың көп бөлігін mixin .form-inlineарқылы бөліседі. Енгізу топтары сияқты кейбір пішін басқару элементтері шарлау тақтасында дұрыс көрсетілу үшін бекітілген ендерді талап етуі мүмкін.
Мобильді құрылғыға қатысты ескертулер
Мобильді құрылғылардағы бекітілген элементтерде пішін басқару элементтерін пайдалануға қатысты кейбір ескертулер бар. Толық ақпаратты шолғышты қолдау құжаттарын қараңыз.
Әрқашан белгілерді қосыңыз
Әрбір енгізу үшін белгіні қоспасаңыз, экранды оқу бағдарламаларында пішіндеріңізде қиындықтар туындайды. Бұл кірістірілген пішіндер үшін .sr-onlyсыныпты пайдаланып белгілерді жасыруға болады. Көмекші технологиялар үшін белгіні қамтамасыз етудің басқа балама әдістері бар, мысалы, aria-label, aria-labelledbyнемесе titleтөлсипаты. Бұлардың ешқайсысы болмаса, экраннан оқу құралдары бар placeholderболса, төлсипатты пайдалануға жүгінуі мүмкін, бірақ placeholderбасқа таңбалау әдістерін ауыстыру ретінде пайдалану ұсынылмайтынын ескеріңіз.
Түймелер
Оларды шарлау тақтасында тігінен ортаға қою үшін .navbar-btnсыныпты <button>а ішінде тұрмайтын элементтерге қосыңыз .<form>
Мәтінмәнге қатысты қолдану
Стандартты түйме сыныптары сияқты және элементтерде .navbar-btnде қолдануға болады . Дегенмен, ішіндегі элементтерде стандартты түйме сыныптары да пайдаланылмауы керек .<a><input>.navbar-btn<a>.navbar-nav
Мәтін
Мәтін жолдарын элементі бар .navbar-text, әдетте <p>тиісті жетекші және түс үшін тегте ораңыз.
Жаңа емес сілтемелер
Кәдімгі шарлау тақтасының шарлау құрамдас бөлігінде жоқ стандартты сілтемелерді пайдаланатын адамдар .navbar-linkүшін әдепкі және кері шарлау тақтасының опцияларына сәйкес түстерді қосу үшін сыныпты пайдаланыңыз.
Құрамдас бөліктерді туралау
Шарлау сілтемелерін, пішіндерді, түймелерді немесе мәтінді .navbar-leftнемесе .navbar-rightутилита сыныптарын пайдаланып туралаңыз. Екі сыныпта көрсетілген бағытта CSS қалқымалы қосылады. Мысалы, шарлау сілтемелерін туралау үшін оларды <ul>тиісті қызметтік бағдарлама класы қолданылған бөлек қойыңыз.
.pull-leftБұл сыныптар және -ның аралас нұсқалары болып табылады .pull-right, бірақ олар құрылғы өлшемдері бойынша шарлау тақтасының құрамдастарын оңай өңдеу үшін медиа сұрауларына арналған.
Бірнеше құрамдастарды оң жаққа туралау
Қазіргі уақытта шарлау жолақтарында бірнеше .navbar-rightсыныптармен шектеулер бар. Мазмұнды дұрыс орналастыру үшін біз соңғы .navbar-rightэлементте теріс маржаны пайдаланамыз. Бұл сыныпты пайдаланатын бірнеше элементтер болған кезде, бұл шеттер ойдағыдай жұмыс істемейді.
Бұл компонентті v4 жүйесінде қайта жаза алатын болсақ, біз мұны қайта қарастырамыз.
Жоғарғы жағына бекітілген
Ортаға немесе шарлау тақтасының мазмұнына қосу .navbar-fixed-topжәне қосу ..container.container-fluid
Денеге төсеу қажет
paddingЕгер сіз жоғарғы жағына қоспасаңыз, бекітілген шарлау тақтасы басқа мазмұнды қабаттасады <body>. Өз құндылықтарыңызды қолданып көріңіз немесе төмендегі үзіндіні пайдаланыңыз. Кеңес: Әдепкі бойынша шарлау тақтасының биіктігі 50 пиксель.
Мұны негізгі Bootstrap CSS- тен кейін қосуды ұмытпаңыз.
Төменге дейін бекітілген
Ортаға немесе шарлау тақтасының мазмұнына қосу .navbar-fixed-bottomжәне қосу ..container.container-fluid
Денеге төсеу қажет
paddingТөменгі жағына қоспасаңыз, бекітілген шарлау тақтасы басқа мазмұнды қабаттасады <body>. Өз құндылықтарыңызды қолданып көріңіз немесе төмендегі үзіндіні пайдаланыңыз. Кеңес: Әдепкі бойынша шарлау тақтасының биіктігі 50 пиксель.
Мұны негізгі Bootstrap CSS- тен кейін қосуды ұмытпаңыз.
Статикалық жоғарғы
Шарлау тақтасының мазмұнын ортасына немесе тақтасына қосу .navbar-static-topжәне қосу арқылы бетпен бірге жылжатын толық енді шарлау тақтасын жасаңыз..container.container-fluid
Сыныптардан айырмашылығы .navbar-fixed-*, сізге ешқандай толтырғышты өзгерту қажет емес body.
Төңкерілген шарлау тақтасы
қосу арқылы шарлау тақтасының көрінісін өзгертіңіз .navbar-inverse.
Нан үгінділері
Ағымдағы беттің орнын шарлау иерархиясында көрсетіңіз.
:beforeБөлгіштер CSS-ге және арқылы автоматты түрде қосылады content.
Rdio шабыттандырылған қарапайым беттеу, қолданбалар мен іздеу нәтижелері үшін тамаша. Үлкен блокты жіберіп алу қиын, оңай масштабталады және үлкен басу аймақтарын қамтамасыз етеді.
Беттеу компонентін белгілеу
Беттеу құрамдас бөлігі <nav>оны экраннан оқу құралдарына және басқа көмекші технологияларға шарлау бөлімі ретінде анықтау үшін элементке оралуы керек. Бұған қоса, бетте мұндай бірнеше шарлау бөлімдері болуы мүмкін болғандықтан (мысалы, тақырыптағы негізгі шарлау немесе бүйірлік жолақты шарлау), оның мақсатын көрсететін сипаттама aria-labelберген жөн. <nav>Мысалы, беттеу құрамдас бөлігі іздеу нәтижелерінің жиыны арасында шарлау үшін пайдаланылса, сәйкес белгі болуы мүмкін aria-label="Search results pages".
Өшірілген және белсенді күйлер
Сілтемелер әртүрлі жағдайлар үшін теңшеуге болады. Басылмайтын .disabledсілтемелер үшін және .activeағымдағы бетті көрсету үшін пайдаланыңыз.
Белсенді немесе өшірілген якорьдерді орнына ауыстыруды немесе алдыңғы/келесі көрсеткілер жағдайында якорьді өткізіп жіберуді ұсынамыз, бұл <span>мақсатты мәнерлерді сақтай отырып, басу мүмкіндігін жою.
Жеңіл белгілеу мен стильдермен қарапайым беттеуді іске асыруға арналған жылдам алдыңғы және келесі сілтемелер. Бұл блогтар немесе журналдар сияқты қарапайым сайттар үшін тамаша.
Әдепкі мысал
Әдепкі бойынша, пейджер сілтемелерді ортаға салады.
Тураланған сілтемелер
Немесе әр сілтемені бүйірлеріне туралауға болады:
Қосымша өшірілген күй
Пейджерлік сілтемелер беттеудегі жалпы .disabledутилита класын да пайдаланады.
Жапсырмалар
Мысал
Жаңа тақырып тақырыбы
Жаңа тақырып тақырыбы
Жаңа тақырып тақырыбы
Жаңа тақырып тақырыбы
Жаңа тақырып тақырыбы
Жаңа тақырып тақырыбы
Қолжетімді нұсқалар
Белгінің көрінісін өзгерту үшін төменде аталған модификатор кластарының кез келгенін қосыңыз.
Әдепкі « Негізгі табыс туралы ақпарат » Қауіпті ескерту
Көптеген жапсырмалар бар ма?
Тар контейнерде әрқайсысында өз inline-blockэлементі (белгіше сияқты) бар ондаған кірістірілген белгілер болған кезде көрсету мәселелері туындауы мүмкін. Бұны айналып өту жолы - орнату display: inline-block;. Мәтінмән және мысал үшін #13219 қараңыз .
Белгілер
<span class="badge">Сілтемелерге, Bootstrap шолуларына және т.б. қосу арқылы жаңа немесе оқылмаған элементтерді оңай бөлектеңіз .
Джумботронды толық ені және бұрыштары дөңгеленген ету үшін оны барлық .containers сыртына қойып, оның орнына .containerішіне қосыңыз.
Бет тақырыбы
h1Беттегі мазмұн бөлімдерін дұрыс бөлуге және сегменттеуге арналған қарапайым қабық . Ол h1әдепкі smallэлементті, сондай-ақ көптеген басқа құрамдастарды (қосымша мәнерлермен) пайдалана алады.
Егер сіз әртүрлі биіктіктегі және/немесе ені бар нобайлардың Pinterest тәрізді көрсетілімін іздесеңіз, Masonry , Isotope немесе Salvattore сияқты үшінші тарап плагинін пайдалануыңыз қажет .
Әдепкі мысал
Әдепкі бойынша, Bootstrap нобайлары ең аз талап етілетін белгілеулері бар байланыстырылған кескіндерді көрсетуге арналған.
Арнаулы мазмұн
Біраз қосымша белгілеу арқылы тақырыптар, абзацтар немесе түймелер сияқты кез келген HTML мазмұнын нобайларға қосуға болады.
Нобай белгісі
Cras justo odio, dpibus ac facilisis in, egestas eget quam. Doec id elit non mi porta gravida және eget metus. Идентификатордың идентификаторы жоқ.
Қол жетімді және икемді ескерту хабарларымен әдеттегі пайдаланушы әрекеттері үшін мәтінмәндік кері байланыс хабарларын қамтамасыз етіңіз.
Мысалдар
Кез келген мәтінді және қосымша жабу түймешігін және негізгі ескерту хабарлары үшін .alertтөрт мәтінмәндік сыныптың біреуін (мысалы, ) ораңыз..alert-success
Әдепкі сынып жоқ
Ескертулерде әдепкі сыныптар жоқ, тек негізгі және модификатор сыныптары бар. Әдепкі сұр ескертудің мағынасы жоқ, сондықтан контекстік сынып арқылы түрді көрсету қажет. Сәттілік, ақпарат, ескерту немесе қауіптен таңдаңыз.
Жарайсың! Сіз осы маңызды ескерту хабарын сәтті оқыдыңыз.
Ескерту! Бұл ескерту назарыңызды қажет етеді, бірақ бұл өте маңызды емес.
Ескерту! Өзіңізді тексергеніңіз жөн, сіз тым жақсы көрінбейсіз.
О, шап! Бірнеше нәрсені өзгертіп, қайта жіберіп көріңіз.
Қабылданбаған ескертулер
.alert-dismissibleҚосымша және жабу түймешігін қосу арқылы кез келген ескертуді жасаңыз .
Қарапайым, бірақ икемді орындалу жолақтарымен жұмыс процесінің немесе әрекеттің орындалу барысы туралы соңғы кері байланысты қамтамасыз етіңіз.
Кросс-браузер үйлесімділігі
Прогресс жолақтары олардың кейбір әсерлеріне қол жеткізу үшін CSS3 ауысулары мен анимацияларын пайдаланады. Бұл мүмкіндіктерге Internet Explorer 9 және одан төмен немесе Firefox браузерінің ескі нұсқаларында қолдау көрсетілмейді. Opera 12 анимацияларды қолдамайды.
Content Security Policy (CSP) үйлесімділігі
Егер веб-сайтыңызда рұқсат бермейтін Мазмұн қауіпсіздігі саясаты (CSP) болса, төмендегі мысалдарымызда көрсетілгендей орындалу жолының ендерін орнату style-src 'unsafe-inline'үшін кірістірілген атрибуттарды пайдалана алмайсыз . styleҚатаң CSP-мен үйлесімді ендерді орнатудың балама әдістеріне кішкене теңшелетін JavaScript (ол орнатады element.style.width) немесе пайдаланушы CSS сыныптарын пайдалану кіреді.
Негізгі мысал
Әдепкі орындалу жолағы.
60% аяқталды
Белгімен
Көрінетін пайызды көрсету үшін орындалу жолағынан <span>бірге класын алып тастаңыз ..sr-only
60%
Белгі мәтіні тіпті төмен пайыздар үшін де оқылатын болуын қамтамасыз ету үшін min-widthорындалу жолағына a қосуды қарастырыңыз.
0%
2%
Мәтінмәндік баламалар
Прогресс жолақтары дәйекті мәнерлер үшін бірдей түймелердің кейбірін және ескерту сыныптарын пайдаланады.
40% аяқталды (сәтті)
20% аяқталды
60% аяқталды (ескерту)
80% аяқталды (қауіпті)
Жолақты
Жолақ әсерін жасау үшін градиентті пайдаланады. IE9 және одан төмен нұсқаларында қол жетімді емес.
40% аяқталды (сәтті)
20% аяқталды
60% аяқталды (ескерту)
80% аяқталды (қауіпті)
Анимациялық
Жолақтарды оңнан солға қарай жандандыру үшін .activeқосыңыз . .progress-bar-stripedIE9 және одан төмен нұсқаларында қол жетімді емес.
45% аяқталды
Қапталған
Оларды жинақтау үшін бірнеше жолақты бірдей .progressетіп салыңыз.
35% аяқталды (сәтті)
20% аяқталды (ескерту)
10% аяқталды (қауіпті)
Медиа объект
Мәтіндік мазмұнмен қатар солға немесе оңға тураланған кескінді көрсететін компоненттердің әртүрлі түрлерін (мысалы, блог пікірлері, твиттер және т.б.) құруға арналған дерексіз нысан мәнерлері.
Әдепкі медиа
Әдепкі медиа медиа нысанын (суреттер, бейне, аудио) мазмұн блогының сол немесе оң жағында көрсетеді.
Бұқаралық ақпарат құралдарының тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Бұқаралық ақпарат құралдарының тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Кірістірілген медиа тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Бұқаралық ақпарат құралдарының тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.
Бұқаралық ақпарат құралдарының тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.
Сыныптар .pull-leftжәне .pull-rightде бар және олар бұрын мультимедиа құрамдас бөлігі ретінде пайдаланылған, бірақ v3.3.0 нұсқасы бойынша бұл пайдалану үшін ескірген. Олар шамамен .media-leftжәне -ге тең .media-right, тек html-де .media-rightкейін орналастырылуы керек ..media-body
Тасымалдаушыны туралау
Кескіндерді немесе басқа медианы жоғарғы, орта немесе төмен туралауға болады. Әдепкі жоғарыдан тураланған.
Жоғарғы тураланған медиа
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Doec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus.
Орташа реттелген медиа
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Doec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus.
Төменгі жағына тураланған баспа құралы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Doec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus.
Медиа тізімі
Кішкене қосымша белгілеу арқылы тізімнің ішіндегі медианы пайдалануға болады (түсініктеме ағындары немесе мақалалар тізімдері үшін пайдалы).
Бұқаралық ақпарат құралдарының тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.
Кірістірілген медиа тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.
Кірістірілген медиа тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.
Кірістірілген медиа тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.
Тізім тобы
Тізім топтары элементтердің қарапайым тізімдерін ғана емес, сонымен қатар реттелетін мазмұны бар күрделілерді де көрсетуге арналған икемді және қуатты құрамдас болып табылады.
Негізгі мысал
Ең негізгі тізім тобы - жай ғана тізім элементтері және тиісті сыныптары бар ретсіз тізім. Оны келесі опциялармен немесе қажет болған жағдайда жеке CSS-мен жасаңыз.
Cras justo odio
Dapibus ac facilisis in
Морби Лео Рисус
Порта AC консекторы
Вестибулум және эроз
Белгілер
Белгілер құрамдас бөлігін кез келген тізім тобының элементіне қосыңыз және ол автоматты түрде оң жақта орналасады.
14Cras justo odio
2Dapibus ac facilisis in
1Морби Лео Рисус
Байланыстырылған элементтер
Тізім элементтерінің орнына анкерлік тегтерді пайдалану арқылы тізім тобы элементтерін байланыстырыңыз (бұл сонымен қатар <div>орнына ата- ананы білдіреді <ul>). Әрбір элементтің айналасында жеке ата-аналар қажет емес.
Тізім тобының элементтері тізім элементтерінің орнына түймелер болуы мүмкін (бұл сонымен қатар <div>орнына ата- ананы білдіреді <ul>). Әрбір элементтің айналасында жеке ата-аналар қажет емес. Мұнда стандартты .btnсыныптарды пайдаланбаңыз.
Өшірілген элементтер
.disabledӨшірілген болып көріну үшін .list-group-itemоны сұр түске қосу .
Әрқашан қажет болмаса да, кейде DOM-ды қорапқа салу керек. Мұндай жағдайлар үшін панель компонентін қолданып көріңіз.
Негізгі мысал
Әдепкі бойынша, .panelкейбір мазмұнды қамту үшін кейбір негізгі жиектер мен толтырғыштарды қолданудың бәрі орындалады.
Негізгі панельдің мысалы
Тақырыбы бар панель
көмегімен панельге тақырып контейнерін оңай қосыңыз .panel-heading. Сондай-ақ , алдын ала мәнерлі тақырып қосу үшін классы бар <h1>кез келген қосуға болады. Дегенмен - қаріп өлшемдері арқылы ауыстырылады .<h6>.panel-title<h1><h6>.panel-heading
Сілтемені дұрыс бояу үшін сілтемелерді тақырып ішінде орналастыруды ұмытпаңыз .panel-title.
Тақырыпсыз панель тақырыбы
Панель мазмұны
Панель тақырыбы
Панель мазмұны
Төменгі деректемесі бар панель
Түймелерді немесе қосымша мәтінді ораңыз .panel-footer. Мәтінмәндік вариацияларды пайдаланған кезде панельдің төменгі деректемелері түстер мен жиектерді иеленбейтінін ескеріңіз, себебі олар алдыңғы қатарда болуға арналмаған.
Панель мазмұны
Мәтінмәндік баламалар
Басқа құрамдас бөліктер сияқты контекстік күй сыныптарының кез келгенін қосу арқылы панельді белгілі бір контекст үшін оңайырақ мағыналы етіңіз.
Панель тақырыбы
Панель мазмұны
Панель тақырыбы
Панель мазмұны
Панель тақырыбы
Панель мазмұны
Панель тақырыбы
Панель мазмұны
Панель тақырыбы
Панель мазмұны
Үстелдермен
.tableБіркелкі дизайн үшін панельге кез келген жиегі жоқ қосыңыз . Егер бар болса, .panel-bodyбөлу үшін кестенің жоғарғы жағына қосымша жиек қосамыз.
Панель тақырыбы
Кейбір әдепкі панель мазмұны осында. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Идентификатордың идентификаторы жоқ.
#
Аты
Тек
Пайдаланушы аты
1
белгі
Отто
@mdo
2
Джейкоб
Торнтон
@май
3
Ларри
құс
@twitter
Егер панель корпусы болмаса, құрамдас панель тақырыбынан кестеге үзіліссіз жылжиды.
Кейбір әдепкі панель мазмұны осында. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Идентификатордың идентификаторы жоқ.
Cras justo odio
Dapibus ac facilisis in
Морби Лео Рисус
Порта AC консекторы
Вестибулум және эроз
Жауапты ендіру
Кез келген құрылғыда дұрыс масштабталатын ішкі арақатынасты жасау арқылы браузерлерге бейне немесе слайдшоу өлшемдерін олардың құрамындағы блоктың еніне негізделген анықтауға рұқсат беріңіз.
<iframe>Ережелер , <embed>, <video>, және <object>элементтеріне тікелей қолданылады ; .embed-responsive-itemбасқа атрибуттар үшін сәндеуді сәйкестендіру керек кезде, қосымша түрде айқын ұрпақ класын пайдаланыңыз .
Pro-Tip! s- ге қосудың қажеті жоқ, frameborder="0"өйткені <iframe>біз оны сіз үшін жоққа шығарамыз.
Ұңғымалар
Әдепкі жақсы
Шұңқырды элементке кірістірілген әсер беру үшін қарапайым әсер ретінде пайдаланыңыз.
Қараңдар, мен құдықтамын!
Қосымша сабақтар
Басқару толтырғышы және екі қосымша модификатор класы бар дөңгелек бұрыштар.