Source

Қайта жүктеу

Қайта жүктеу, бір файлдағы элементке тән 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Бұл бүкіл 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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Массадағы бүтін molestie lorem
Pretium nisl aliquet ішіндегі жеңілдету
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Іріңді сода
- Vestibulum laoreet porttitor sem
- Тіріссіз еркіндікке ие болыңыз
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Массадағы бүтін molestie lorem
Pretium nisl aliquet ішіндегі жеңілдету
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Сипаттама тізімдері: Сипаттама тізімі терминдерді анықтау үшін өте қолайлы.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Doec id elit non mi porta gravida және eget metus.
Малесуада порта: Etiam porta sem malesuada magna mollis euismod.

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

Элемент <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 негізінен Нормаландыру арқылы шешіледі, бірақ Қайта жүктеу олардың marginжәне жиынтықтарын line-height: inheritда жояды.
<textarea>s тек тігінен өлшемін өзгертуге өзгертілген, өйткені көлденең өлшемді өзгерту көбінесе бет орналасуын «үзеді».
<button>s және <input>түйме элементтерінде cursor: pointerқашан болады :not(:disabled).

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

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

Мекенжай

Элемент <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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүтін санды орындаңыз.

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сыныпты пайдаланыңыз.