Қайта жүктеу
Қайта жүктеу, бір файлдағы элементке тән CSS өзгерістерінің жинағы, құрастыру үшін талғампаз, дәйекті және қарапайым базалық сызықты қамтамасыз ету үшін Bootstrap бағдарламасын іске қосыңыз.
Тәсіл
Қайта жүктеу тек элементтер селекторларын пайдалана отырып, көптеген HTML элементтерін біршама пікірі бар мәнерлермен қамтамасыз ететін Қалыптастыру негізінде құрылады. Қосымша сәндеу тек сыныптармен орындалады. Мысалы, біз кейбір <table>
стильдерді қарапайым базалық сызық үшін қайта жүктейміз және кейінірек .table
, .table-bordered
, және т.б. қамтамасыз етеміз.
Қайта жүктеу кезінде нені қайта анықтау керектігін таңдауға арналған нұсқауларымыз бен себептеріміз:
- Кеңейтілетін құрамдас кеңістік үшін
rem
s орнына s пайдалану үшін кейбір шолғыштың әдепкі мәндерін жаңартыңыз .em
- аулақ болыңыз
margin-top
. Тік шеттер құлап, күтпеген нәтижелер беруі мүмкін. Ең бастысы, бір бағытmargin
- бұл қарапайым психикалық модель. - Құрылғы өлшемдері бойынша оңай масштабтау үшін блок элементтері
rem
s үшінmargin
s пайдалануы керек. - Мүмкіндігінше
font
пайдаланып, -байланысты сипаттар туралы мәлімдемелерді барынша азайтыңыз.inherit
Беттің әдепкі мәндері
және элементтері бет <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
Тақырыптар мен абзацтар
Барлық тақырып элементтері — мысалы, <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><section></code> should be wrapped as inline.
Код блоктары
<pre>
Кодтың бірнеше жолы үшін s пайдаланыңыз . Тағы бір рет, дұрыс көрсету үшін кодтағы кез келген бұрыштық жақшалардан құтылуды ұмытпаңыз. Элемент <pre>
оны жою үшін қалпына келтіріледі және оның үшін бірліктерді margin-top
пайдаланыңыз .rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Айнымалылар
Айнымалы мәндерді көрсету үшін <var>
тегті пайдаланыңыз.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Пайдаланушы енгізуі
<kbd>
Әдетте пернетақта арқылы енгізілетін енгізуді көрсету үшін пайдаланыңыз .
Параметрлерді өңдеу үшін түймесін басыңыз 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)
.
Бұл өзгерістер және т.б. төменде көрсетілген.
Күн мен түсті енгізуді қолдау
Күнді енгізуге барлық браузерлер, атап айтқанда Safari толық қолдау көрсетпейтінін есте сақтаңыз.
Түймедегі көрсеткіштер
Қайта жүктеу role="button"
әдепкі курсорды өзгертуге арналған жақсартуды қамтиды pointer
. Элементтердің интерактивті екенін көрсетуге көмектесу үшін осы төлсипатты элементтерге қосыңыз. <button>
Бұл рөл өз cursor
өзгерістерін алатын элементтер үшін қажет емес .
<span role="button" tabindex="0">Non-button element button</span>
Әртүрлі элементтер
Мекенжай
Элемент <address>
браузердің әдепкі мәнін қалпына келтіру үшін font-style
жаңартылады . қазір де мұра болып табылады және қосылды. s ең жақын ата-баба (немесе бүкіл жұмыс тобы) үшін байланыс ақпаратын көрсетуге арналған. Жолдарды аяқтау арқылы пішімдеуді сақтаңыз .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Толық аты
[email protected]
Блоктау
Блок тырнақшаларындағы әдепкі margin
мән - болып табылады , сондықтан біз оны басқа элементтермен сәйкес келетін нәрсе үшін 1em 40px
қалпына келтіреміз .0 0 1rem
Блок тырнақша элементінде қамтылған белгілі дәйексөз.
Source Title бойынша танымал біреу
Кірістірілген элементтер
Элемент <abbr>
абзац мәтіні арасында ерекшеленуі үшін негізгі стильді алады.
Түйіндеме
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
сыныпты пайдаланыңыз.