Қайта жүктеу

Қайта жүктеу, бір файлдағы элементке тән CSS өзгерістерінің жинағы, құрастыру үшін талғампаз, дәйекті және қарапайым базалық сызықты қамтамасыз ету үшін Bootstrap бағдарламасын іске қосыңыз.

Тәсіл

Қайта жүктеу тек элементтер селекторларын пайдалана отырып, көптеген HTML элементтерін біршама пікірі бар мәнерлермен қамтамасыз ететін Қалыптастыру негізінде құрылады. Қосымша сәндеу тек сыныптармен орындалады. Мысалы, біз кейбір <table>стильдерді қарапайым базалық сызық үшін қайта жүктейміз және кейінірек .table, .table-bordered, және т.б. қамтамасыз етеміз.

Қайта жүктеу кезінде нені қайта анықтау керектігін таңдауға арналған нұсқауларымыз бен себептеріміз:

Кеңейтілетін құрамдас кеңістік үшін rems орнына s пайдалану үшін кейбір шолғыштың әдепкі мәндерін жаңартыңыз .em
аулақ болыңыз margin-top. Тік шеттер құлап, күтпеген нәтижелер беруі мүмкін. Ең бастысы, бір бағыт margin- бұл қарапайым психикалық модель.
Құрылғы өлшемдері бойынша оңай масштабтау үшін блок элементтері rems үшін margins пайдалануы керек.
Мүмкіндігінше fontпайдаланып, -байланысты сипаттар туралы мәлімдемелерді барынша азайтыңыз.inherit

Беттің әдепкі мәндері

және элементтері бет <html>бойынша <body>жақсырақ әдепкі мәндерді қамтамасыз ету үшін жаңартылады. Нақтырақ айтқанда:

box-sizingжаһандық түрде әрбір элементте орнатылады, соның ішінде және *::before, *::afterүшін border-box. Бұл элементтің жарияланған енінің толтыруға немесе жиекке байланысты ешқашан асып кетпеуін қамтамасыз етеді.
Ешқандай база font-sizeжарияланбайды <html>, бірақ 16pxқабылданады (шолғыш әдепкі). пайдаланушы қалауларын құрметтей отырып және қол жетімді тәсілді қамтамасыз ете отырып, медиа сұраулары арқылы оңай жауап беретін типті масштабтау үшін font-size: 1remқолданылады .<body>
Сондай <body>-ақ жаһандық font-family, line-height, және мәндерін орнатады text-align. Бұл қаріп сәйкессіздігін болдырмау үшін кейінірек кейбір пішін элементтері арқылы мұраланады.
Қауіпсіздік үшін әдепкі бойынша <body>жарияланған .background-color#fff

Жергілікті қаріптер стегі

Әдепкі веб-қаріптер (Helvetica Neue, Helvetica және Arial) Bootstrap 4-те алынып тасталды және әрбір құрылғыда және ОЖ-де оңтайлы мәтінді көрсету үшін «түпнұсқа қаріптер стекке» ауыстырылды. Осы Smashing Magazine мақаласында жергілікті шрифт стектері туралы толығырақ оқыңыз .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Қаріптер дестесінде эмодзи қаріптері бар болғандықтан, көптеген жалпы таңба/dingbat Юникод таңбалары түрлі-түсті пиктографиялар ретінде көрсетілетінін ескеріңіз. Олардың сыртқы түрі браузердің/платформаның жергілікті эмодзи шрифтінде қолданылатын стильге байланысты өзгереді және оларға ешқандай CSS colorмәнерлері әсер етпейді.

Бұл бүкіл Bootstrap font-familyжүйесіне қолданылады <body>және автоматты түрде жаһандық түрде мұраланады. Ғаламдық параметрді ауыстыру үшін Bootstrap-ті font-familyжаңартыңыз және қайта құрастырыңыз.$font-family-base

Тақырыптар мен абзацтар

Барлық тақырып элементтері — мысалы, <h1>— және <p>оларды жою үшін қалпына келтіріледі margin-top. Оңай интервал үшін тақырыптар margin-bottom: .5remмен абзацтар қосылды .margin-bottom: 1rem

Айдар	Мысал
`<h1></h1>`	h1. Bootstrap тақырыбы
`<h2></h2>`	h2. Bootstrap тақырыбы
`<h3></h3>`	h3. Bootstrap тақырыбы
`<h4></h4>`	h4. Bootstrap тақырыбы
`<h5></h5>`	h5. Bootstrap тақырыбы
`<h6></h6>`	h6. Bootstrap тақырыбы

Тізімдер

Барлық тізімдер— <ul>, <ol>, және <dl>— margin-topөшірілген және margin-bottom: 1rem. Кірістірілген тізімдерде жоқ margin-bottom.

Барлық тізімдердің жоғарғы жиегі жойылады
Және олардың төменгі маржасы қалыпқа келді
Кірістірілген тізімдердің төменгі жиегі жоқ
- Осылайша олар біркелкі көрініске ие болады
- Әсіресе одан кейін тізім элементтері көп болса
Сол жақ төсеу де қалпына келтірілді

Міне, реттелген тізім
Бірнеше тізім элементтерімен
Оның жалпы көрінісі бірдей
Алдыңғы ретсіз тізім ретінде

Қарапайым стильдеу, анық иерархия және жақсырақ интервал үшін сипаттамалар тізімдері жаңартылды margin. <dd>қалпына келтіріп margin-left, 0қосыңыз margin-bottom: .5rem. <dt>s жуан жазылған .

Сипаттама тізімдері: Сипаттама тізімі терминдерді анықтау үшін өте қолайлы.
Мерзімі: Терминге анықтама.; Сол терминге екінші анықтама.
Басқа термин: Осы басқа терминнің анықтамасы.

Алдын ала пішімделген мәтін

Элементті <pre>жою үшін қалпына келтіріледі және оның үшін бірліктерді margin-topпайдалану керек .remmargin-bottom

.example-element {
  маржа-төменгі: 1rem;
}

Кестелер

Кестелер s мәнеріне сәл реттеледі <caption>, жиектерді жиыртады және тұтастай біркелкі болуын қамтамасыз етеді text-align. Жиектерге, толтыруға және т.б. қосымша өзгерістер сыныппен бірге келеді.table .

Бұл мысал кесте және бұл оның мазмұнын сипаттайтын тақырып.
Кесте тақырыбы	Кесте тақырыбы	Кесте тақырыбы	Кесте тақырыбы
Кесте ұяшығы	Кесте ұяшығы	Кесте ұяшығы	Кесте ұяшығы
Кесте ұяшығы	Кесте ұяшығы	Кесте ұяшығы	Кесте ұяшығы
Кесте ұяшығы	Кесте ұяшығы	Кесте ұяшығы	Кесте ұяшығы

Пішіндер

Қарапайым негізгі стильдер үшін әртүрлі пішін элементтері қайта жүктелді. Міне, ең маңызды өзгерістер:

<fieldset>s жиектері, толтырулары немесе жиектері жоқ, сондықтан оларды жеке енгізулер немесе кірістер топтары үшін орауыш ретінде оңай пайдалануға болады.
<legend>s, өрістер жиындары сияқты, түрлердің тақырыбы ретінде көрсету үшін қайта стильдендірілген.
<label>s қолдануға display: inline-blockрұқсат ету үшін орнатылған margin.
<input>s, <select>s, <textarea>s және <button>s негізінен Нормаландыру арқылы шешіледі, бірақ Reboot олардың marginжәне жиынтықтарын line-height: inheritда жояды.
<textarea>s тек тігінен өлшемін өзгертуге өзгертілген, өйткені көлденең өлшемді өзгерту көбінесе бет орналасуын «үзеді».
<button>s және <input>түйме элементтерінде cursor: pointerқашан болады :not(:disabled).

Бұл өзгерістер және т.б. төменде көрсетілген.

Түймедегі көрсеткіштер

Қайта жүктеу role="button"әдепкі курсорды өзгертуге арналған жақсартуды қамтиды pointer. Элементтердің интерактивті екенін көрсетуге көмектесу үшін осы төлсипатты элементтерге қосыңыз. <button>Бұл рөл өз cursorөзгерістерін алатын элементтер үшін қажет емес .

Түйме емес элемент түймесі

<span role="button" tabindex="0">Non-button element button</span>

Әртүрлі элементтер

Мекенжай

Элемент <address>браузердің әдепкі мәнін қалпына келтіру үшін font-styleжаңартылады . қазір де мұра болып табылады және қосылды. s ең жақын ата-баба (немесе бүкіл жұмыс тобы) үшін байланыс ақпаратын көрсетуге арналған. Жолдарды аяқтау арқылы пішімдеуді сақтаңыз .italicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Толық аты
[email protected]

Блоктау

Блок тырнақшаларындағы әдепкі marginмән - болып табылады , сондықтан біз оны басқа элементтермен сәйкес келетін нәрсе үшін 1em 40pxқалпына келтіреміз .0 0 1rem

Блок тырнақша элементінде қамтылған белгілі дәйексөз.

Source Title бойынша танымал біреу

Кірістірілген элементтер

Элемент <abbr>абзац мәтіні арасында ерекшеленуі үшін негізгі стильді алады.

Nulla attr vitae elit libero, a pharetra augue.

Түйіндеме

cursorЖиынтықта әдепкі мән болып табылады text, сондықтан pointerэлементті басу арқылы әрекеттесу мүмкіндігін жеткізу үшін оны қалпына келтіреміз.

Кейбір мәліметтер

Мәліметтер туралы қосымша ақпарат.

Одан да толығырақ

Мұнда егжей-тегжейлі мәліметтер бар.

HTML5 `[hidden]`төлсипаты

HTML5 әдепкі бойынша мәнерленген жаңа жаһандық төлсипатты қосады. [hidden]PureCSSdisplay: none -тен идеяны алып , біз оның кездейсоқ жойылуын болдырмауға көмектесу үшін осы әдепкі параметрді жақсартамыз . IE10 қолдамаса да, біздің CSS-тегі нақты мәлімдеме осы мәселені шешеді.[hidden] { display: none !important; }display[hidden]

<input type="text" hidden>

jQuery үйлесімсіздігі

[hidden]$(...).hide()jQuery және $(...).show()әдістерімен үйлесімді емес . Сондықтан біз қазіргі уақытта элементтерді [hidden]басқарудың басқа әдістерін қолдамаймыз.display

Элементтің көрінуін ауыстырып-қосу үшін, яғни оның displayөзгертілмеген және элемент әлі де құжат ағынына әсер етуі мүмкін, оның орнына .invisibleсыныпты пайдаланыңыз.