Алым

Башланган битләр проектның кереш экскурсиясен һәм нәрсә тәкъдим итүен күрсәтсәләр дә, бу документ ни өчен Bootstrap'та эшләгәннәребезгә игътибар итә. Бу безнең фәлсәфәбезне интернетта төзү, башкалар бездән өйрәнергә, безнең белән өлеш кертергә һәм яхшырырга булышсын өчен аңлата.

Дөрес булмаган әйберне карагыз, бәлки яхшырак эшләнергә мөмкин? Бер проблеманы ачыгыз - без сезнең белән сөйләшергә теләр идек.

Аннотация

Без боларның һәрберсенә чумырбыз, ләкин югары дәрәҗәдә, монда безнең карашка юл күрсәтә.

• Компонентлар җаваплы һәм мобиль булырга тиеш
• Компонентлар төп класс белән төзелергә һәм модификатор класслары аша киңәйтелергә тиеш
• Компонент дәүләтләр уртак z-индекс масштабына буйсынырга тиеш
• Мөмкин булганда, JavaScript белән HTML һәм CSS куллануны өстен күрегез
• Мөмкин булганда, махсус стильләр өстендә коммуналь хезмәтләр кулланыгыз
• Мөмкин булганда, HTML таләпләрен үтәүдән сакланыгыз (балалар селекторлары)

Onsаваплы

Bootstrap-ның җаваплы стильләре җаваплы булырга тиеш, алым еш мобиль-беренче дип атала . Без бу терминны документларыбызда кулланабыз һәм аның белән күбесенчә килешәбез, ләкин кайвакыт ул бик киң булырга мөмкин. Bootstrap'та һәр компонент тулысынча җаваплы булырга тиеш булмаса да, бу җаваплы алым CSS өстәмәләрен киметү турында, визупорт зурайган саен стильләр өстәргә этәреп.

Bootstrap аша сез моны безнең медиа сорауларында иң ачык күрерсез. Күпчелек очракта, без min-widthбилгеле бер ноктада кулланыла башлаган һәм югары нокталар аша үткәрә торган сораулар кулланабыз. Мәсәлән, чиксезлектән .d-noneкулланыла . min-width: 0Икенче яктан, .d-md-noneурта ноктадан һәм өскә.

Кайвакыт без max-widthкомпонентның катлаулылыгы таләп иткәндә кулланачакбыз. Кайвакыт, бу өстәмәләр безнең компонентлардан төп функцияне яңадан язуга караганда, тормышка ашыру һәм булышу өчен функциональ һәм психик яктан аңлаешлырак. Без бу ысулны чикләргә омтылабыз, ләкин аны вакыт-вакыт кулланачакбыз.

Дәресләр

Безнең Reboot, кросс-браузерны нормалаштыру стиль таблицасыннан кала, безнең барлык стильләр дә классларны селектор итеп куллануны максат итеп куялар. Бу тип селекторлардан (мәсәлән, input[type="text"]) һәм чит ата-аналар классларыннан (мәсәлән, .parent .child) стильләрне җиңел генә юкка чыгару өчен чистартуны аңлата.

Шулай булгач, компонентлар төп класс белән төзелергә тиеш, аларда гомуми, артык кыйммәтле милек-кыйммәт парлары юк. Мәсәлән, .btnһәм .btn-primary. Без , һәм .btnкебек барлык уртак стильләр өчен кулланабыз . Аннары без төс, фон-төс, чик төсе һ.б. өстәргә яратучы модификатор кулланабыз .displaypaddingborder-width.btn-primary

Модификатор класслары берничә вариантта үзгәртелергә тиешле берничә характеристика яки кыйммәт булганда гына кулланылырга тиеш. Modзгәртүчеләр һәрвакытта да кирәк түгел, шуңа күрә сез код кодларын саклыйсыз һәм аларны ясаганда кирәксез өстәмәләрне булдырмыйсыз. Модификаторларның яхшы үрнәкләре - безнең тема төс класслары һәм зурлык вариантлары.

z-индекс таразалары

Bootstrap'та ике z-indexтараза бар - компонент эчендәге элементлар һәм өстәмә компонентлар.

Компонент элементлары

• borderBootstrap-ның кайбер компонентлары бер-берсенә капланган элементлар белән төзелгән, милекне үзгәртмичә икеләтә чикләрне булдырмас өчен . Мәсәлән, төймә төркемнәре, кертү төркемнәре, пагинация.
• Бу компонентлар стандарт z-indexмасштабны 0бүлешәләр 3.
• 0Килешү (башлангыч), 1is :hover, 2is :active/ , .activeһәм .3:focus
• Бу алым безнең кулланучының иң өстенлекле өметләренә туры килә. Әгәр дә элемент тупланган булса, ул күздә һәм кулланучы игътибарында. Актив элементлар икенче урында, чөнки алар дәүләтне күрсәтәләр. Говер өченче урында, чөнки ул кулланучының ниятен күрсәтә, ләкин теләсә нинди әйберне куеп була.

Өстәмә компонентлар

Bootstrap ниндидер компонентны үз эченә ала, алар ниндидер каплау ролен башкара. Бу, иң югары, төшү тәртибе z-index, тотрыклы һәм ябыштыргыч диңгез плиткалары, модальләр, кораллар һәм поповерлар. Бу компонентларның үз z-indexмасштаблары бар 1000. Бу башлангыч номер үзбилгеләнгән рәвештә сайланган һәм безнең стильләр белән сезнең проектның гадәти стильләре арасында кечкенә буфер булып хезмәт итә.

Eachәрбер каплау компоненты аның z-indexкыйммәтен бераз арттыра, гомуми UI принциплары кулланучыга тупланган яки капланган элементларны һәрвакыт истә тотарга мөмкинлек бирә. Мисал өчен, модаль - документларны блоклау (мәсәлән, сез модаль эше өчен бүтән чара күрә алмыйсыз), шуңа күрә без аны үзебезнең диңгез такталары өстенә куябыз.

Бу турыда күберәк белү безнең z-indexмакет битендә .

JS өстендә HTML һәм CSS

Мөмкин булганда, без JavaScript өстендә HTML һәм CSS язуны өстен күрәбез. Гомумән алганда, HTML һәм CSS күп продуктлы һәм төрле тәҗрибә дәрәҗәсендәге кешеләргә керә ала. HTML һәм CSS шулай ук ​​сезнең браузерда JavaScript белән чагыштырганда тизрәк, һәм сезнең браузер сезнең өчен бик күп функция тәкъдим итә.

dataБу принцип - атрибутлар кулланып безнең беренче класслы JavaScript API . Безнең JavaScript плагиннарын куллану өчен сезгә JavaScript язарга кирәк түгел. киресенчә, HTML языгыз. Бу турыда тулырак JavaScript күзәтү битендә укыгыз .

Ниһаять, безнең стильләр гомуми веб элементларның төп тәртибенә нигезләнә. Мөмкин булганда, без браузер тәкъдим иткәнне куллануны өстен күрәбез. Мәсәлән, сез .btnтеләсә нинди элементка класс куя аласыз, ләкин күпчелек элементлар бернинди семантик кыйммәт яки браузер функциясен тәэмин итмиләр. Шулай итеп, без <button>s һәм <a>s кулланабыз.

Шул ук катлаулы компонентлар өчен дә бар. Без үзебезнең форма тикшерү плагинын яза алсак , кертү халәтенә нигезләнеп ата-аналар элементына класслар өстәргә, шуның белән текстны кызыл дип әйтергә мөмкинлек бирсәк, без һәр браузер биргән :valid/ псевдо-элементларны куллануны өстен күрәбез.:invalid

Коммуналь хезмәтләр

Коммуналь класслар - элеккеге Bootstrap 3 ярдәмчеләре - CSS шешәсенә һәм битнең начар эшләвенә каршы көрәштә көчле союздаш. Коммуналь класс, гадәттә, бер, үзгәрмәс мөлкәт-кыйммәт парлашуы класс буларак күрсәтелә (мәсәлән, .d-blockкүрсәтә display: block;). Аларның төп мөрәҗәгате - HTML язганда куллану тизлеге һәм сез язарга тиеш CSS күләмен чикләү.

Аерым алганда, махсус CSS турында, коммуналь хезмәтләр файлларның зурлыгын арттыру белән көрәшергә булыша ала, сезнең еш кабатланган милек-кыйммәт парларыгызны бер классларга киметеп. Бу сезнең проектларда масштаблы драматик эффект ясарга мөмкин.

Эластик HTML

Alwaysәрвакыт мөмкин булмаса да, без компонентларга HTML таләпләребездә артык догматик булмаска тырышабыз. Шулай итеп, без CSS селекторларыбыздагы бер классларга игътибар итәбез һәм балаларны тиз сайлап алучылардан сакланырга тырышабыз ( >). Бу сезгә тормышка ашыруда тагын да сыгылучанлык бирә һәм безнең CSSны гади һәм конкретрак тотарга ярдәм итә.

Код конвенциясе

Код Белешмәлеге (Bootstrap хезмәттәшеннән, @mdo) Bootstrap аша HTML һәм CSSны ничек язуыбызны документлаштыра. Ул гомуми форматлау, гомуми мәгънә дефолтлары, милек һәм атрибут заказлары һәм башкалар өчен күрсәтмәләр күрсәтә.

Бу стандартларны куллану өчен без Stylelint кулланабыз һәм безнең Sass / CSSда. Безнең гадәттәге Stylelint конфигурациясе ачык чыганак һәм башкалар өчен куллану һәм киңәйтү өчен мөмкин.

Без стандарт һәм семантик HTML куллану өчен, шулай ук ​​гомуми хаталарны ачыклау өчен vnu-банка кулланабыз.