Қайта жүктеу

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

Бұл бетте

Тәсіл

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

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

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

CSS айнымалылары

v5.1.1 нұсқасына қосылды

v5.1.1 көмегімен біз @importбарлық CSS бумаларында (соның ішінде bootstrap.css, bootstrap-reboot.css, және bootstrap-grid.cssқосу үшін ) талап етілетін s стандартты қойдық. Бұл жиынтықта қанша пайдаланылғанына қарамастан, барлық жинақтарға деңгейлік CSS айнымалы мәндерін _root.scssқосады . Сайып келгенде, Bootstrap 5 жұмысын жалғастырады. :rootуақыт өте келе қосылған қосымша CSS айнымалыларын қараңыз.

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

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

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

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

Bootstrap әрбір құрылғыда және операциялық жүйеде мәтінді оңтайлы көрсету үшін «жергілікті шрифт стегін» немесе «жүйелік шрифт стегін» пайдаланады. Бұл жүйелік қаріптер экрандарда жақсарту, айнымалы қаріптерді қолдау және т.б. арқылы бүгінгі құрылғыларды ескере отырып арнайы жасалған. Осы Smashing Magazine мақаласында жергілікті шрифт стектері туралы толығырақ оқыңыз .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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

CSS айнымалылары

Bootstrap 5 жетілуді жалғастырған сайын, Sass-ты әрқашан қайта құрастырудың қажеті жоқ нақты уақытта көбірек теңшеуді қамтамасыз ету құралы ретінде CSS айнымалыларымен көбірек стильдер жасалады . Біздің көзқарасымыз - бастапқы Sass айнымалыларын алу және оларды CSS айнымалыларына түрлендіру. Осылайша, CSS айнымалы мәндерін пайдаланбасаңыз да, сізде әлі де Sass-тың барлық күші бар. Бұл әлі де орындалуда және оны толығымен жүзеге асыру үшін уақыт қажет.

Мысалы, жалпы стильдер :rootүшін мына CSS айнымалыларын қарастырыңыз:<body>

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

Іс жүзінде бұл айнымалы мәндер қайта жүктеуде келесідей қолданылады:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Бұл нақты уақытта қалағаныңызша теңшеуге мүмкіндік береді:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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

Барлық тақырып элементтері — мысалы, <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. Біз сондай-ақ padding-leftқосу <ul>және <ol>элементтерді қалпына келтірдік.

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

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

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

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

Кірістірілген код

Кодтың кірістірілген үзінділерін арқылы ораңыз <code>. HTML бұрыштық жақшаларынан аулақ болыңыз.

Мысалы, <section>кірістірілген ретінде оралу керек.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Код блоктары

<pre>Кодтың бірнеше жолы үшін s пайдаланыңыз . Тағы бір рет, дұрыс көрсету үшін кодтағы кез келген бұрыштық жақшалардан құтылуды ұмытпаңыз. Элемент <pre>оны жою үшін қалпына келтіріледі және оның үшін бірліктерді margin-topпайдаланыңыз .remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Айнымалылар

Айнымалы мәндерді көрсету үшін <var>тегті пайдаланыңыз.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Пайдаланушы енгізуі

<kbd>Әдетте пернетақта арқылы енгізілетін енгізуді көрсету үшін пайдаланыңыз .

Каталогтарды ауыстыру үшін каталог cdатауынан кейін теріңіз.
Параметрлерді өңдеу үшін түймесін басыңыз ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Шығару үлгісі

Бағдарламадан шыққан үлгіні көрсету үшін <samp>тегті пайдаланыңыз.

Бұл мәтін компьютерлік бағдарламадан алынған үлгі шығысы ретінде қарастырылуы керек.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Кестелер

Кестелер 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).

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

Аңыз мысал

Мысал енгізу

Мысал электрондық пошта

Мысал телефон

Мысал url

Мысал саны

Мысал іздеу

Мысал ауқымы

Мысал файлды енгізу

Мысал таңдау

Осы құсбелгіні қойыңыз

Бірінші нұсқа - анау-мынау Екінші нұсқа - бұл сәнді пішін басқару элементтерін орауды көрсету үшін өте ұзақ басқа нәрсе. Үшінші опция өшірілген

Мысал мәтіндік аумақ

Мысал күні

Мысал уақыты

Мысал пароль

Мысал datetime-local

Мысал аптасы

Мысал ай

Мысал түс

Мысал шығару 100

Күн мен түсті енгізуді қолдау

Күнді енгізуге барлық браузерлер, атап айтқанда Safari толық қолдау көрсетпейтінін есте сақтаңыз.

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

Қайта жүктеу 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>абзац мәтіні арасында ерекшеленуі үшін негізгі стильді алады.

HTML аббревиатура элементі .

Түйіндеме

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

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

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

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

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

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

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

<input type="text" hidden>

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

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

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

Қайта жүктеу

Тәсіл

CSS айнымалылары

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

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

CSS айнымалылары

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

Тізімдер

Кірістірілген код

Код блоктары

Айнымалылар

Пайдаланушы енгізуі

Шығару үлгісі

Кестелер

Пішіндер

Күн мен түсті енгізуді қолдау

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

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

Мекенжай

Блоктау

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

Түйіндеме

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

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

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