Bootstrap 4 Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ: Bootstrap 4 ΡΠ΅Π½ΡΡΠΎΠ²ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
Bootstrap 4 ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ 2019 — Bootstrap 4.3.1
Π’Π°ΠΌ Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ CSS . Π’ΠΎ, ΡΡΠΎ ΡΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ Π² Bootstrap, Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ. Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ (Ρ) ΡΠΎΡΠΌΡ Π² ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΎΡΡ . Bootstrap 4 ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΠΌΠ΅Π΅Ρ h-100
ΠΊΠ»Π°ΡΡ Π΄Π»Ρ 100% ΡΠΎΡΡΠ° …
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ:
<div>
<div>
<form>
<div>
<label for="formGroupExampleInput">Example label</label>
<input type="text" placeholder="Example input">
</div>
<div>
<label for="formGroupExampleInput2">Another label</label>
<input type="text" placeholder="Another input">
</div>
</form>
</div>
</div>
https://www.codeply.com/go/raCutAGHre
Π²ΡΡΠΎΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΠΏΡΠ½ΠΊΡΠΎΠΌ (ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ) ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 100%
(ΠΈΠ»ΠΈ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΉ Π²ΡΡΠΎΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°)
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ height:100%
( ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ ) Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡΠΎΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° . Π ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
height:100vh;
Π²ΠΌΠ΅ΡΡΠΎ %
ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΉ Π²ΡΡΠΎΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ vh .
ΠΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ html, body {height: 100%} ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ min-vh-100
ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π²ΠΌΠ΅ΡΡΠΎ h-100
.
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ:
text-center
ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡdisplay:inline
ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠΎΠ»Π±ΡΠ°mx-auto
Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π½ΡΡΡΠΈ Π³ΠΈΠ±ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²offset-*
ΠΈΠ»ΠΈmx-auto
ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² (.col-
)justify-content-center
Π² ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ ΡΠ΅Π½ΡΡΠ° (col-*
) Π²Π½ΡΡΡΠΈrow
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π² Bootstrap 4
Bootstrap 4 ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΎΡΠΌΠ°
Bootstrap 4 ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½Π°Ρ Π³ΡΡΠΏΠΏΠ° Π²Π²ΠΎΠ΄Π°
Bootstrap 4 ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ + Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΡΠΊΡΠ°Π½Ρ
twitter-bootstrap-3 — Bootstrap col-sm-4 Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ
Π£ ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ° Π² div col-sm-4. ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΠ΅ΠΊΡΡ Π½Π΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ. ΠΠ°ΠΊ ΡΡΠΎ ΡΠ΅ΡΠΈΡΡ?
ΠΠΎΡ ΠΌΠΎΠΉ html-ΠΊΠΎΠ΄
<div>
<div>
<h2> HOW NIBOOK WORKS</h2>
<div><img src="img/Profile.png">
<h2>Become a "NI"booker</h2>
<h3>Create your profile and start sharing your skills and services to locals</h3>
</div>
<div><img src="img/bookmark.png">
<h2>Get booked from locals</h2>
<h3>Meet in your convenient place to provide your talent</h3>
</div>
<div><img src="img/page.png">
<h2>Receive your money</h2>
<h3>Get your money directly to your account</h3>
</div>
</div>
</div>
Π ΠΌΠΎΠΉ css
.how-it-works-title {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 18px;
margin: 25px 0 15px;
text-align: center;
padding-top: 10px;
}
.how-it-works-subtitle {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 18px;
margin: 25px 0 15px;
text-align: center;
padding-top: 10px;
font-weight: lighter;
padding-bottom: 10px;
}
.how-it-works-step-icon {
display: block;
margin: auto;
}
.section-title {
font-size: 28px;
font-color: #4C535D;
font-weight: bold;
line-height: 18px;
margin: 0;
padding-top: 50px;
padding-bottom: 60px;
text-align: center;
text-transform: uppercase;
}
.section-subtitle {
font-size: 15px;
font-weight: normal;
letter-spacing: 1.5px;
margin: 10px 0 0 0;
text-align: center;
}
Π― Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² bootstrap, css ΠΈ Ρ. Π., ΠΠΎΡΡΠΎΠΌΡ ΠΏΡΠΎΡΡ ΠΏΡΠΎΡΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π²ΠΎΠΏΡΠΎΡ Π΄Π»Ρ ΠΎΡΠ΅Π½Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ²
-1
ChinaXiaoHong
1 Π‘Π΅Π½ 2016 Π² 07:13
2 ΠΎΡΠ²Π΅ΡΠ°
ΠΡΡΡΠΈΠΉ ΠΎΡΠ²Π΅Ρ
ΠΠΎΡ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΌΠΈ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ Π²Π°ΠΌΠΈ — ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π» Π²ΡΠ΅, ΡΡΠΎ Π²Ρ ΠΊΠΎΠ΄ΠΈΡΡΠ΅ΡΠ΅, ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° 88 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * 87 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΈ Π²ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ. Π― ΠΏΡΠΎΠ²Π΅Π» Π»ΠΈΠ½ΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΏΡΠ°Π²ΠΊΠΈ, Π²ΡΠ΅ ΠΎΠ½ΠΈ Π²ΡΡΠΎΠ²Π½Π΅Π½Ρ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ
7
Mirza Obaid
1 Π‘Π΅Π½ 2016 Π² 05:04
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π»Ρ Π²Π°ΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Ρ.Π΅. profile.img , bookmarkg.png , page.png
ΠΏΠΎΡ
ΠΎΠΆΠ΅, ΡΡΠΎ Π²Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ°ΠΊΠΆΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈΡΡΡ font-awesome
Π²ΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
2
Mohit Arora
1 Π‘Π΅Π½ 2016 Π² 04:21
html β Π¦Π΅Π½ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π² Bootstrap 4
ΠΠ°ΠΆΠ½ΠΎ! ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ
ΠΡΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ ΠΎΡΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ , Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ!
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ΅Π½ΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π² Bootstrap 4 …
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ flexbox & size utilities , ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ container
ΠΏΠΎΠ»Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ ΠΈ display: flex
. ΠΡΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π½Π΅ ΡΡΠ΅Π±ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ CSS (Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²ΡΡΠΎΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° (ΡΠΎ Π΅ΡΡΡ: html, body) Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ 100% ).
ΠΠ°ΡΠΈΠ°Π½Ρ 1 align-self-center
Π΄Π»Ρ flexbox child
<div>
<div>
I'm vertically centered
</div>
</div>
https://www.codeply.com/go/fFqaDe5Oey
ΠΠ°ΡΠΈΠ°Π½Ρ 2 align-items-center
Π΄Π»Ρ flexbox parent (.row
ΡΠ°Π²Π΅Π½ display:flex; flex-direction:row
)
<div>
<div>
<div>
<div>
I'm vertically centered
</div>
</div>
</div>
</div>
https://www.codeply.com/go/BumdFnmLuk
ΠΠ°ΡΠΈΠ°Π½Ρ 3 justify-content-center
Π½Π° flexbox parent (.card
ΡΠ°Π²Π΅Π½ display:flex;flex-direction:column
)
<div>
<div>
<div>
<div>
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/3gySSEe7nd
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Bootstrap 4 ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Bootstrap 4 ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ flexbox ΠΈ ββ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈΡΡ , ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² ΠΊ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ. http://www.codeply.com/go/WG15ZWC4lf
1 — Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΎΠ»Π΅ΠΉ:
ΠΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ — ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ my-auto
. ΠΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, h-100
Π΄Π΅Π»Π°Π΅Ρ ΡΡΡΠΎΠΊΡ ΠΏΠΎΠ»Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ, Π° my-auto
Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΠ»Π±Π΅Ρ col-sm-12
.
<div>
<div>
<div>Card</div>
</div>
</div>
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΎΠ»Π΅ΠΉ ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
my-auto
ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»Ρ Π½Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈ Y ΠΈ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ΅Π½:
margin-top: auto;
margin-bottom: auto;
2 — ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Ρ Flexbox:
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Bootstrap 4 .row
ΡΠ΅ΠΏΠ΅ΡΡ display:flex
, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ align-self-center
Π² Π»ΡΠ±ΠΎΠΌ ΡΡΠΎΠ»Π±ΡΠ΅ Π΄Π»Ρ Π΅Π³ΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ …
<div>
<div>
<div>
Center
</div>
</div>
<div>
<div>
Taller
</div>
</div>
</div>
ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ align-items-center
Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ .row
, ΡΡΠΎΠ±Ρ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π²ΡΠ΅ col-*
ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π² ΡΡΡΠΎΠΊΠ΅ …
<div>
<div>
<div>
Center
</div>
</div>
<div>
<div>
Taller
</div>
</div>
</div>
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΡΠΌ. ΠΡΠΎ Q/A ΠΏΠΎ ΡΠ΅Π½ΡΡΡ, Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ°Π²Π½ΡΡ Π²ΡΡΠΎΡΡ
3 — ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΈΠ»ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
Bootstrap 4 ΠΈΠΌΠ΅Π΅Ρ display utils , ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ display:table
, display:table-cell
, display:inline
ΠΈ Ρ.Π΄. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Ρ ΡΡΠΈΠ»ΠΈΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ, Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠ΅ΠΉΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ.
<div>
<div>
<div>
I am centered vertically
</div>
</div>
</div>
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΈΠ»ΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠΎΠ»ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² <div>
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ .row in .container
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ ΠΈ Π½ΠΈΠ· Π² <div>
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ ΡΠ΅Π±Π΅Π½ΠΊΠ° Π²Π½ΡΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ
Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ jumbotron
ΠΠ°ΠΆΠ½ΠΎ! Π― ΡΠΏΠΎΠΌΠΈΠ½Π°Π» Π²ΡΡΠΎΡΡ?
ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΡΡΡΡ Π½Π° Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π²Π°Ρ CSS …
body,html {
height: 100%;
}
ΠΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ min-height: 100vh
Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ/ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. Π ΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Π²ΡΡΠΎΡΡ .
Π’Π°ΠΊΠΆΠ΅ ΡΠΌ:
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π² bootstrap 4
Bootstrap 4 ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ
ΠΠ±Π·ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Bootstrap Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°
Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ½ΠΎ Β«ΡΒ Π½ΡΠ»ΡΒ», ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²Π°Π»ΠΈΠ΄Π½ΡΡ Π²Π΅ΡΡΡΠΊΡΒ HTMLΒ ΠΈ ΡΡΠΈΠ»ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ CSS, Π° Π΄Π»ΡΒ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΠ·ΡΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ JavaScript.Β
Π Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ
ΡΠ°ΠΉΡΠ°Ρ
, Π³Π΄Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°ΡΡ Π»ΠΎΠ³ΠΈΠΊΡ ΠΈ Ρ
ΡΠ°Π½ΠΈΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΌΡ Π΄Π°Π½Π½ΡΡ
Ρ Π±ΡΡΡΡΡΠΌ Π΄ΠΎΡΡΡΠΏΠΎΠΌ ΠΊ Π½ΠΈΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ·ΡΠΊΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Php, Python, Ruby ΠΈΠ»ΠΈ Π΄Ρ. Π² ΡΠ²ΡΠ·ΠΊΠ΅ Ρ Π±Π°Π·Π°ΠΌΠΈ Π΄Π°Π½Π½ΡΡ
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, MySQL), ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΡ
Π½Π° ΡΠ·ΡΠΊΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ SQL.
ΠΠ΅Π»Π°ΡΡ ΡΠ°ΠΉΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π±Π΅Π· Π³ΠΎΡΠΎΠ²ΠΎΠΉ ΠΎΡΠ½ΠΎΠ²Ρ Π΄ΠΎΠ»Π³ΠΎ ΠΈΒ Π΄ΠΎΡΠΎΠ³ΠΎ. ΠΠΎΠΊΠ° Π΄Π΅Π»Π°Π΅ΡΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΠ°ΠΉΡ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΡΠΆΠ΅ ΠΌΠΎΡΠ°Π»ΡΠ½ΠΎ ΡΡΡΠ°ΡΠ΅ΡΡ ΠΈ ΡΠ΅ΡΡΡΡΡ Π±ΡΠ΄ΡΡ ΠΏΠΎΡΡΠ°ΡΠ΅Π½Ρ Π²ΠΏΡΡΡΡΡ.
CMS ΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ
Π£ΡΠΊΠΎΡΠΈΡΡ ΠΈ ΡΠΏΡΠΎΡΡΠΈΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΡΠ°ΠΉΡΠ°Β CMS. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ,Β Β«1Π‘-ΠΠΈΡΡΠΈΠΊΡ: Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠΎΠΌΒ», ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠΌΠ΅Π΅Ρ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΈ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ Π΄ΠΎΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CMS ΡΠ΅Π»Π΅ΡΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎ Π΄Π»Ρ ΡΠΈΠΏΠΎΠ²ΡΡ
ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² β ΡΡΠΎΒ ΠΊΠΎΡΠΏΠΎΡΠ°ΡΠΈΠ²Π½ΡΠ΅ ΡΠ°ΠΉΡΡ, ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Ρ, ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ, Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΈ.Β
ΠΡΠ»ΠΈ ΠΏΡΠΎΠ΅ΠΊΡ Π½Π΅ΡΠΈΠΏΠΎΠ²ΠΎΠΉ ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΡΡΠ°Π» Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠΎΠ² ΠΈ ΠΏΠΎΠΊΡΠΏΠ°ΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΡΠ°ΠΉΡ ΡΠΎ ΡΠ²ΡΠ·Π°Π½Π½ΡΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΡΠΎ ΡΡΠΎΠΈΡ Π·Π°Π΄ΡΠΌΠ°ΡΡΡΡ ΠΎ Π²Π΅Π±-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°Ρ
. Π’Π°ΠΊΠΈΡ
, ΠΊΠ°ΠΊ: Angular, Laravel, Symfony,Β React ΠΈΠ»ΠΈ Π΄Ρ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΠΎΡ CMS ΠΈΒ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ ΡΠ΄ΠΎΠ±Π½Π΅Π΅, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎΠΈΠΌΠΎΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π²ΡΠΉΠ΄Π΅Ρ ΡΠΈΠ»ΡΠ½ΠΎ Π²ΡΡΠ΅.Β
ΠΡΠ°ΠΊ ΠΌΡ ΠΏΠΎΠ΄ΠΎΡΠ»ΠΈ ΠΊ ΡΠ°ΠΊΠΎΠΌΡ ΠΏΠΎΠ½ΡΡΠΈΡ, ΠΊΠ°ΠΊ Β«ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΒ» β ΡΡΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½Π°Ρ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠ°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ°Ρ ΡΠΏΡΠΎΡΡΠΈΡΡ ΠΈ ΡΡΠΊΠΎΡΠΈΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΠΏΠΎΠ²ΡΡ
Π·Π°Π΄Π°Ρ, Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠ½ΡΡ
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ·ΡΠΊΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π€ΡΠ΅ΜΠΉΠΌΠ²ΠΎΡΠΊ (ΠΈΠ½ΠΎΠ³Π΄Π° ΡΡΠ΅ΠΉΠΌΠ²ΠΎΜΡΠΊ; Π°Π½Π³Π»ΠΈΡΠΈΠ·ΠΌ, Π½Π΅ΠΎΠ»ΠΎΠ³ΠΈΠ·ΠΌ ΠΎΡ framework β ΠΎΡΡΠΎΠ², ΠΊΠ°ΡΠΊΠ°Ρ, ΡΡΡΡΠΊΡΡΡΠ°) β ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½Π°Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ°Ρ ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ; ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΎΠ±Π»Π΅Π³ΡΠ°ΡΡΠ΅Π΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°.Β
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Bootstrap
ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠ°ΠΊΠ°Ρ Π±Ρ Π½ΠΈ Π±ΡΠ»Π° Π²ΡΠ±ΡΠ°Π½Π° ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠ°, ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΠΎ ΠΈ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΠ°ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡΡΒ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ.Β
ΠΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠΌ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ Π² Twitter,Β
BootstrapΒ (Β«Π±ΡΡΡΡΡΠ°ΠΏΒ»)Β ΡΡΠ°Π» ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ
ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ
ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΡ
ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² ΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π² ΠΌΠΈΡΠ΅.Β Bootstrap ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ Π»ΠΈΡΠ΅Π½Π·ΠΈΠ΅ΠΉ
MIT β Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ Π»ΠΈΡΠ΅Π½Π·ΠΈΡ, ΡΡΠ΅Π±ΡΡΡΠ°Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΡ Π°Π²ΡΠΎΡΡΠΊΠΈΡ
ΠΏΡΠ°Π² ΠΈ Π»ΠΈΡΠ΅Π½Π·ΠΈΠΎΠ½Π½ΡΡ
ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ.Β
ΠΠ· Π½Π°ΡΠ΅ΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ, ΡΠ°ΠΌΡΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈΒ Bootstrap β 3 (v3.4.1) ΠΈΒ 4 (Β v4.6.x), ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠΈΡ
Π²Π΅ΡΡΠΈΠΉ ΡΠ΄Π΅Π»Π°Π½Π° ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΠΌΠ°ΡΡΠ° ΡΠ°ΠΉΡΠΎΠ². ΠΠ° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠ°ΡΡΠΈ ΡΠΆΠ΅ Π²ΡΠΏΡΡΠ΅Π½Π° ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ 5 Π²Π΅ΡΡΠΈΡ Π΄Π»Ρ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ (v5.0.0-beta2).Β
Π Π°Π½Π΅Π΅ ΡΠΏΠΎΠΌΡΠ½ΡΡΠ°Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°Β Β«1Π‘-ΠΠΈΡΡΠΈΠΊΡ: Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠΎΠΌΒ» ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΎΡΒ ΠΆΠ΅ Bootstrap 3 ΠΈΒ 4 Π²Π΅ΡΡΠΈΠΉ Π²ΠΎΒ ΠΌΠ½ΠΎΠ³ΠΈΡ
ΡΠ°Π±Π»ΠΎΠ½Π°Ρ
ΡΠ²ΠΎΠΈΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ ΠΊΠΎΠ΄ ΠΈΒ ΡΠΏΡΠΎΡΠ°Π΅Ρ Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΈΒ ΡΠ°Π·Π²ΠΈΡΠΈΠ΅.
ΠΠΎΡΠΎΡΠΊΠΎ ΠΎΒ ΠΏΠ»ΡΡΠ°Ρ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Bootstrap:
- ΠΡΡΠΎΠΊΠ°Ρ ΡΠΊΠΎΡΠΎΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ: ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΒ Π½Π΅Β ΠΏΠΈΡΠ΅ΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, Π°Β ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΠ΅ ΠΊΠ°ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈΒ ΡΡΠΈΠ»ΠΈΡΡ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ ΠΈΒ Π²Β ΠΊΠ°ΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π½Π°Β ΡΠ°ΠΉΡΠ΅.
- ΠΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ:Β ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π°Β ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ: ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°, Π½Π°Β ΠΊΠΎΡΠΎΡΠΎΠΌ Π΅Π³ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ.
- ΠΡΠΊΡΡΡΡΠΉ ΠΊΠΎΠ΄ ΠΈ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΡ: ΠΌΠΎΠΆΠ½ΠΎ Π³ΠΈΠ±ΠΊΠΎΒ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΊΠΎΠ΄ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°.
- ΠΡΠΎΡΡΠΎΡΠ°: ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡ Π½Π΅Β ΡΡΠ΅Π±ΡΠ΅Ρ ΡΠΊΡΠΏΠ΅ΡΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°Π½ΠΈΡΒ HTMLΒ ΠΈΒ CSS, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π΄Π°ΠΆΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΌΠΎΠΆΠ΅Ρ ΡΠ²Π΅ΡΡΡΠ°ΡΡ ΡΠ°ΠΉΡ.
- ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ: Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Ρ ΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΒ Π΄Π»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².
ΠΠ°ΡΠ° ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΡΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠ°ΡΡΠ½Π΅ΡΠΎΠΌ Β«1Π‘-ΠΠΈΡΡΠΈΠΊΡ» и ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠ°ΠΉΡΡ Π½Π°Β ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅ Β«1Π‘-ΠΠΈΡΡΠΈΠΊΡ: Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠΎΠΌΒ». ΠΒ Π΄Π»Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΈΒ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² Π½Π°Β Π΄ΠΈΡΠΏΠ»Π΅ΡΡ
Π»ΡΠ±ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΒ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ (Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΠΈ) ΠΌΡΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π²Π΅ΡΡΡΠΊΡ ΠΈΒ front-endΒ (ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΎΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅) Π½Π°Β ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Bootstrap 3 ΠΈΒ 4 Π²Π΅ΡΡΠΈΠΉ, Π»ΠΈΠ±ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ flex Π½Π°Β HTMLΒ 5, Π΅ΡΠ»ΠΈ Bootstrap Π΄Π»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈΠ·Π±ΡΡΠΎΡΠ΅Π½.
Π§ΡΠΎ Π²Ρ
ΠΎΠ΄ΠΈΡ Π²Β Bootstrap
BootstrapΒ β ΡΡΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ HTML, CSS ΠΈΒ JavaScript, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π°Π±ΠΎΡ Π³ΠΎΡΠΎΠ²ΡΡ
Π±Π»ΠΎΠΊΠΎΠ², ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈΒ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΡΡΠ½ΠΊΡΠΈΠΉ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠΉ ΠΈΒ ΡΠ΄ΠΎΠ±Π½ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΠ»Ρ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡ Π±Π°Π·ΠΎΠ²ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΡΠ·ΡΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ HTML, ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ
ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ CSS ΠΈΒ ΡΠ·ΡΠΊΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ JavaScript.Β
Bootstrap Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ HTML- ΠΈ CSS-ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ, Π²Π΅Π±-ΡΠΎΡΠΌ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΌΠ΅ΡΠΎΠΊ, Π±Π»ΠΎΠΊΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ ΠΏΡΠΎΡΠΈΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π²Π΅Π±-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, Π²ΠΊΠ»ΡΡΠ°Ρ JavaScript-ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ.
ΠΠ°Π»Π΅Π΅ ΡΡΠ»ΠΎΠ²Π½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» Π½Π°Β ΡΠ΅ΡΡΡΠ΅ Π±Π»ΠΎΠΊΠ°: ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈΒ ΡΡΠΈΠ»ΠΈΡΡ.
Π Π°Π·ΠΌΠ΅ΡΠΊΠ°
ΠΠ°Π·ΠΎΠ²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Bootstrap ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π²Β ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡΒ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π½Π°ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (ΡΠ΅ΠΊΡΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ°Π±Π»ΠΈΡΡ, ΡΠΎΡΠΌΡ ΠΈ Ρ. ΠΏ.). ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΌΡΒ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ Π²Β ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅Β β ΡΡΠΎ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΈΠ·Β 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ (ΡΡΠΎΠ»Π±ΡΠΎΠ²), ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΌΡΒ Ρ
ΠΎΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ΅ΠΊΡΡ Π½Π°Β ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΠΌΡΒ ΡΠΎΠ·Π΄Π°Π΅ΠΌ Π±Π»ΠΎΠΊ ΡΠΈΡΠΈΠ½ΠΎΠΉ 6 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. Π‘ΠΈΡΡΠ΅ΠΌΠ° ΡΠ΅ΡΠΎΠΊ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π²Β ΡΠ΅Π±Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ, ΡΡΠ΄Ρ ΠΈΒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ (ΡΡΠΎΠ»Π±ΡΡ). ΠΒ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΡΡΠΎ Π²ΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: ΠΌΡΒ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π΄Π°Π»Π΅Π΅ ΡΠΎΠ·Π΄Π°Π΅ΠΌ Π²Β Π½Π΅ΠΌ ΡΡΠ΄, Π°Β Π²Β ΡΡΠ΄Ρ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΡΡΠΎΠ»Π±Π΅Ρ ΠΈΒ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ Π²Β Π½Π΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.
ΠΠΎΠ»Π΅Π΅ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π°Β ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ ΡΒ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Bootstrap 4.6 (
https://bootstrap-4.ru/docs/4.6/getting-started/introduction/):
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΡΡΠ΄ΠΎΠ² ΠΈΒ ΡΡΠΎΠ»Π±ΡΠΎΠ²:
Π§ΡΠΎ Π΅ΡΠ΅ Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅:
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΡΡΠΎΠ»Π±ΡΡ ΠΏΠΎΒ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ:
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΡΡΠΎΠ»Π±ΡΡ ΠΏΠΎΒ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ:
- ΠΠ·ΠΌΠ΅Π½ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°:
- Π‘ΠΌΠ΅ΡΠ°ΡΡ ΠΈΒ ΠΎΡΠΎΠ΄Π²ΠΈΠ³Π°ΡΡ ΡΡΠΎΠ»Π±ΡΡ:
- ΠΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΡΡΠ΄Ρ ΠΈΒ ΡΡΠΎΠ»Π±ΡΡ:
Π‘Β Π½ΡΠ°Π½ΡΠ°ΠΌΠΈ ΡΠ°Π±ΠΎΡΡ ΡΒ ΡΡΠ΄Π°ΠΌΠΈ ΠΈΒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Π½Π°Β ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Bootstrap:
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
Π’ΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°
- ΠΒ Bootstrap Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² h2-h6 Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΅ΠΊΡΡΠ°:
- ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΠΎΡΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°:
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ°, ΠΎΡΡΡΠΎΡΡΠ΅Π³ΠΎ ΠΎΡΒ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΌΠ°ΡΡΡ:
- ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΡ ΠΈΒ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°:
- Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΏΠΎΠΊΠ°Π·Π° Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡ:
- Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠΈΡΠ°Ρ, ΠΈΡ Β ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² ΠΈΒ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅:
Π‘Β Π½ΡΠ°Π½ΡΠ°ΠΌΠΈ ΡΠ°Π±ΠΎΡΡ ΡΒ ΡΠ΅ΠΊΡΡΠΎΠΌ Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Π½Π°Β ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Bootstrap:
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎΒ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ:
- Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΡΠΊΠΈΠ·ΠΎΠ²Β β Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π³ΡΠ°Π½ΠΈΡΠ° Π²Β 1 ΠΏΠΈΠΊΡΠ΅Π»Ρ:
- Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΈΒ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ:
Π‘Β Π½ΡΠ°Π½ΡΠ°ΠΌΠΈ ΡΠ°Π±ΠΎΡΡ ΡΒ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Π½Π°Β ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Bootstrap:
Π’Π°Π±Π»ΠΈΡΡ
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ .table ΠΊΒ Π»ΡΠ±ΠΎΠΌΡ ΡΠ΅Π³Ρ table ΠΈΒ ΡΠ°ΡΡΠΈΡΡΠΉΡΠ΅ Π΅Π³ΠΎ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠ»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ² ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ².
- ΠΠ½Π²Π΅ΡΡΠΈΡΡΠΉΡΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΒ ΡΠ²Π΅ΡΠ»ΡΡ Π½Π°Β ΡΠ΅ΠΌΠ½ΡΠ΅ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ .table-dark ΠΈ .thead-dark:
- Π Π°Π·Π΄Π΅Π»ΡΠΉΡΠ΅ Β«ΠΏΠΎΠ»ΠΎΡΠΊΠ°ΠΌΠΈ Π·Π΅Π±ΡΡΒ» ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ .table-striped:
- Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΒ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ .table-bordered ΠΈΒ Π±Π΅Π· Π³ΡΠ°Π½ΠΈΡ Ρ .table-borderless, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΠΉΡΠ΅ ΡΒ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ:
- Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° .table-sm:
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ°ΡΠΊΡΠ°ΡΠΊΡ ΡΡΠ΄ΠΎΠ² ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡΠ°Π»ΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ:
- ΠΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° .table-responsive ΠΈΠ»ΠΈ Π·Π°Π΄Π°ΠΉΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, Π½Π°Β ΠΊΠΎΡΠΎΡΠΎΠΌ Π΄Π°Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ .table-responsive{-sm|-md|-lg|-xl}:
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
Π£Π²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ
Π£Π²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π΄Π»Ρ Π»ΡΠ±ΠΎΠΉ Π΄Π»ΠΈΠ½Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈΒ ΠΎΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ
ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ. ΠΠ»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, .alert-success). ΠΒ Π΄Π»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΡΠ²Π΅ΡΠ° ΡΡΡΠ»ΠΎΠΊ ΡΠ²Π΅ΡΠ°ΠΌ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .alert-link:
ΠΒ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡΡ
Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Β«ΠΊΡΠ΅ΡΡΠΈΠΊΒ» Π΄Π»Ρ Π΅Π³ΠΎ Π·Π°ΠΊΡΡΡΠΈΡ ΠΈΒ ΠΊΠ»Π°ΡΡ .alert-dismissible, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΊΡΠ΅ΡΡΠΈΠΊΠ°Β» (ΠΊΠ»Π°ΡΡΒ .close) ΠΈΒ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΎΡΡΡΡΠΏΒ ΡΠΏΡΠ°Π²Π°. ΠΒ Β«ΠΊΡΠ΅ΡΡΠΈΠΊΠ΅Β» ΠΎΡΠΌΠ΅Π½Ρ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ data-dismiss=Β«alertΒ» Π·Π°ΠΏΡΡΠΊΠ°ΡΡΠΈΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ JavaScript. Π’Π°ΠΊΠΆΠ΅ Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡΡ .fade ΠΈ .show:
ΠΠ½Π°ΡΠΊΠΈ
ΠΠ½Π°ΡΠΊΠΈΒ β ΡΡΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΠΈΠ΅ ΡΠΈΡΠ»Π° ΠΈΒ ΡΡΠ»ΡΠΊΠΈ. ΠΠ»Ρ ΠΈΡ
Β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΊΠ»Π°ΡΡ .badge. ΠΒ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΠΎΠ½ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΡΡΠΎΠΊΠΈ ΠΊΒ ΡΠ°Π·ΠΌΠ΅ΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π°ΠΊΠΆΠ΅ Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ·Β 8 ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡΠ°Π»ΡΠ½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, .badge-primary ΠΈΒ Π΄ΡΡΠ³ΠΈΠ΅) ΠΈΒ ΡΠΊΡΡΠ³Π»ΡΡΡ Π·Π½Π°ΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡ-ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΒ .badge-pill:
ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π·Π½Π°ΡΠΊΠΈ Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ .badge-* Π²Β ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ a:
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ°
ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π²Β ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΠΈ ΡΠ°ΠΉΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ .breadcrumb:
ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΠ±ΡΡΠ½ΠΎ ΠΊΠ»Π°ΡΡ .btn ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΡΒ ΡΠ΅Π³ΠΎΠΌ button, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΈΡ
Β ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΒ ΡΠ΅Π³Π°ΠΌΠΈ input. ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΈΡ
Β ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΒ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ:
- ΠΒ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ:
- ΠΠ΅Π»Π°ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΠΎΠ½ΡΡΡΠ½ΡΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡ .btn-outline-*:
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡΡ .btn-lg ΠΈ .btn-sm ΠΌΠ΅Π½ΡΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
- ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΊΠ»ΡΡΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠ° disabled
- ΠΡΡΠΏΠΏΠΈΡΡΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡ .btn-group:
- ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΡ Π³ΡΡΠΏΠΏ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ ΠΊΒ ΡΡΠ΄Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
- ΠΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅:
- ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ data-toggle=Β«popoverΒ»:
ΠΠ»Π°ΡΡ .btn-block ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Π½Π°Β Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΡΠΎ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π»ΠΎ Π²Β ΡΠ΅Π³Π΅, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅Β Π°ΡΡΠΈΠ±ΡΡ, Π°Β ΠΊΠ»Π°ΡΡ .disabled.
ΠΠ°ΡΡΠΎΡΠΊΠΈ
CardΒ β ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Bootstrap 4, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠΎΡΠΌΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π²Β Π²ΠΈΠ΄Π΅ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ.
ΠΠ°ΡΡΠΎΡΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ Π³ΠΈΠ±ΠΊΡΡ ΡΡΡΡΠΊΡΡΡΡ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
- Π‘Β Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ (ΡΡΡΠ΅ΡΠΎΠΌ) ΠΈΠ»ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ.
- Π‘Β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (Π΅Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π²Β Π²Π΅ΡΡ Π½Π΅ΠΉ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ) ΠΈΠ»ΠΈ Π±Π΅Π· Π½Π΅Ρ.
- Π‘Β ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΒ ΠΈΡ Β ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π²Β ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ.
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, ΠΊΠ°ΡΡΠΎΡΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΅ΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΠ΄Π°ΡΡ Π½ΡΠΆΠ½ΠΎΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅. ΠΠ°Π΄Π°ΡΡ Π΅ΠΉΒ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΡΠ΅ΠΊΡΡΠ° ΠΈΒ Π³ΡΠ°Π½ΠΈΡ.
- ΠΒ ΠΊΠ°ΡΡΠΎΡΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅:
- ΠΠ°ΡΡΠΎΡΠΊΠΈ Π½Π΅Β ΠΈΠΌΠ΅ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ. ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ ΠΈΡ Β ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΠΈΒ ΡΡΠ΄Π°ΠΌΠΈ:
- ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π²Β Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ:
- ΠΠ΅Π½ΡΠΉΡΠ΅ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΈΒ Π³ΡΠ°Π½ΠΈΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΈΒ Π°ΡΡΠΈΠ±ΡΡ border-color.
ΠΠ°ΡΡΡΠ΅Π»Ρ
ΠΠ°ΡΡΡΠ΅Π»ΡΒ β ΡΡΠΎ Π±Π»ΠΎΠΊ, ΠΏΠ΅ΡΠ΅Π»ΠΈΡΡΡΠ²Π°ΡΡΠΈΠΉ ΡΠ»Π°ΠΉΠ΄Ρ ΡΒ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ. ΠΠ°Β ΠΊΠ°ΡΡΡΠ΅Π»Ρ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ (ΡΡΡΠ΅Π»ΠΊΠΈ) ΠΈΒ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ:
Π’Π°ΠΊΠΆΠ΅ Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π°Π΄ΠΏΠΈΡΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΒ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° Π½Π°Β ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ»Π°ΠΉΠ΄, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π±Π»ΠΎΠΊΠΈ ΡΒ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ .carousel-fade ΠΈ .carousel-caption.
Π‘Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅
ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ .collapse. ΠΠ½Β ΡΠ»ΡΠΆΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΒ ΡΠΊΡΡΡΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π°Β ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈΠ»ΠΈ ΡΡΡΠ»ΠΊΡ. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠ΄Π½ΠΎΠΈΠΌΠ΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ .accordion (Π²Β ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΡΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΊΠ°ΡΡΠΎΡΠΊΠΈ):
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊΒ β ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΠΉ ΡΠΎΠ±ΠΎΠΉ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠ°Π» Π½Π°Β Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ Π½Π°Π²ΡΠ» Π½Π°Β Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡ. ΠΒ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΈΒ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π²ΡΠ±ΠΈΡΠ°ΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ°, Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ/Π΄Π΅Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ°, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ Π²Β Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡΒ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ, ΡΠ΅ΠΊΡΡ ΠΈΒ ΡΠΎΡΠΌΡ.
Π€ΠΎΡΠΌΡ
- ΠΠ·ΠΌΠ΅Π½ΡΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ½ΠΎΡΡΡ ΡΠΎΡΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡΡ .form-control-lg ΠΈ .form-control-sm:
- Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΠΉΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π²Ρ ΠΎΠ΄Ρ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°:
- ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈΒ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ:
- ΠΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ Π³ΡΡΠΏΠΏΡ ΡΠΎΡΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ΅ΡΠΎΠΊ:
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ:
- ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ Π²ΡΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ:
- ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΡΠΎΡΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΠ»ΠΎΠ²:
Jumbotron
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Jumbotron ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½Π°Β Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈΒ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΎΠ±ΡΠ°ΡΠΈΠ»ΠΈ Π½Π°Β Π½Π΅Π³ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅:
ΠΠ΅Π΄ΠΈΠ°-ΠΎΠ±ΡΠ΅ΠΊΡΡ
ΠΠ΅Π΄ΠΈΠ°-ΠΎΠ±ΡΠ΅ΠΊΡΒ β ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Bootstrap, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²ΠΎΠΉ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π½Π°Β ΡΠ°ΠΉΡΠ΅ ΡΠ»ΠΎΠΆΠ½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ² (ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π², ΠΎΡΠ·ΡΠ²ΠΎΠ² ΠΈΒ Π΄Ρ.). ΠΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ ΠΈΠ»ΠΈ ΠΎΡΠ·ΡΠ² Π²Β ΡΡΠΎΠΌ ΡΠ»ΠΎΠΆΠ½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅Β β ΡΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΌΠ΅Π΄ΠΈΠ°-ΠΎΠ±ΡΠ΅ΠΊΡ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ:
ΠΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ ΠΎΠΊΠ½Π°
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Modal Π½Π°Β Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΡΡΠ³Π° Π·Π°Π΄Π°Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠ½Β ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΎΡΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Β ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΠΎΠΌ ΠΌΠ°ΡΡΡΠ°Π±Π΅, ΠΊΠ°ΠΊΠΎΠ³ΠΎ-ΡΠΎ Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ, ΠΏΡΠΎΠΈΠ·ΠΎΡΠ΅Π΄ΡΠ΅Π³ΠΎ Π½Π°Β ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ ΡΠ΅Π³ΠΎ-ΡΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅ΡΠΊΡ Π²Β ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΡ
ΠΎΠΊΠ½Π°Ρ
:
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ Π²Β Bootstrap ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ±ΡΡΡ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ, ΠΎΡΒ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° .nav Π΄ΠΎΒ Π°ΠΊΡΠΈΠ²Π½ΡΡ
ΠΈΒ Β«Π²ΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΡ
Β» ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ.
ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² .nav ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ-ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°ΠΌΠΈ ΠΈΒ ΠΎΠ±ΡΡΠ½ΡΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ.
- ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΈΠ»ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ:
- ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡ .nav-tabs:
- ΠΠ»ΠΈ ΠΏΠΎΠ΄ΡΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ .nav-pills:
- ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΡΡΠΊΠΈ ΡΒ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ:
- Π‘Β ΠΏΠΎΠΌΠΎΡΡΡ .nav ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π±Π»ΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ Π΄Π»Ρ Π½ΡΠΌΠ΅ΡΠ°ΡΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡ:
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π²Β Bootstrap ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Navbar.
ΠΠ°Β ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ ΠΌΡΒ Π²ΠΈΠ΄ΠΈΠΌ ΠΊΠ»Π°ΡΡ .navbar brand, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΡΠΎΒ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π°Β Π³Π»Π°Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
- Π’Π°ΠΊΠΆΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠ΅ΠΊΡΡ:
- ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Β ΡΡΡΠ°Π½ΠΈΡΠ΅, Π΄ΠΎΠ±Π°Π²ΠΈΠ² .navbar Π²Β ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ:
- Π€ΠΈΠΊΡΠΈΡΡΠΉΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π²Π²Π΅ΡΡ Ρ ΠΈΒ Π²Π½ΠΈΠ·Ρ:
ΠΡΠΎΠ³ΡΠ΅ΡΡΠ±Π°Ρ
ΠΠ»Π°ΡΡ .progress ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±Π΅ΡΡΠΊΠ° Π΄Π»Ρ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΈΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π°Β ΠΊΠ»Π°ΡΡ .progress-bar Π΄Π»Ρ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΈΠΈ ΠΏΡΠΎΠΉΠ΄Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ°.
ΠΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ data-spy=Β«scrollΒ»:
Π‘ΠΏΠΈΠ½Π½Π΅ΡΡ
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠΈΠ½Π½Π΅ΡΠΎΠ²:
ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΠ²Π΅ΡΠ° ΠΈΒ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΏΠΈΠ½Π½Π΅ΡΠΎΠ², ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΡΡΡΠΏΡ ΠΈΒ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΠΈΠ½Π½Π΅ΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΒ β ΡΡΠΎ Π»Π΅Π³ΠΊΠΈΠ΅ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠ΅ Π΄Π»Ρ ΠΈΠΌΠΈΡΠ°ΡΠΈΠΈ push-ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Ρ Π²Β ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΠΈΒ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ
ΡΠΈΡΡΠ΅ΠΌΠ°Ρ
. ΠΠ½ΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½Ρ ΡΒ flexbox, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡ
Β Π»Π΅Π³ΠΊΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΈΒ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ.
ΠΡΠ»ΠΈ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, ΡΠΎΒ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΎΠΌ.
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ CSS:
Π£ΡΠΈΠ»ΠΈΡΡ
ΠΡΠ°Π½ΠΈΡΡ
Π£ΡΠΈΠ»ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π»ΡΠ±ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
ΠΠ·ΠΌΠ΅Π½ΡΠΉΡΠ΅ ΡΠ²Π΅ΡΠ° Π³ΡΠ°Π½ΠΈΡ:
ΠΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ³Π»Ρ:
ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΠ·ΠΌΠ΅Π½ΡΠΉΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° display ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ»Π°ΡΡΡ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΒ ΡΠΎΡΠΌΠ°ΡΡ:
- .d-{value} Π΄Π»Ρ xs
- .d-{breakpoint}-{value} Π΄Π»Ρ sm, md, lgΒ ΠΈΒ xl.
ΠΠ΄Π΅ valueΒ β ΡΡΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·:
- none
- inline
- inline-block
- block
- table
- table-cell
- table-row
- flex
- inline-flex
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ:
ΠΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠ΅
ΠΡΡΡΠ°ΠΈΠ²Π°ΠΉΡΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π²Β ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΒ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΡΠ°Π²ΠΈΠ»Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΡΡΠΌΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² iframe, embed, video ΠΈΒ object.
Flex
Π‘Β ΠΏΠΎΠ»Π½ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ Π³ΠΈΠ±ΠΊΠΈΡ
ΡΡΠΈΠ»ΠΈΡ flexbox Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΎΠΉ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΒ ΠΊΠ°Π»ΠΈΠ±ΡΠΎΠ²ΠΊΠΎΠΉ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ Ρ. Π΄.
- ΠΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°ΠΉΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΡΠΈΠ»ΠΈΡΠΎΠΉ justify-content:
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°ΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΈΠ»ΠΈΡΡ align-items:
- ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΈΠ»ΠΈΡΡ align-self:
- ΠΠ»Ρ ΠΏΡΠΈΠ΄Π°Π½ΠΈΡ ΡΠ°Π²Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ .flex-fill:
- ΠΡΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ Π³ΠΈΠ±ΠΊΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ΅ΡΠ΅Π· Π°Π²ΡΠΎ-ΠΌΠ°ΡΠ΄ΠΆΠΈΠ½Ρ:
- ΠΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠΏΠΎΡΠΎΠ± ΠΎΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ Π³ΠΈΠ±ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Β Π³ΠΈΠ±ΠΊΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² .flex-wrap ΠΈ .flex-wrap-reverse:
Float
ΠΡΠΈ ΠΊΠ»Π°ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π΅Π²Π° ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π°, ΠΈΠ»ΠΈ Π²ΡΠΊΠ»ΡΡΠ°ΡΡ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΠΊΒ ΠΊΠ°ΠΊΠΎΠΌΡ-Π»ΠΈΠ±ΠΎ ΠΊΡΠ°Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float Π²Β CSS.
ΠΠ·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅
Π‘Π»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠΏΠΎΡΠΎΠ± Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΒ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΠ°ΠΉΡΠ°.
ΠΠ»Π°ΡΡ .user-select-all Π½Π΅Β ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π½ΠΈΒ ΠΎΠ΄Π½ΠΈΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ.
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΈ ΡΡΠΈΠ»ΠΈΡΡ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π’Π΅Π½ΠΈ
Π‘Β ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΡΡ box-shadow ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ΅Π½Ρ:
Π Π°Π·ΠΌΠ΅ΡΡ
Π‘Β ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΒ Π²ΡΡΠΎΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠ΅Π±ΡΠ΅ΠΌΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ. ΠΠΊΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΏΠΎΒ 25%, 50%, 75% ΠΈΒ 100% ΠΏΠΎΒ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ.
ΠΠ½ΡΠ΅ΡΠ²Π°Π»Ρ
ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Π·Π½Π°ΡΠ°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ margin ΠΈΠ»ΠΈ padding ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΄ΠΎΠ±Π½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ².
ΠΠ»Π°ΡΡΡ Π½Π°Π·Π²Π°Π½Ρ ΠΏΠΎΒ ΡΠΎΡΠΌΠ°ΡΡ {property}{sides}-{size} Π΄Π»Ρ xsΒ ΠΈΒ {property}{sides}-{breakpoint}-{size} Π΄Π»Ρ sm, md, lgΒ ΠΈΒ xl. Π‘Π²ΠΎΠΉΡΡΠ²Π° (property), ΡΡΠΎΡΠΎΠ½Ρ (sides), ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ (breakpoint) ΠΈΒ ΡΠ°Π·ΠΌΠ΅Ρ (size) Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΈΠ·ΡΡΠΈΡΡ Π½Π°Β ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Bootstrap.
Π Π°ΡΡΡΠ½ΡΡΠ°Ρ ΡΡΡΠ»ΠΊΠ°
ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ ΡΡΡΠ»ΠΊΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° .streched-link:
Π’Π΅ΠΊΡΡ
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
ΠΠ»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π²Π»Π΅Π²ΠΎ, Π²ΠΏΡΠ°Π²ΠΎ ΠΈΒ ΠΏΠΎΒ ΡΠ΅Π½ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΠΊΠ»Π°ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ΅Β ΠΆΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎ ΠΈΒ ΡΠΈΡΡΠ΅ΠΌΠ° ΡΠ΅ΡΠΊΠΈ.
ΠΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° . text-wrap:
ΠΠ°ΠΏΡΠ΅ΡΠ°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ΅ΠΊΡΡΠ° ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° .text-nowrap:
Π§ΡΠΎΠ±Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ Π΄Π»ΠΈΠ½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ΠΌ Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ .text-truncate. Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ display: inline-block ΠΈΠ»ΠΈ display: block.
Π’ΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ ΡΠ΅ΠΊΡΡΠ°
Π’ΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠΉΡΠ΅ ΡΠ΅ΠΊΡΡ Π²Β ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ
ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π·Π°Π³Π»Π°Π²Π½ΡΡ
Π±ΡΠΊΠ².
Π’ΠΎΠ»ΡΠΈΠ½Π° ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΊΡΡΡΠΈΠ²
ΠΠ·ΠΌΠ΅Π½ΡΠΉΡΠ΅ ΡΠΎΠ»ΡΠΈΠ½Ρ ΠΈΒ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΊΡΡΡΠΈΠ² ΡΠ΅ΠΊΡΡΠ°.
ΠΠΎΠ½ΠΎΡΠΈΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π°Β Π½Π°Ρ ΠΌΠΎΠ½ΠΎΡΠΈΡΠΈΠ½Π½ΡΠΉ ΡΡΠ΅ΠΊ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ .text-monospace.
Π’Π΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅
Π£Π΄Π°Π»ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° .text-decoration-none.
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
ΠΠΈΠ΄ΠΈΠΌΠΎΡΡΡ
ΠΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ. ΠΡΠΈ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π½Π΅Β ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ display ΠΈΒ Π½Π΅Β Π²Π»ΠΈΡΡΡ Π½Π°Β ΠΌΠ°ΠΊΠ΅ΡΒ β ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ .invisible ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΌΠ΅ΡΡΠΎ Π½Π°Β ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΒ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡΒ ΠΏΠΎΠΏΡΡΠ°Π»ΠΈΡΡ Π²Β ΡΠΆΠ°ΡΠΎΠΌ Π²ΠΈΠ΄Π΅ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ ΠΎΠ±Β ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ
ΡΠ°Π±ΠΎΡΡ ΡΒ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ Bootstrap. ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡ ΡΒ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎΒ Bootstrap Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Β ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°:
ΠΠ»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΉ ΡΡΠ΅Π±ΡΡΡΡΡ Π·Π½Π°Π½ΠΈΡ HTML, CSS ΠΈΒ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° JavaScript. ΠΠ΄Π½Π°ΠΊΠΎ, Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠΉ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΠΈΒ Π²Π°Π»ΠΈΠ΄Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ, Π°Β ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠ°ΠΉΡΠ° Π½Π°Β JavaScript ΡΠΆΠ΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΊΠ²Π°Π»ΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΠΈΠ»ΠΈ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΎΠΏΡΡΠΎΠΌ.
ΠΡΠ»ΠΈ ΡΒ Π²Π°Ρ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° ΠΈΒ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ², ΠΌΡΒ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡΡ Π²Π°ΠΌ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° ΡΒ Π²Π°Π»ΠΈΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΈΒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΒ ΠΏΠΎΡΠ»Π΅ Π·Π°ΠΏΡΡΠΊΠ° Π²Β ΡΠΊΡΠΏΠ»ΡΠ°ΡΠ°ΡΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, ΠΌΡΒ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠΌ Π²Π°ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π½Π°Β ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ
ΡΠΈΡΡΠ΅ΠΌ Π―Π½Π΄Π΅ΠΊΡ ΠΈΒ Google Π²Β ΡΠ°ΠΌΠΊΠ°Ρ
ΡΠ°Π±ΠΎΡ ΠΏΠΎΒ SEO-ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈΒ ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΡΒ ΠΈ ΠΎΡΡΡΠ΅ΡΡΠ²ΠΈΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠΊΡΠΏΠ»ΡΠ°ΡΠ°ΡΠΈΠΈ.Β
text-align | htmlbook.ru
CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
3 | Β | 2.0+ | 11.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ΅ΡΡΠΈΠΈ CSS
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
CSS2.1 |
|
CSS3 |
|
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- center
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. Π’Π΅ΠΊΡΡ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΎΠΊΠ½Π°
Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π³Π΄Π΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ Π±Π»ΠΎΠΊ. Π‘ΡΡΠΎΠΊΠΈ ΡΠ΅ΠΊΡΡΠ° ΡΠ»ΠΎΠ²Π½ΠΎ
Π½Π°Π½ΠΈΠ·ΡΠ²Π°ΡΡΡΡ Π½Π° Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΡ ΠΎΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠ΄ΠΎΠ±Π½ΡΠΉ
ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡΡ ,
Π²ΡΠΎΠ΄Π΅ ΠΏΠΎΠ΄ΡΠΈΡΡΠ½ΠΎΡΠ½ΡΡ , ΠΎΠ½ ΠΏΡΠΈΠ΄Π°Π΅Ρ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΈ ΡΠΎΠ»ΠΈΠ΄Π½ΡΠΉ Π²ΠΈΠ΄ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°.
ΠΠΎ Π²ΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ΅Π΄ΠΊΠΎ ΠΏΠΎ ΡΠΎΠΉ ΠΏΡΠΈΡΠΈΠ½Π΅,
ΡΡΠΎ ΡΠΈΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΌ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π½Π΅ΡΠ΄ΠΎΠ±Π½ΠΎ. - justify
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ
ΠΈ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅Ρ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ
ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ. - left
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΡΠΎΠΊΠΈ ΡΠ΅ΠΊΡΡΠ° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ
ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, Π° ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Β«Π»Π΅ΡΠ΅Π½ΠΊΠΎΠΉΒ». Π’Π°ΠΊΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ
ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ Π½Π° ΡΠ°ΠΉΡΠ°Ρ , ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π»Π΅Π³ΠΊΠΎ
ΠΎΡΡΡΠΊΠΈΠ²Π°ΡΡ Π²Π·Π³Π»ΡΠ΄ΠΎΠΌ Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ ΠΈ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎ ΡΠΈΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ΅ΠΊΡΡ. - right
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π²ΡΡΡΡΠΏΠ°Π΅Ρ
Π² ΡΠΎΠ»ΠΈ Π°Π½ΡΠ°Π³ΠΎΠ½ΠΈΡΡΠ° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ ΡΠΈΠΏΡ. Π ΠΈΠΌΠ΅Π½Π½ΠΎ, ΡΡΡΠΎΠΊΠΈ ΡΠ΅ΠΊΡΡΠ° ΡΠ°Π²Π½ΡΡΡΡΡ ΠΏΠΎ
ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, Π° Π»Π΅Π²ΡΠΉ ΠΎΡΡΠ°Π΅ΡΡΡ Β«ΡΠ²Π°Π½ΡΠΌΒ». ΠΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π»Π΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ Π½Π΅ Π²ΡΡΠΎΠ²Π½Π΅Π½,
Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ Π½Π΅Π³ΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΡΡΠ΅Π½ΠΈΠ΅ Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊ, ΡΠ°ΠΊΠΎΠΉ ΡΠ΅ΠΊΡΡ ΡΠΈΡΠ°ΡΡ ΡΡΡΠ΄Π½Π΅Π΅,
ΡΠ΅ΠΌ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π±ΡΠ» Π²ΡΡΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. ΠΠΎΡΡΠΎΠΌΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ
ΠΊΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΎΠ±ΡΡΠ½ΠΎ Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΊΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΎΠ±ΡΠ΅ΠΌΠΎΠΌ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ΅Ρ ΡΡΡΠΎΠΊ.
ΠΡ Π½Π΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΡΠ΅ ΡΠ°ΠΉΡΡ, Π³Π΄Π΅ ΡΠ΅ΠΊΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΡΠΈΡΠ°ΡΡ ΡΠΏΡΠ°Π²Π°
Π½Π°Π»Π΅Π²ΠΎ, ΡΠ°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΈ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ. - auto
- ΠΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- inherit
- ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
- start
- ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ left, Π΅ΡΠ»ΠΈ ΡΠ΅ΠΊΡΡ ΠΈΠ΄ΡΡ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ ΠΈ right, ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΠΊΡΡ ΠΈΠ΄ΡΡ ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ.
- end
- ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ right, Π΅ΡΠ»ΠΈ ΡΠ΅ΠΊΡΡ ΠΈΠ΄ΡΡ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ ΠΈ left, ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΠΊΡΡ ΠΈΠ΄ΡΡ ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ.
ΠΡΠΈΠΌΠ΅Ρ
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-align</title>
<style>
div {
border: 1px solid black; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°ΠΌΠΊΠΈ */
padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
margin-bottom: 5px; /* ΠΡΡΡΡΠΏ ΡΠ½ΠΈΠ·Ρ */
}
#left { text-align: left; }
#right { text-align: right; }
#center { text-align: center; }
.content {
width: 75%; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */
background: #fc0; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
}
</style>
</head>
<body>
<div><div>ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ</div></div>
<div><div>ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ</div></div>
<div><div>ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ</div></div>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Safari
Internet Explorer Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 7.0 Π²ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½Π°ΡΠ΅ ΡΡΠ°ΠΊΡΡΠ΅Ρ Π΄Π°Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅ΠΌ Π΄ΡΡΠ³ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΡ, Π½ΠΎ ΠΈ Π±Π»ΠΎΠΊΠΈ (ΡΠΈΡ.Β 2).
Π ΠΈΡ. 2. ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Internet Explorer 7
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
[window.]document.getElementById(«elementID»).style.textAlign
ΠΡΠ°ΡΠ·Π΅ΡΡ
IE Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 7.0 Π²ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½ΠΎ ΠΈ ΡΠ°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Bootstrap 4 Π±Π»ΠΎΠΊ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ
Π Π°Π½ΡΡΠ΅ Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» 12-ΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΡ ΡΠ΅ΡΠΊΡ. Π’Π΅ΠΏΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ flexbox, Π½ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΈΡΠΌΡ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ΅ΡΠΊΠΎΠΉ ΠΎΡΡΠ°Π»ΠΈΡΡ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ.
Π Π΅ΠΆΠΈΠΌ flexbox ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ°ΠΊΠ΅ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΡΠΈΡΠ»ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
ΠΠ΅Π·ΡΠ°Π·ΠΌΠ΅ΡΠ½ΡΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² ΡΠ΅ΡΠΊΠ΅ flexbox Π±ΡΠ΄ΡΡ ΠΏΠΎΡΠΎΠ²Π½Ρ Π΄Π΅Π»ΠΈΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, Π²ΡΠ΅Π³Π΄Π° Π·Π°ΠΏΠΎΠ»Π½ΡΡ Π²Π΅ΡΡ ΡΡΠ΄.
ΠΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ. Π£ΠΊΠ°ΠΆΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ Ρ ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡ ΠΏΠΎΡΠΎΠ²Π½Ρ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡΡ col—auto, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π±Π»ΠΎΠΊ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ. Π’Π°ΠΊΠΆΠ΅ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ±ΡΠΈΠΉ ΡΡΠ΄ Π±ΡΠ΄Π΅Ρ ΡΠΆΠ°Ρ Π΄ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
ΠΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, Π½Π΅ ΡΠΆΠΈΠΌΠ°Ρ ΠΎΠ±ΡΡΡ ΡΠΈΡΠΈΠ½Ρ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠΏΠΎΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ Π΄Π»Ρ ΡΠΎΡΠ½ΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. Π ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ»ΡΡΠ°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡΡΡ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ col ΠΈ col-*.
ΠΠ· ΡΡΠΎΠΏΠΊΠΈ Π² ΡΡΠ΄
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡΡ col-sm-*, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π±Π°Π·ΠΎΠ²ΡΡ ΡΠ΅ΡΠΎΡΠ½ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΈ Π² Π²ΠΈΠ΄Π΅ ΡΡΠΎΠΏΠΊΠΈ Π½Π° ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ , Π° Π·Π°ΡΠ΅ΠΌ Π±ΡΠ΄Π΅Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ Π±Π»ΠΎΠΊΠΈ Π² ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄.
Π‘ΠΌΠ΅ΡΠΈΠ²Π°Π΅ΠΌ Π²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ
ΠΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ, ΠΊΠ°ΠΊ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ.
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
Flexbox Π΄Π°Π΅Ρ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΡΡΠ΄Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π°, ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ, Π½ΠΈΠ·Π°, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΡΠΎΡΠ°. Π£ΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Ρ row ΠΊΠ»Π°ΡΡΡ flex-items-xs-start, flex-items-xs-center, flex-items-xs-end.
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠ΄Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, Π΅ΡΠ»ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ align-self-start, align-self-center, align-self-end.
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
Π‘ΠΎΠ·Π΄Π°ΡΠΌ Π±Π»ΠΎΠΊΠΈ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. ΠΠ°Π»ΡΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΈΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ·-Π·Π° ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, ΡΠΊΠ°Π·ΡΠ²Π°Ρ Ρ ΡΡΠ΄Π° row ΠΊΠ»Π°ΡΡΡ justify-content-start, justify-content-center, justify-content-end. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΊΠ»Π°ΡΡΡ justify-content-around, justify-content-between, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΊΡΡΠΆΠ°ΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΌΠ΅ΡΡΠΎ.
ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ»Π°ΡΡ .no-gutters, ΡΡΠΎΠ±Ρ ΡΠ±ΡΠ°ΡΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. ΠΠ»Π°ΡΡ ΡΠ΄Π°Π»ΡΠ΅Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ margins ΠΈΠ· .row ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ padding ΠΈΠ· Π²ΡΠ΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
Π‘ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠ° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ
Π ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅ ΡΠ΅ΡΠΎΠΊ, Π΅ΡΠ»ΠΈ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ push ΠΈ pull.
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Bootstrap ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ flexbox order Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠ΅Ρ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ col:
- .flex-first β ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ
- .flex-last β ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ
- .flex-unordered β ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ
Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ
ΠΠ»Ρ ΡΠ΄Π²ΠΈΠ³Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π²ΠΏΡΠ°Π²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .offset-md-*, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ Π»Π΅Π²ΡΠΉ ΠΎΡΡΡΡΠΏ Π½Π° * ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, .offset-md-4 ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π½Π° ΡΠ΅ΡΡΡΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
ΠΠ°Π΄Π°ΡΠ°: Π²ΡΠ²Π΅ΡΡΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Bootstrap 4).
ΠΠΎΠΏΡΠΎΡ: ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½Π°Ρ-Π»ΠΈ Π²Π΅ΡΡΡΠΊΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ? ΠΡΠ»ΠΈ Π½Π΅Ρ, ΡΠΎ Π±ΡΠ΄Ρ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠ΅Π½ Π·Π° Π½Π°Π³Π»ΡΠ΄Π½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ!
ΠΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ Π²Π½ΡΡΡΠΈ col? ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ col ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ (300px), Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΡΡ Π½Π΅ΠΊΠΈΠΉ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½ΡΠΆΠ½ΠΎ ΠΎΡΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ col. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ!
2 ΠΎΡΠ²Π΅ΡΠ° 2
ΠΡΠ»ΠΈ Π½Π΅ Π·Π°ΡΡΠ°Π³ΠΈΠ²Π°ΡΡ CSS, Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Bootstrap, ΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ my-auto :
- my-auto ΡΠ΅Π½ΡΡΠΈΡΡΠ΅Ρ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ,
- mx-auto ΡΠ΅Π½ΡΡΠΈΡΡΠ΅Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
ΠΡΡ Π΅ΡΡ ΠΈΡΠ΅ΡΠ΅ ΠΎΡΠ²Π΅Ρ? ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ Ρ ΠΌΠ΅ΡΠΊΠ°ΠΌΠΈ bootstrap ΠΈΠ»ΠΈ Π·Π°Π΄Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉ Π²ΠΎΠΏΡΠΎΡ.
ΠΠΎΡ ΠΎΠΆΠΈΠ΅
ΠΠ»Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ Π½Π° Π»Π΅Π½ΡΡ ΡΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅ ΡΡΡ ΡΡΡΠ»ΠΊΡ Π² Π²Π°ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ RSS.
Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ° / Π»ΠΎΠ³ΠΎΡΠΈΠΏ Β© 2019 Stack Exchange Inc; ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ ΠΏΠΎΠ΄ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π»ΠΈΡΠ΅Π½Π·ΠΈΠΈ cc by-sa 4.0 Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΈΡΡΠΎΡΠ½ΠΈΠΊ. rev 2019.11.15.35459
Π Π°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ β CSS-LIVE
Π Π·Π°Π΄Π°ΡΠ°Ρ
Π²ΡΡΡΡΠΊΠΈ ΠΏΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠΏΠΈΡΠΎΠΊ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π°. ΠΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠ½ΠΊΡΡ ΡΡΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ, ΠΏΡΠΈΠΆΠΈΠΌΠ°ΡΡΡ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΊΡΠ°ΠΉΠ½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΊ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ.
Π§ΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΎ ΡΡΠΌ ΠΈΠ΄ΡΡ ΡΠ΅ΡΡ, ΠΏΡΠΈΠ²Π΅Π΄Ρ ΠΏΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠ° ΡΠΈΡΡΠ½ΠΊΠ°Ρ
Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΏΡΠΈ ΡΠ°Π·Π½ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΊΡΠ°Π½Π° ΠΏΡΠ½ΠΊΡΡ Π²ΡΡ ΡΠ°Π²Π½ΠΎ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΠΏΡΠΈΠΌΡΠΊΠ°Ρ ΠΊ Π±ΠΎΠΊΠΎΠ²ΡΠΌ ΡΡΠ΅Π½ΠΊΠ°ΠΌ ΠΈ Π΄Π΅Π»Π°Ρ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ β ΡΠ°Π²Π½ΠΎΠ·Π½Π°ΡΠ½ΡΠΌΠΈ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ Ρ
ΠΎΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡ ΡΠ°Π·Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΡΠ΅ ΠΏΠ»ΠΎΡ
ΠΈΠ΅ ΠΈ Ρ
ΠΎΡΠΎΡΠΈΠ΅ ΡΡΠΎΡΠΎΠ½Ρ ΡΡΠΈΡ
ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ².
ΠΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ?
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ, Π΄Π°Π²Π°ΠΉΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ³Π»ΡΠ±ΠΈΠΌΡΡ Π² ΡΠΎΠ½ΠΊΠΎΡΡΠΈ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΠ° ΠΈ ΠΏΠΎΡΠ°Π·ΠΌΡΡΠ»ΠΈΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
ΠΠΎ ΡΡΡΠΈ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ text-align: justify Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π°ΡΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ² ΡΠΆ ΠΎΡΠ΅Π½Ρ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ»ΠΎΠ² Π² ΡΡΡΠΎΠΊΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ³Π»ΡΠ±ΠΈΠ²ΡΠΈΡΡ Π² ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΡ text-align: justify, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π°Π»Π³ΠΎΡΠΈΡΠΌ.
ΠΡΠ°ΠΏ ΠΏΠ΅ΡΠ²ΡΠΉ
Π‘Π½Π°ΡΠ°Π»Π° Π² ΡΡΡΠΎΠΊΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈΡΡΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅, Π½Π΅ΡΠ°Π·ΡΡΠ²Π½ΡΠ΅ «ΠΊΠΈΡΠΏΠΈΡΠΈΠΊΠΈ». ΠΡΠΎ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π² ΡΠ΅ΠΊΡΡΠ΅, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΈΠ½Π»Π°ΠΉΠ½-Π±Π»ΠΎΠΊΠΈ, ΠΈΠ½Π»Π°ΠΉΠ½-ΡΠ°Π±Π»ΠΈΡΡ ΠΈ Ρ.Π΄. Π ΠΎΠ±ΡΠ΅ΠΌ Π²ΡΡ ΡΠΎ, ΡΡΠΎ Π² ΡΠ»ΡΡΠ°Π΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΠ΅ΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅.
Π¦ΠΈΡΡΠΎΠΉ 1 Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΠΎΡΠΌΠ΅ΡΠ΅Π½Ρ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΈΠ½Π»Π°ΠΉΠ½-Π±ΠΎΠΊΡΡ, Ρ.Π΅. ΠΏΠΎΠΏΡΠΎΡΡΡ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ ΠΈΠ½Π»Π°ΠΉΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΠΊΠΈΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ°ΠΊ < span> ΠΈΠ»ΠΈ <em>.
ΠΠΎΠ΄ ΡΠΈΡΡΠΎΠΉ 2 Ρ Π½Π°Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ, Ρ.Π΅ inline-block. ΠΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ, Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΎΡΡΡΡΠΏΠΎΠ² Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π·Π°Π½ΠΎΠ²ΠΎ. ΠΡΠΈΡΠΈΠ½Π° Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π½ΡΡΡΠΈ ΡΠ΅Π±Ρ inline-block Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π§ΡΠΎ Π½Π΅Π»ΡΠ·Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ± ΠΎΠ±ΡΡΠ½ΠΎΠΌ inline ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠ΅ΠΆΡΠ»ΠΎΠ²Π½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠ»ΠΎΡΡ Π±Ρ, ΠΏΠΎ ΠΎΠ±ΡΠ΅ΠΌΡ, Π²Π½Π΅ΡΠ½Π΅ΠΌΡ Π°Π»Π³ΠΎΡΠΈΡΠΌΡ.
Π¦ΠΈΡΡΠΎΠΉ 3 ΠΎΡΠΌΠ΅ΡΠ΅Π½Π° ΠΎΠ±ΡΡΠ½Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°. Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅, ΠΎΠ½Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌ, ΡΠ΅Π»ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
ΠΠ»Ρ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ Π²ΡΠ΅ ΡΡΠΈ Π²Π΅ΡΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΠΈΠ· ΡΠ΅Π±Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠ½ΠΎΡΡΠΈ, Π½Π΅ΡΠ°Π·Π΄Π΅Π»ΠΈΠΌΡΠ΅ ΡΠ»ΠΎΠ²Π°, Π΅Π΄ΠΈΠ½ΡΠ΅ ΡΠ΅Π»ΡΠ΅. Π ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ ΡΠ΅Π³ΡΠ»ΠΈΡΡΠ΅ΡΡΡ Π½Π°ΡΠΈΠΌ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΠΎΠΌ, ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ text-align: justify
*ΠΠΎΡΠ»Π΅Π΄Π½ΡΡ ΠΆΠ΅ ΡΡΡΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² ΠΏΠΎΠ»Π΅ Π·ΡΠ΅Π½ΠΈΡ justify, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΡ
ΡΡΡΠΎΠΊ, Π° Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΏΡΠΎΠ±Π΅Π»Ρ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°ΡΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
ΠΡΠ°ΠΏ Π²ΡΠΎΡΠΎΠΉ
ΠΡΠΎΡΡΠΌ ΡΡΠ°ΠΏΠΎΠΌ Π°Π»Π³ΠΎΡΠΈΡΠΌ Π²ΡΡΡΠΈΡΡΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π²ΡΠ΅Ρ
Π½Π°ΡΠΈΡ
«ΠΊΠΈΡΠΏΠΈΡΠ΅ΠΉ» Π² ΡΡΡΠΎΠΊΠ΅, ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅Ρ ΠΈΡ
, Π° ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΎΡΠ½ΠΈΠΌΠ°Π΅Ρ ΠΎΡ ΠΎΠ±ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΠΌΠΎΠΉ ΡΡΡΠΎΠΊΠΈ.
ΠΡΡΡΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ²ΠΎΠ΄, ΡΡΠΎ ΡΠ΅ΠΉΡΠ°Ρ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ ΠΎΠ±ΡΡΡ ΡΡΠΌΠΌΡ Π²ΡΠ΅Ρ ΠΏΡΠΎΠ±Π΅Π»ΡΠ½ΡΡ Π·ΠΎΠ½ Π² ΡΡΡΠΎΠΊΠ΅, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π²Π½Π° 116px.
ΠΡΠ°ΠΏ ΡΡΠ΅ΡΠΈΠΉ β Π·Π°Π²Π΅ΡΡΠ°ΡΡΠΈΠΉ
Π’ΡΠ΅ΡΡΠΈΠΌ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΡΡΠ°ΠΏΠΎΠΌ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° Π±ΡΠ΄Π΅Ρ Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠΉ ΡΠΈΡΡΡ (Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ 116) Π½Π° ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² Π² ΡΡΡΠΎΠΊΠ΅ (Π² Π½Π°ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΈΡ
7). ΠΠ· ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° (16.571) Π²ΡΡΠΈΡΠ°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ±Π΅Π»Π° ΠΈ ΡΠΆΠ΅ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ· Π½ΠΈΡ
. Π§ΡΠΎ Π² ΠΈΡΠΎΠ³Π΅ Π΄Π°ΡΡ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΠΎΠ² Π²ΠΎ Π²ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅.
ΠΡΠΎΠ³
ΠΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΈΠ΄Π΅ΡΡ, Π°Π»Π³ΠΎΡΠΈΡΠΌ ΡΠ°Π±ΠΎΡΡ text-align: justify Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΠΈ ΡΠ»ΠΎΠΆΠ΅Π½ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π²ΡΡ Π²ΡΠΎΠ΄Π΅ Π±Ρ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΠΈ Π»ΠΎΠ³ΠΈΡΠ½ΠΎ. Π― ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½Π°Ρ, ΡΠ΅ΡΠ°Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ Π·Π°Π΄Π°ΡΡ, Π²ΡΡΡΠΈΡΡΠ²Π°Π» Π±Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΏΠΎ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΌΡ ΠΆΠ΅ ΡΡΠ΅Π½Π°ΡΠΈΡ. Π‘Π»ΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π½Π°ΠΏΠΈΡΠ°ΡΡ Ρ
ΠΎΡΠΎΡΠ΅Π΅, ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅, Π° Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Π·Π°ΡΡΠ°ΡΠΈΠ² ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°. ΠΠ΅Π΄Ρ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½ΡΡ
ΠΊΠ°ΠΌΠ½Π΅ΠΉ, Π² Π²ΠΈΠ΄Π΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ (Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ Π°Π»Π³ΠΎΡΠΈΡΠΌ) ΡΡΡΠΎΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΡ Π½ΡΠΆΠ½ΠΎ ΠΏΡΡΡΠ°ΡΡ, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠΌ Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅. ΠΡ ΠΈ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ Π½Π΅Π»ΡΠ·Ρ Π·Π°Π±ΡΠ²Π°ΡΡ ΠΎΠ± ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠ°ΡΠΈΠΈ ΠΊΠΎΠ΄Π°, ΡΠ°ΠΊΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠ°ΠΊ Opera, IE6-7, ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΡΠ±ΡΡ ΠΏΡΠ΅ΠΏΠΎΠ΄Π½ΠΎΡΠΈΡΡ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΡΠ΅ ΡΡΡΠΏΡΠΈΠ·Ρ.
ΠΠ°ΡΠ° Π·Π°Π΄Π°ΡΠ°
ΠΠ°ΡΠ° Π·Π°Π΄Π°ΡΠ° ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΡΡΠΎΠΈΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° Π±Π°Π·Π΅ ΡΡΠΎΠ³ΠΎ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ°. ΠΡΠΈΠΌΠ΅Π½ΠΈΡΡ, ΡΠΈΠΌΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ, Π·Π°ΠΌΠ΅Π½ΠΈΡΡ, ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΡ ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ, Π³Π»Π°Π²Π½ΠΎΠ΅ Π² ΠΈΡΠΎΠ³Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎ, ΡΡΠΎ ΠΌΡ Ρ ΠΎΡΠΈΠΌ. Π ΠΈΠΌΠ΅Π½Π½ΠΎ β ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΡΡΠΎΠΊΠ΅, Π±ΠΎΠΊΠΎΠ²ΡΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΈΠΆΠ°ΡΡ ΠΊ ΡΠ²ΠΎΠΈΠΌ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌ. ΠΡ ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ (ΠΏΡΠΎΠ±Π΅Π»Ρ) ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌΠΈ ΠΏΡΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΠ°ΡΠΈΠ°Π½Ρ 1
Π‘Π°ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ ΠΏΡΠΈΡΠ»ΠΎ ΠΌΠ½Π΅ Π½Π° ΡΠΌ, ΡΡΠΎ Π²Π·ΡΡΡ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ· ΠΏΡΡΠΈ ΠΏΡΠ½ΠΊΡΠΎΠ², ΡΠ΄Π΅Π»Π°ΡΡ 4 ΠΈΠ· Π½ΠΈΡ
ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌΠΈ, Π° Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΎΡΠΌΠ΅Π½ΠΈΡΡ float ΠΈ ΡΠ°ΡΡΡΠ½ΡΡΡ Π½Π° Π²ΡΡ ΠΎΡΡΠ°Π²ΡΡΡΡΡ ΡΠΈΡΠΈΠ½Ρ. Π§ΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅, ΠΎ ΡΡΠΌ ΠΈΠ΄ΡΡ ΡΠ΅ΡΡ, ΠΏΡΠΈΠ²ΠΎΠΆΡ ΠΊΠΎΠ΄.
Π‘ΡΡΡΠΊΡΡΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΎΠ²ΠΎΠΉ
<ul> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul>
Π CSS ΡΠ°ΠΊΠΈΠΌ
ul { font: 14px Verdana, Geneva, sans-serif; overflow: hidden; } ul li { } ul li.left { width: 20%; float: left; } ul li.right { width: 20%; float: right; text-align: right; } ul li.center { text-align: center; } ul li .content { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; }
Π§ΡΠΎ ΠΌΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ΄Π΅Π»Π°Π»ΠΈ? Π ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΌΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅. ΠΠ²Π° Π»Π΅Π²ΡΡ
ΠΈ Π΄Π²Π° ΠΏΡΠ°Π²ΡΡ
ΠΏΡΠ½ΠΊΡΠ° ΠΌΡ ΡΠ°ΡΠΊΠΈΠ΄Π°Π»ΠΈ ΠΏΠΎ ΡΠ°Π·Π½ΡΠΌ ΡΡΠΎΡΠΎΠ½Π°ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ float : left ΠΈ float : right ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π°Π·Π½Π°ΡΠΈΠ² ΠΈΠΌ ΠΏΠΎ 20% ΡΠΈΡΠΈΠ½Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ, ΡΡΠΎ Π² ΡΡΠΌΠΌΠ΅ Π΄Π°Π»ΠΎ 80% ΠΎΡ Π²ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΏΡΠ½ΠΊΡ, Ρ ΡΠ΅ΡΠΈΠ» Π½Π΅ Π΄Π΅Π»Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΠΌΠΎ ΠΏΠΎ ΡΠ΅Π±Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ ΠΎΡΡΠ°Π²ΡΠΈΠ΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΏΠΎΡΠ»Π΅ float-Π±Π»ΠΎΠΊΠΎΠ².
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π΄Π»Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΠΏΠΎΠΆΠ΅ΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΎΠΉ, Π° ΡΠΎΡΠ½Π΅Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ + Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΡΠΈΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Ρ ΡΠ΄Π΅Π»Π°Π» ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΌ, ΠΏΠΎΠ²Π΅ΡΠΈΠ² Π½Π° Π½ΠΈΡ
display : inline-block, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ΅ΠΌΡ ΠΌΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠΌΠΎΠ³ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ Π² Π»ΡΠ±ΡΡ ΡΡΠΎΡΠΎΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ text-align Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΡΠΈ «ΠΆΠ΅ΡΡΠ²Ρ» Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ Π½Π°ΡΡΠΆΠΊΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΎΡΠ½Π΅ΡΡΠΈ ΠΊ Ρ
ΠΎΡΠΎΡΠ΅ΠΌΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Π±Ρ Π½Π΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅, Π²Π΅ΡΠΎΠΌΡΠ΅ «Π½ΠΎ».
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΡΠΊΡΠΈΠ½ΡΠΎΡΠΎΠ², ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠΊΠΎΠ²ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ, Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ΅Π΄Π½ΠΈΠΌ ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ Π΅ΡΡΡ ΡΠ²Π½Π°Ρ ΡΠ°Π·Π½ΠΈΡΠ°. Π ΡΠ΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠ΅ΠΌ Π·Π°ΠΌΠ΅ΡΠ½Π΅Π΅ ΡΡΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ.
ΠΠΎ-Π²ΡΠΎΡΡΡ
, ΡΠ°Π΄ΠΈ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°, Ρ Π½Π°Π·Π½Π°ΡΠΈΠ» Π²ΡΠΎΡΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ ΡΠΈΡΠΈΠ½Ρ, ΡΠ°Π²Π½ΡΡ 200px.
Π Π²ΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ°Π·Ρ ΠΆΠ΅ ΠΎΠΊΠ°Π·Π°Π»ΡΡ ΠΏΠΎΠ΄ ΡΡΠ΅ΡΡΠΈΠΌ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ Π±Ρ Π½Π΅ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ, Π½ΠΎ ΡΠ°Π·Π²Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΎΡΠ³ΠΎΠ²ΠΎΡΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ? ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ Π½Π΅Ρ! Π― Ρ
ΠΎΡΡ, ΡΡΠΎΠ±Ρ Π½Π°ΡΠΈ ΠΏΡΠ½ΠΊΡΡ ΠΌΠΎΠ³Π»ΠΈ ΠΈΠΌΠ΅ΡΡ Π»ΡΠ±ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΡΠΎΠ±Ρ Π½Π°Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π».
ΠΡ ΠΈ Π²-ΡΡΠ΅ΡΡΠΈΡ
, Π²ΡΠ΅ ΡΡΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΎΠ±ΡΡΡΠΊΠΈ, ΠΊΠ»Π°ΡΡΡ, ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ»-Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈΡ
ΡΠΈΡΠΈΠ½Ρ, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΡΠ°Π²ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ ΡΠΎΡΠΊΡ Π½Π° ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½ΡΠ΅, Π·Π°ΡΡΠ°Π²Π»ΡΡ Π½Π°Ρ ΠΈΠ΄ΡΠΈ Π΄Π°Π»ΡΡΠ΅, Π² ΠΏΠΎΠΈΡΠΊΠ°Ρ
Π½Π°ΡΡΠΎΡΡΠ΅Π³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΡΠΊΠ»Π°Π΄ΡΠ²Π°Ρ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ Π½Π° Π²ΡΠ΅ΠΎΠ±ΡΠΈΠΉ ΡΡΠ΄ ΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠΆΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠΏΠΎΡΠΎΠ±Ρ.
ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΡΠ°Π·Π½ΠΎΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ
ΠΠ°ΡΠΈΠ°Π½Ρ 2
ΠΡΠΎΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ ΠΏΠ΅ΡΠ²ΡΠΉ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΡΠ°ΡΡΠΈ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π² Π½ΡΠΌ ΠΌΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΠΌ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½, Π»Π΅Π²ΡΠΉ Π±Π»ΠΎΠΊ, Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ ΡΠΆΠ΅ Π² ΡΠ²ΠΎΡΠΌ, ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. ΠΠΎ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΡΠΌ ΠΎΡ ΡΠ»ΠΎΠ² ΠΊ Π΄Π΅Π»Ρ.
<ul> <li> <div>1</div> </li> <li> <ul> <li> <div>2</div> </li> <li> <div>3</div> </li> <li> <div>4</div> </li> <li> <div>5</div> </li> </ul> </li> </ul>
ul { font: 14px Verdana, Geneva, sans-serif; overflow: hidden; } ul li.one { float: left; } ul li.two { overflow : hidden; float : none; } ul li.two li { width: 25%; text-align: right; float: left; /* ΠΠ΅ΠΊΠ°ΡΡΡΠ²ΠΎ Π΄Π»Ρ IE6-7*/ //width: 24.9%; } ul li .content { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; }
ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°ΠΆΠΈΡΠ΅, ΡΡΠΎ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ ΠΌΡ ΠΏΠΎ ΡΡΡΠΈ ΠΈΠΌΠ΅Π΅ΠΌ Π΄Π²Π΅ ΡΠ°Π·Π½ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΠΎ Π±ΡΠ΄Π΅ΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΡΠ°Π²Ρ. ΠΠ΅Π΄Ρ Π½Π°ΡΠ° ΡΡΡΡΠΊΡΡΡΠ° ΠΏΠΎΠ΄Π΅Π»Π΅Π½Π° Π½Π° Π΄Π²Π΅ ΡΠ°ΡΡΠΈ, Π»Π΅Π²Π°Ρ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ· ΡΠ΅Π±Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ ΠΎΠ΄Π½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, Π° ΠΏΡΠ°Π²Π°Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π² ΡΠ΅Π±Π΅ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅. ΠΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
ΠΠ΅Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° ΠΏΡΠΈΠΆΠ°ΡΠ° ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π² ΡΠ΅Π±Π΅ ΡΠ°ΠΌΡΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ, ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ. ΠΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠ°Π²Π°Ρ ΡΠ°ΡΡΡ ΠΏΡΠΈΠΆΠΈΠΌΠ°Π»Π°ΡΡ Π²ΠΏΠ»ΠΎΡΠ½ΡΡ Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π»Π°ΡΡ Π½Π° Π²ΡΡ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΌΠ΅ΡΡΠΎ. Π Π°ΡΡΡΠΆΠΊΠ° ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ overflow : hidden, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Ρ.Π΅. ΠΏΠΎ ΡΡΡΠΈ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ. ΠΠ»Ρ Π²ΡΠ΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 100% ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π±Π»ΠΎΠΊΠΈ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ ΠΌΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΡΠΈΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ. Π§Π΅ΡΡΡΠ΅ Π±Π»ΠΎΠΊΠ° ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 25%, ΡΡΠΎ Π² ΡΡΠΌΠΌΠ΅ Π΄Π°ΡΡ 100. ΠΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΡΡΠΈ Π±Π»ΠΎΠΊΠΈ. ΠΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Π²Π½ΡΡΡΠΈ Π½ΠΈΡ Π²ΡΡΠΎΠ²Π½Π΅Π½Ρ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ text-align : right, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ΅ΠΌΡ ΡΠ°ΠΌΡΠΉ ΠΏΡΠ°Π²ΡΠΉ Π±Π»ΠΎΠΊ ΠΏΡΠΈΠΆΠ°Ρ ΠΊ ΡΠ²ΠΎΠ΅ΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΡΡΠ΅Π½ΠΊΠ΅, ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π»Π΅Π²ΡΠΉ.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ°ΠΊΠΈΠΌ «ΠΆΠ΅ΡΡΠ²Π°ΠΌ» Ρ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΈ ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΠ΅ΡΠ²ΡΡ
ΡΠΈΡΡΠ½ΠΊΠΎΠ², ΠΏΡΠΈ ΡΠ°Π·Π½ΡΡ
ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΡ
, ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ. ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Π·Π° ΡΡΡΡ ΡΠ°Π²Π½ΠΎΠ·Π½Π°ΡΠ½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ. Π¨ΠΈΡΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ
ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 25%, Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π½ΡΡΡΠΈ Π½ΠΈΡ
β 100px. Π§ΡΠΎ ΠΈ Π΄Π°ΡΡ ΡΠ°Π²Π½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ «ΠΊΠΈΡΠΏΠΈΡΠΈΠΊΠ°» Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΠ΅Π»ΠΎ Π·Π°ΡΠ²ΠΈΡΡ, ΡΡΠΎ ΠΏΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠΎΠ² Ρ Π½Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎ, ΡΡΠΎ ΠΌΡ Ρ
ΠΎΡΠ΅Π»ΠΈ.
ΠΠΎ Π²ΡΡ ΠΆΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΡΠ·Π½Π°ΡΡ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΏΠΎΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΡΠ½Π°ΡΠ°Π»Π° Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ, Π° ΠΏΠΎΡΠΎΠΌ ΠΈ Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈΠ· ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ Π»Π΅Π²ΠΎΠΌΡβ¦ Π½Ρ Π΄ΠΎΠΏΡΡΡΠΈΠΌ 150px.
ul li.one .content { width: 150px;}
ΠΡΡ Π·Π΄ΠΎΡΠΎΠ²ΠΎ! ΠΠΎΠΊΠ° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΡΡ ΡΠ° ΠΆΠ΅ ΠΈΠ΄Π΅Ρ Ρ ΠΏΡΠ°Π²ΡΠΌ, ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ. Π ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΌ Π½Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π±Π»ΠΎΠΊ Π² ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ.
ΠΡ , Π° Π²ΠΎΡ ΡΡΠΎΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ΅ΡΠΏΠ΅Π» Π½Π΅ΡΠ΄Π°ΡΡ. ΠΡΠ°Π²ΡΠΉ ΠΎΡΡΡΡΠΏ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΎΠΊΠ°Π·Π°Π»ΡΡ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅. ΠΡΡ Π»Π΅Π³ΠΊΠΎ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ, ΡΡΠ°Π» Π±ΠΎΠ»ΡΡΠ΅ Π½Π° 50px, Π° ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ Π²ΡΡΠΎΠ²Π½Π΅Π½ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅, ΡΠΎ ΡΠΈΡΠΈΠ½Π° Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ±Π°Π²ΠΈΠ»Π°ΡΡ ΠΊ Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΡΠ°Π»Π° ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΡ ΠΈ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΠ»ΡΡ ΠΎΡΡΡΡΠΏ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π» ΠΌΠ΅Π½ΡΡΠ΅ ΡΠΎΠ²Π½ΠΎ Π½Π° 50px.
ΠΠ· Π²ΡΠ΅Π³ΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ²ΠΎΠ΄, ΡΡΠΎ Π΄Π°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ²Π½ΠΎ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΈΠΊ ΠΈ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠ°Π²ΠΎ Π½Π° ΠΆΠΈΠ·Π½Ρ. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ Π΅Π³ΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ ΡΠ²ΡΠ·Π°Π½ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π΄Π°ΡΡ ΡΠ°Π·Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°ΠΌ, ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ. Π’Π°ΠΊ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠΏΠΈΡΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π²Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΡΠΎ Π²Ρ Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΎΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄. ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ Π±Π΅Π· Π΄Π²ΡΡ
ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΡ ΡΡΡ Π½Π΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ + Π½ΡΠΆΠ½Π° ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½Π°Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° (min-width), ΠΈΠ½Π°ΡΠ΅ ΠΏΡΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° Π±Π»ΠΎΠΊΠΈ Π±ΡΠ΄ΡΡ Π½Π°Π΅Π·ΠΆΠ°ΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.
* ΠΡΡΠ°ΡΠΈ, Ρ ΡΠ΅Π±Ρ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π² ΠΏΡΠ°Π²ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠ΅ΡΡΡΠ΅ Π±Π»ΠΎΠΊΠ° ΠΏΠΎ 25%, ΠΈ ΠΈΡ
ΠΎΠ±ΡΠ°Ρ ΡΡΠΌΠΌΠ° ΡΠΎΡΡΠ°Π²ΠΈΠ»Π° 100%. ΠΠΎΡΡΠΎΠΌΡ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π±Π»ΠΎΠΊΠΎΠ² Π±ΡΠ΄Π΅Ρ, Π½Ρ ΡΠΊΠ°ΠΆΠ΅ΠΌ 6, ΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ
, Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° 16.666, ΡΡΠΎ Π³ΠΎΠ²ΠΎΡΠΈΡ ΠΎ Π΄ΡΠΎΠ±Π½ΡΡ
ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Opera.
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ΄Π΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ ΡΠ΅ΠΌ, ΡΠ΅ΠΌ Π²Π°ΠΌ Ρ
ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ.
ΠΠ°ΡΠΈΠ°Π½Ρ Ρ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ
ΠΠ°ΡΠΈΠ°Π½Ρ 3 β text-align: justify
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°, Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΌΡ Π½ΠΈ ΡΠ°Π·Ρ Π½Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ text-align: justify, Π΄Π°ΠΆΠ΅ Π½Π΅ ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΅Π³ΠΎ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° ΠΈ ΡΡΡΠΎΡΡΡΡ Π²ΡΠ΅ Π½Π°ΡΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ. Π― ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ Π½Π°ΡΡΡΠΈΡΡ ΡΡΡ ΡΡΠ°Π΄ΠΈΡΠΈΡ ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΠΏΡΡΡΠΈΡΡ ΡΠΆΠ΅ Π² Π΄Π΅Π»ΠΎ ΡΡΠΎΠ³ΠΎ Π·Π²Π΅ΡΡ.
Π ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΠ°ΡΡΠΈ ΠΌΡ Π²ΡΡΡΠ½ΠΈΠ»ΠΈ, ΡΡΠΎ text-align: justify Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π²ΡΠ΅ ΡΡΡΠΎΠΊΠΈ, ΠΊΡΠΎΠΌΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ, Π° Π·Π½Π°ΡΠΈΡ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΡΡΠΎΠΈΡΡ Π½Π°Ρ ΡΠΏΠΈΡΠΎΠΊ Ρ ΡΡΡΡΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π² ΠΊΠΎΠ½Π΅Ρ ΠΌΠ΅Π½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ, Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li></li> </ul>
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; } ul li { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; } ul li.helper { width: 100%; height: 0; visibility: hidden; }
ΠΠ· ΠΊΠΎΠ΄Π° ΡΡΠ½ΠΎ, ΡΡΠΎ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΏΡΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ β ΠΏΠΎΠΌΠΎΡΠ½ΠΈΠΊΠΎΠΌ. text-align: justify Π½Π° Π³Π»Π°Π²Π½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅-ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ (ul), Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ²ΠΎΠΈΡ
ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΠΏΠΎΠ΄ΡΠΈΠ½ΡΡΡΡΡ ΡΠ²ΠΎΠ΅ΠΌΡ Π°Π»Π³ΠΎΡΠΈΡΠΌΡ. ΠΠ΅Π΄Ρ, ΠΊΠ°ΠΊ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ, Π° ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΡΠΈ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠ΅ (display: inline-block) ΠΏΡΠ½ΠΊΡΡ, ΠΏΠΎ ΡΡΡΠΈ ΠΈ ΡΠ²Π»ΡΡΡΡΡ Π½Π΅ΡΠ°Π·ΡΡΠ²Π½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π² ΡΡΡΠΎΠΊΠ΅, ΡΠΎ ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΏΠΎΠ»Π½Π΅ Π·Π°ΠΊΠΎΠ½ΠΎΠΌΠ΅ΡΠ½ΠΎ. ΠΡΡΠ°ΡΠΈ, ΡΡΠΎΠΈΡ ΡΡΠ΅ΡΡΡ, ΡΡΠΎ text-align: justify Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ text-align: left Π½Π° Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΡ
ΠΏΠΎΡΠΎΠΌΠΊΠ°Ρ
β Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠ°Ρ ΠΌΠ΅ΡΠ°. ΠΡΠΈΠΌ ΡΠ°ΠΌΡΠΌ ΠΌΡ ΠΊΠ°ΠΊ Π±Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π°ΡΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΏΡΠ΅ΠΆΠ½Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
Π ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΠ°ΡΡΠΈ Ρ ΡΠΏΠΎΠΌΠΈΠ½Π°Π», ΡΡΠΎ Π½Π°Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ Π½Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΡΡΠΎΠΊΡ, Π° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ ΠΊΡΠΎΠΌΠ΅ Π½Π΅Ρ. ΠΠΎΡΡΠΎΠΌΡ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π² ΠΊΠΎΠ½Π΅Ρ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΡΡΡΡΡΠΊΡ, ΠΈ ΡΠ°ΡΡΡΠ½ΡΠ» Π΅Π³ΠΎ Π½Π° 100% ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ Π·Π°ΡΡΠ°Π²ΠΈΠ² Π΅Π³ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡΡΡ Π½Π° ΡΠ°ΠΌΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΡΡΠΎΡΠΊΡ Π² ΡΠΏΠΈΡΠΊΠ΅. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅Ρ
ΠΈΡΡΡΡ
ΠΏΡΠΈΡΠΌΠΎΠ² (height: 0, visibility: hidden) Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΠΏΠΎΡΡΠΈ ΡΡΠΎ ΡΠΏΡΡΡΠ°Π» Π΅Π³ΠΎ. ΠΠΎΡΠ΅ΠΌΡ Ρ ΡΠΊΠ°Π·Π°Π» Β «ΠΠΎΡΡΠΈ ΡΡΠΎ»? ΠΠ± ΡΡΠΎΠΌ ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅, Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ Π½Π°Ρ Π²ΡΡΠ»ΠΎ.
ΠΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ Π±ΡΠΎΡΠ°Π΅ΡΡΡ Π² Π³Π»Π°Π·Π°, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΏΡΠΈ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ Π½Π°Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½. ΠΡΠΈ ΠΏΡΠ½ΠΊΡΠ°Ρ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ, ΡΡΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠ°Π΄ΠΎΠ²Π°ΡΡ. ΠΠΎ Π²ΡΡ ΡΠ°ΠΊΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΡΠ·Π½Π°ΡΡ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ Π²ΡΡ ΡΠ°ΠΊ ΠΆΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΈ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠΎΠ². ΠΠ°Π·Π½Π°ΡΠΈΠΌ ΠΏΠ°ΡΠ΅ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΊΠ»Π°ΡΡΡ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ ΡΡΠΎ.
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li></li> </ul>
ΠΠΎΠ±Π°Π²ΠΈΠΌ Π΄Π»Ρ Π½ΠΈΡ ΡΠ²ΠΎΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π°.
.first { width: 150px;} .third { width: 200px;}
ΠΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ.
Π― ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ» ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠΊΠ°ΠΊΠΈΠ²Π°Π»ΠΈ Π½Π° Π΄ΡΡΠ³ΡΡ ΡΡΡΠΎΠΊΡ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π² ΡΠ΅ΠΊΡΡΠ΅. ΠΠΎ, Π΅ΡΠ»ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ°, ΡΠΎ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ! ΠΡΠΎΠ±Π΅Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΎΡΡΠ°ΡΡΡΡ ΡΠ°Π²Π½ΠΎΠ·Π½Π°ΡΠ½ΡΠΌΠΈ, Π΄Π°ΠΆΠ΅ Π½Π΅ ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ Π΄Π²ΠΎΠΈΡ
ΠΈΠ· Π½ΠΈΡ
, ΠΌΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ.
Π’.Π΅. ΠΌΠΎΠΆΠ½ΠΎ Ρ Π»ΡΠ³ΠΊΠΎΡΡΡΡ Π·Π°ΡΠ²Π»ΡΡΡ, ΡΡΠΎ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄, Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π² ΠΊΠΎΠ½ΡΠ΅ β Π΄Π°ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ ΡΠΊΡΠ°Π½ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΡΠΎ Π΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π½Π°Ρ Π½Π΅ ΡΠ°Π·ΠΎΡΠ°ΡΡΠ΅Ρ.
Π’Π°ΠΊ, Π½Ρ Π° ΡΠ΅ΠΏΠ΅ΡΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉ, Π½Π°ΡΡΠ°Π»ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ΄Π»ΠΈΡΡ Π»ΠΎΠΆΠΊΡ Π΄ΡΠ³ΡΡ.
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, Π²ΠΎ Π²ΡΠ΅Ρ
ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
Ρ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΠ» Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΡΠΎΠΌΠ΅ IE6-7.
ΠΠΎ-Π²ΡΠΎΡΡΡ
, ΠΎΠΏΡΡΡ ΠΆΠ΅, ΠΊΠ°ΠΊ Π²Ρ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅ΡΡ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ°Ρ
, Π²Π½ΠΈΠ·Ρ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ, Π³Π΄Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅, Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ.
ΠΠ΅ΡΠ²Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° β ΡΡΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° IE6-7. ΠΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄Ρ ΡΠΊΡΠΈΠ½ΡΠΎΡΡ, ΡΠΊΠ°ΠΆΡ ΡΡΠ°Π·Ρ, ΡΡΠΎ Π½Π°Ρ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°ΠΌ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΡΠ½ΠΊΡΡ Π² ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΏΡΠΈΠΆΠ°ΡΡ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ Π²ΠΏΠ»ΠΎΡΠ½ΡΡ ΠΈ Π½Π΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π² ΡΡΡΠΎΠΊΠ΅. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΠ°ΡΡΠ΅Ρ IE6-7 ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ ΡΠ΅Π³ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <li>. Π Π½Π΅Ρ ΡΠ΅Π³ΠΎΠ² β Π·Π½Π°ΡΠΈΡ Π½Π΅Ρ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ, ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ text-align: justify ΠΏΡΠΎΠΏΡΡΠΊΠ°Π΅Ρ Π½Π°ΡΡ ΡΡΡΠΎΠΊΡ, ΡΠΎΡΡΠΎΡΡΡΡ ΠΏΠΎ ΡΡΡΠΈ ΠΈΠ· ΠΎΠ΄Π½ΠΈΡ «ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΡ » ΡΠ»ΠΎΠ², ΠΏΡΠΈΠΆΠ°ΡΡΡ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ.
ΠΠ° ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π°Π½Π½ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΌΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ Π½Π° ΡΠ°ΠΌΡΡ Π²ΡΡΠΎΠΊΡΡ Π³ΠΎΡΡβ¦ Π½Π° MSDN. ΠΠ΄Π°β¦ Π½Π°ΠΉΡΠΈ ΡΡΠΎ Π»ΠΈΠ±ΠΎ Π½Π° ΡΡΠΎΠΌ ΡΠ°ΠΉΡΠ΅, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΡΡ ΡΡΡΠ΄Π½ΠΎΡΡΡ. ΠΠΎ, Π²ΡΡ ΠΆΠ΅ ΠΏΠΎΠ²ΠΎΠ·ΠΈΠ²ΡΠΈΡΡ, Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ, ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π½Π°ΠΉΠ΄Π΅Π½ΠΎ! text-justify: newspaper β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π±ΡΠΊΠ²Π°ΠΌΠΈ ΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ. MSDN Π·Π°ΡΠ²Π»ΡΠ΅Ρ, ΡΡΠΎ ΡΡΠ° Π²Π΅ΡΡ «Π‘Π°ΠΌΠ°Ρ Π½Π°Π²ΠΎΡΠΎΡΠ΅Π½Π½Π°Ρ ΡΠΎΡΠΌΠ° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π»Π°ΡΠΈΠ½ΡΠΊΠΎΠ³ΠΎ Π°Π»ΡΠ°Π²ΠΈΡΠ°», Π° Π²ΠΎΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π΅ΡΡ Π΅ΡΡΡ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, ΡΡΠΎ Π΄Π»Ρ Π°ΡΠ°Π±ΡΠΊΠΈΡ
ΡΠ΅ΠΊΡΡΠΎΠ² ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²ΡΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΠΈ ΡΠ°ΠΌΠΈ Π±ΡΠΊΠ²Ρ.
ΠΡΠ»ΠΈΡΠ½ΠΎ, Π½Π°ΠΌ ΠΊΠ°ΠΊ ΡΠ°Π· Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅. ΠΠ°Π²Π°ΠΉΡΠ΅-ΠΊΠ° ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ ΠΈΡ
ΡΠ»ΠΎΠ²Π° Π½Π° Π΄Π΅Π»Π΅.
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* ΠΠ΅ΠΊΠ°ΡΡΡΠ²ΠΎ Π΄Π»Ρ IE6-7*/ text-justify: newspaper; } ul li { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; } ul li.helper { width: 100%; height: 0; visibility: hidden; } .first { width: 150px;} .third { width: 200px;}
Π Π²ΠΎΡ ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
ΠΠΎΠ±Π΅Π΄Π°! IE6-7 Π±ΡΠ»ΠΈ ΠΏΠΎΠ±Π΅ΠΆΠ΄Π΅Π½Ρ ΠΈΡ ΠΆΠ΅ ΠΎΡΡΠΆΠΈΠ΅ΠΌ. ΠΠ΄ΠΎΡΠΎΠ²ΠΎ. Π’Π΅ΠΏΠ΅ΡΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π½Π°ΡΠΈΠ½Π°Ρ Ρ IE6, Π½Π°Ρ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ. ΠΡΡ ΠΎΠ΄ΠΈΡ, ΡΡΠΎ MSDN Π½Π΅ ΠΏΠΎΠ΄Π²Π΅Π»ΠΈ ΠΈ ΠΈΡ ΡΠ»ΠΎΠ²Π° ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΄ΠΈΠ»ΠΈΡΡ Π½Π° Π΄Π΅Π»Π΅. Π’Π°ΠΊ ΡΡΠΎ text-align: justify Π²ΡΡΡΡΠΈΠ» Π½Π°Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Π±Π΅ΡΡΠΌ Π΅Π³ΠΎ Π½Π° Π·Π°ΠΌΠ΅ΡΠΊΡ ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΊ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π²ΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
ΠΡΠΎΡΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ²ΡΠ·Π°Π½Π° Ρ Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΡΠΌ ΠΎΡΡΡΡΠΏΠΎΠΌ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠ·ΠΎΠΌ ΡΠΏΠΈΡΠΊΠ° ΠΈ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΎΠΉ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. Π ΡΡΠΌ ΠΆΠ΅ Π΄Π΅Π»ΠΎ? Π Π΄Π΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²ΡΡ Π²ΠΏΠΎΠ»Π½Π΅ Π·Π°ΠΊΠΎΠ½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΠΈ ΡΡΠΈΠΌΠΈ ΡΡΡΠ°Π½Π½ΡΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ ΡΠ²Π»ΡΡΡΡΡ Π½ΠΈ ΠΊΡΠΎ ΠΈΠ½ΡΠ΅, ΠΊΠ°ΠΊ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» (line-height) ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° (font-size), ΠΊΠΎΡΠΎΡΡΠ΅ Π°ΠΏΡΠΈΠΎΡΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ Ρ ΡΡΡΠΎΠΊ ΠΈ Π±ΡΠΊΠ² Π² ΡΠ΅ΠΊΡΡΠ΅. ΠΠ°ΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ β Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΡΡΡΠΈ, Π° ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ½Π°ΡΡΠΆΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ ΠΈ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡ ΠΏΠΎΠ΄ ΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π°.
ΠΠ°ΠΊ Π±ΡΡΡ? Π Π»Π΅Π³ΠΊΠΎ! ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ²Π΅ΡΠΈΡΡ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΎΠ±Π½ΡΠ»Π΅Π½ΠΈΠ΅ ΡΡΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ, Π° ΡΠΆΠ΅ Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² Π²ΠΎΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΡ
Π² ΠΏΡΠ΅ΠΆΠ½Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΡΠΎΠ±ΡΠ΅ΠΌ.
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* ΠΠ±Π½ΡΠ»ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ*/ line-height: 0; font-size: 1px; /* 1px Π΄Π»Ρ Opera */ /* ΠΠ΅ΠΊΠ°ΡΡΡΠ²ΠΎ Π΄Π»Ρ IE6-7*/ text-justify: newspaper; } ul li { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΠΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΠΊΡΠΎΠΌΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ*/ line-height: normal; font-size: 14px; /* ΠΠ΅Π· Π½Π΅Π³ΠΎ Π² Opera Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΡΠΏ ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ */ vertical-align: top; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; } ul li.helper { width: 100%; height: 0px; visibility: hidden; overflow: hidden; } .first { width: 150px;} .third { width: 200px;}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ.
ΠΠΎ ΠΎΠ±Π½ΡΠ»Π΅Π½ΠΈΡ
ΠΠΎΡΠ»Π΅ ΠΎΠ±Π½ΡΠ»Π΅Π½ΠΈΡ
ΠΡΠ»ΠΈΡΠ½ΠΎ! ΠΡΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ. ΠΠ±Π½ΡΠ»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Ρ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΠΎΠΌΠΎΠ³Π»ΠΎ Π½Π°ΠΌ. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΠΎΠΈΡ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π² ΡΠ²ΡΠ·ΠΈ Ρ ΠΎΠ±Π½ΡΠ»Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° ΠΌΡ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ Π½Π°ΡΠΈΠΌ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΡΡΠΈΡΡ Π² ΡΠ°ΠΊΠΈΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ Π΄Π»ΠΈΠ½Ρ, ΠΊΠ°ΠΊ em, Π° ΡΠ°ΠΊ ΠΆΠ΅ % Π΄Π»Ρ <body> Π½Π΅ ΠΏΡΠΈΠ½Π΅ΡΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°. ΠΠΎ, Π° ΡΠ΅Π»ΠΎΠΌ, Π½Π°Ρ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π²ΠΎΠ΄ΠΈΡΡ ΠΈΡΠΎΠ³ΠΈ ΠΈ ΠΈΠ΄ΡΠΈ Π΄Π°Π»ΡΡΠ΅, Π²Π΅Π΄Ρ Π½Π°ΠΌ ΠΆΠ΅ ΠΌΠ°Π»ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ, Π½Π°ΠΌ ΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΈ Π»ΡΡΡΠ΅, Π½Π΅ ΠΏΡΠ°Π²Π΄Π° Π»ΠΈ?
ΠΠΎΠ΄Π²ΠΎΠ΄Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠ΅ ΠΈΡΠΎΠ³ΠΈ, ΡΠΊΠ°ΠΆΡ, ΡΡΠΎ Π΄Π°Π½Π½ΡΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ ΠΏΠΎΠΊΠ° ΡΡΠΎ Π»ΠΈΠ΄Π΅Ρ ΡΡΠ΅Π΄ΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡΠΈΡ
Π΄ΠΎ ΡΠ΅ΠΉ ΠΏΠΎΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, ΠΈ ΡΡΠΎ, Ρ Π»ΠΈΡΠ½ΠΎ, Π½Π΅ Π²ΠΈΠΆΡ Π² Π½ΡΠΌ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΡΡΠ½Π°, ΠΏΡΠ°Π²Π΄Π°, ΠΊΡΠΎΠΌΠ΅β¦ ΠΡΠΎΠΌΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΊΠΎΠ½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ, ΠΏΠ»ΡΡ, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ, Π½Π΅Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ % ΠΈ em. ΠΠΎ, ΡΡΠΈ Π½Π°ΡΡΠ½ΡΡΡΠ΅ ΠΌΠΈΠ½ΡΡΡ, Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΎΡΠΊΠ°Π·Π° ΠΎΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ°. Π’Π°ΠΊ ΡΡΠΎ ΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈ ΠΈΠ΄ΡΠΌ Π΄Π°Π»ΡΡΠ΅.
ΠΠ°ΡΠΈΠ°Π½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
ΠΠ°ΡΠΈΠ°Π½Ρ 4 β ΠΠ·Π±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅ Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΡΠ΅Π»ΠΈ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠ°Π²Ρ Π΅Π³ΠΎ Π² ΠΊΠΎΠ½Π΅Ρ ΡΠΏΠΈΡΠΊΠ°. Π‘ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, ΡΡΠΎΡ ΠΌΠ°Π½Π΅Π²Ρ ΠΏΡΠΈΠ½Π΅Ρ ΡΠ²ΠΎΠΈ ΠΏΠ»ΠΎΠ΄Ρ, Π½ΠΎ Ρ Π΄ΡΡΠ³ΠΎΠΉβ¦ Π½ΠΎ Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΡΠΎΠ·Π΄Π°Π» Π½Π΅ΠΊΠΈΠ΅ Π½Π΅ΡΠ΄ΠΎΠ±ΡΡΠ²Π°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΡΠ½ΠΊΡΠΎΠ², Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠ°ΡΡ, Π΄Π° ΠΈ ΠΏΠΎΡΠΎΠΌ ΡΡΠΎΡ «Ρ
Π²ΠΎΡΡ» ΠΏΠΎΡΡΠΈΡ Π½Π°ΡΡ ΡΡΡΡΠΊΡΡΡΡ, Π·Π°ΡΠΎΡΡΡ Π΅Ρ. Π ΡΡΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅, Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ Π½Π΅Π³ΠΎ, Π½Π΅ ΠΈΡΠΏΠΎΡΡΠΈΠ² ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
Π CSS2.1 ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ Π΅ΡΡΡ ΡΠ°ΠΊΠΈΠ΅ Π²Π΅ΡΠΈ, ΠΊΠ°ΠΊ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΎ ΡΠ°ΠΊΠΈΠ΅ Π°Π±ΡΡΡΠ°ΠΊΡΠ½ΡΠ΅ ΡΡΡΠ½ΠΎΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Ρ ΠΊΠ°ΠΊΠΈΠΌ Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈ Π²ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π΅Π³ΠΎ Π½Π°ΡΠ°Π»ΠΎ ΠΈΠ»ΠΈ ΠΊΠΎΠ½Π΅Ρ. ΠΠΎΡΠ΅ΠΌΡ Π±Ρ Π½Π΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π½Π°Ρ Π»ΠΈΡΠ½ΠΈΠΉ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ? ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌβ¦
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* ΠΠ±Π½ΡΠ»ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ*/ line-height: 0; font-size: 1px; /* 1px Π΄Π»Ρ Opera */ /* ΠΠ΅ΠΊΠ°ΡΡΡΠ²ΠΎ Π΄Π»Ρ IE6-7*/ text-justify: newspaper; zoom:1; } ul:after { width: 100%; height: 0; visibility: hidden; overflow: hidden; content: ''; display: inline-block; } ul li { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΠΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΠΊΡΠΎΠΌΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ*/ line-height: normal; font-size: 14px; /* ΠΠ΅Π· Π½Π΅Π³ΠΎ Π² Opera Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΡΠΏ ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ */ vertical-align: top; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; }
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ ΠΌΡ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ :after, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π»ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ°. ΠΡΡΡΠ°Π²ΠΈΠ² Π΅ΠΌΡ ΡΠ΅ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΠΎ ΠΈ Π±ΡΠ²ΡΠ΅ΠΌΡ, Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ, ΠΌΡ, ΠΏΠΎ ΡΡΡΠΈ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΠΎΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, Π½ΠΎ Π½Π΅ Π·Π°Π»Π΅Π·Π°Ρ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ. Π’.Π΅. ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΏΡΡΡΠΎΠΉ, Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π Π²ΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ.
ΠΠ΄ΠΎΡΠΎΠ²ΠΎ! Π’ΡΡΠΊ Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΡΠ°Π±ΠΎΡΠ°Π». Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° ΡΠΈΡΡΠ°Ρ, Π°ΠΊΠΊΡΡΠ°ΡΠ½Π°Ρ ΠΈ Π±Π΅Π· Π»ΠΈΡΠ½Π΅Π³ΠΎ «ΠΌΡΡΠΎΡΠ°». ΠΠ°ΠΌ ΡΠ΄Π°Π»ΠΎΡΡ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΠΌΠ΅Π½ΠΈΠ² Π΅Π³ΠΎ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ.
ΠΠΎ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, Π½Π΅ ΠΎΠ±ΠΎΡΠ»ΠΎΡΡ Π±Π΅Π· IE6-7 ΠΏΡΠΈΠΊΠ»ΡΡΠ΅Π½ΠΈΠΉ. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
IE6-7 Π½Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ :after ΠΈ :before. Π Π΅ΡΠ»ΠΈ Π½Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈ Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΈΡ
Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ², Π° Π·Π½Π°ΡΠΈΡ ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΏΠΎΠΏΡΠΎΡΡΡ Π½Π΅ΡΠ΅Π³ΠΎ. ΠΠΎΡΡΠΎΠΌΡ ΠΊΠ°ΡΡΠΈΠ½Π° Π² ΡΡΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΡΠ°ΠΊΠΎΠ²Π°.
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΡΠΊΡΠΈΠ½ΡΠΎΡΠ°, IE6-7 ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠΎΠ², ΠΏΡΠΈΠΆΠΈΠΌΠ°Ρ ΠΈΡ
Π²ΠΏΠ»ΠΎΡΠ½ΡΡ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ. ΠΠ°ΠΆΠ΅ Π½Π΅ ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΌΡ ΡΠΆΠ΅ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°Π»ΠΈ ΡΡΠΆΡΠ»ΡΡ Π°ΡΡΠΈΠ»Π»Π΅ΡΠΈΡ Π² Π²ΠΈΠ΄Π΅ text-justify: newspaper. ΠΠΎΡΠ΅ΠΌΡ ΠΆΠ΅ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ? ΠΠ°Π²Π°ΠΉΡΠ΅ Π²ΡΡΡΠ½ΠΈΠΌ.
ΠΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π²ΡΡ Π΄Π΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ text-justify: newspaper Π»ΠΈΡΡ Π΄Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ Π½Π°ΡΠΈ Π±ΡΠΊΠ²Ρ (inline-block), Π½ΠΎ Π½Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ. ΠΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΠΎΠ½ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΡΡΠΎΠΊΠ΅, ΠΊΠ°ΠΊ Π±Ρ ΠΎΠ½ Ρ
ΠΎΡΠ΅Π», ΡΡΠΎΠ±Ρ ΠΎΠ½Π° Π±ΡΠ»Π° ΡΠ°ΡΡΡΠ½ΡΡΠ°, Π° text-align: justify ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΠ΅ΠΉ ΡΠΈΠ»ΠΎΠΉ. Π’.Π΅. text-align: justify ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ, Π° text-justify: newspaper Π»ΠΈΡΡ ΡΡΠΎΡΠ½ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡΡ.
ΠΠ°, Π½ΠΎ ΡΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π²ΠΎΠΏΡΠΎΡ: «ΠΡΠ»ΠΈ Π΅ΡΡΡ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈ ΡΠΈΠ»Π°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π΅Ρ ΠΈΡΠΏΠΎΠ»Π½ΠΈΡΡ, ΡΠΎ ΠΏΠΎΡΠ΅ΠΌΡ ΠΆΠ΅ ΡΠΎΠ³Π΄Π° Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ?». ΠΡΠ²Π΅Ρ ΠΊΡΠΎΠ΅ΡΡΡ Π² ΡΠ°ΠΌΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ text-align: justify. ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, Π² ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΠΈ Π΅Π³ΠΎ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° Ρ ΡΠΏΠΎΠΌΡΠ½ΡΠ» ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ Π½Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΡΡΠΎΠΊΡ Π² ΡΠ΅ΠΊΡΡΠ΅. Π ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ ΡΠ±ΡΠ°Π»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ½ΡΠ΅ ΡΠΏΠΈΡΠΊΠ°, ΡΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π½Π°ΡΠ° ΡΡΡΠΎΠΊΠ° (ΠΏΡΡΠΊΠ°ΠΉ Π΄Π°ΠΆΠ΅ ΠΎΠ½Π° ΠΎΠ΄Π½Π°) Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ β ΡΡΠ°Π»Π° ΡΠΆΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ, ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΠΎΡΠΊΠ°Π·Π°Π»ΡΡ Ρ Π½Π΅ΠΉ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
ΠΠ°ΠΊ ΠΆΠ΅ Π±ΡΡΡ? ΠΡΡΡ Π»ΠΈ Π²ΡΡ
ΠΎΠ΄?
Π ΡΡΠ°ΡΡΡΡ ΠΌΠΈΡ Π½Π΅ Π±Π΅Π· Π΄ΠΎΠ±ΡΡΡ
Π»ΡΠ΄Π΅ΠΉ, ΠΈ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΊΠΎΠΉ Π΄ΠΎΠ±ΡΡΠΉ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ Π½Π°ΠΏΡΠ°Π²ΠΈΠ» ΠΌΠ΅Π½Ρ Π½Π° Π²Π΅ΡΠ½ΡΠΉ ΠΏΡΡΡ. ΠΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Ρ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄ Π½ΠΎΡΠΎΠΌ. text-align-last β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ text-align: justify Π² ΡΠ°ΠΌΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΡΠΎΠΊΠ΅ ΡΠ΅ΠΊΡΡΠ°, Π΅ΡΠ»ΠΈ ΠΊ Π½Π΅ΠΉ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ½ ΡΡΠΎΡ ΡΠ°ΠΌΡΠΉ text-align: justify. ΠΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΊ ΡΠ΅ΠΊΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΉ text-align: justify, ΡΠΎ, Π²ΠΈΠ΄Ρ ΡΡΠΎ, text-align-last ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΡΡΡΠΏΠ°Π΅Ρ ΠΏΠ»ΠΎΡ
ΠΎ ΠΈ ΡΡΠΎ Π΅ΠΌΡ ΠΏΡΠΈΠ΄ΡΡΡΡ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΡΠΎΡΠΊΠ΅ ΡΠΎΠΆΠ΅.
Π‘Π°ΠΌΠΎΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅, ΡΡΠΎ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° Internet Explorer, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ Π½Π°ΠΌ ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ Π½ΡΠΆΠ΅Π½). Π ΠΎΠ±ΡΠ΅ΠΌ ΠΏΠΎΡΠ° ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΡ ΠΊ Π΄Π΅Π»Ρ.
ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* ΠΠ±Π½ΡΠ»ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ*/ line-height: 0; font-size: 1px; /* 1px Π΄Π»Ρ Opera */ /* ΠΠ΅ΠΊΠ°ΡΡΡΠ²ΠΎ Π΄Π»Ρ IE6-7*/ text-justify: newspaper; zoom:1; /* ΠΠΊΠ»ΡΡΠ°Π΅ΠΌ Π² ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΡΡΠΎΠΊΡ*/ text-align-last: justify; } ul:after { width: 100%; height: 0px; visibility: hidden; overflow: hidden; content: ''; display: inline-block; } ul li { background: #E76D13; width: 98px; height: 98px; display: inline-block; text-align: left; border: 1px solid #000; /* ΠΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΠΊΡΠΎΠΌΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ*/ line-height: normal; font-size: 14px; /* ΠΠ΅Π· Π½Π΅Π³ΠΎ Π² Opera Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΡΠΏ ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ */ vertical-align: top; /* ΡΠΌΡΠ»ΡΡΠΈΡ inline-block Π΄Π»Ρ IE6-7*/ //display : inline; //zoom : 1; }
ΠΠ°! Π£ Π½Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ. text-align-last: justify ΡΠ΄Π΅Π»Π°Π» ΡΠΎ, ΡΡΠΎ ΠΎΡ Π½Π΅Π³ΠΎ ΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΎΡΡ, ΠΈ ΡΠ΄Π΅Π»Π°Π» ΡΡΠΎ Π½Π° 5 Π±Π°Π»Π»ΠΎΠ². ΠΠ»Π³ΠΎΡΠΈΡΠΌ Π²ΠΊΠ»ΡΡΠΈΠ»ΡΡ Π² ΡΠ°Π±ΠΎΡΡ, Π² Π½Π°ΡΠ΅ΠΉ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΠΈ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅. Π’Π°ΠΊ ΡΡΠΎ ΠΏΡΠ°Π·Π΄Π½ΡΠ΅ΠΌ ΠΏΠΎΠ±Π΅Π΄Ρ ΠΈ ΠΏΠΎΠ΄Π²ΠΎΠ΄ΠΈΠΌ ΠΈΡΠΎΠ³ΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π°.
ΠΡ ΡΡΠΎ ΠΆ, Ρ Π΄ΠΎΠ²ΠΎΠ»Π΅Π½. ΠΠΎΠ²ΠΎΠ»Π΅Π½ ΡΠ΅ΠΌ, ΡΡΠΎ Π½Π°ΠΌ ΡΠ΄Π°Π»ΠΎΡΡ Π½Π°ΠΉΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΡΡΠΎΠΉΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΡΠΈΡΡΠΌ Π½Π΅ ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΉΡΠΈ, Π° ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π²ΠΎ Π²ΡΡΠΌ ΠΈ Π΄ΠΎΠ²Π΅ΡΡΠΈ Π΅Π³ΠΎ Π΄ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΠΈ, Π·Π°ΡΡΠ°ΡΠΈΠ² ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΠΊΠΎΠ΄Π° ΠΈ Π½Π΅ Π·Π°ΡΠΎΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. ΠΠ° Π»ΠΈΡΠΎ ΠΎΠ΄Π½ΠΈ ΠΏΠ»ΡΡΡ, Π° ΡΡΠΎ ΠΆΠ΅ Ρ ΠΌΠΈΠ½ΡΡΠ°ΠΌΠΈ? ΠΠ°ΠΊ ΠΏΠΎ ΠΌΠ½Π΅, ΡΠ°ΠΊ ΠΈΡ ΠΏΠΎΠΏΡΠΎΡΡΡ β Π½Π΅Ρ. ΠΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ, Π² ΡΡΠΎΠΌ ΠΌΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ»ΡΡΡΠΈΠ»ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ. Π Π°Π·Π²Π΅ ΡΡΠΎβ¦
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΠΎΠΈΡ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π² ΡΠ²ΡΠ·ΠΈ Ρ ΠΎΠ±Π½ΡΠ»Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° ΠΌΡ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ Π½Π°ΡΠΈΠΌ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΡΡΠΈΡΡ Π² ΡΠ°ΠΊΠΈΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ Π΄Π»ΠΈΠ½Ρ, ΠΊΠ°ΠΊ em, Π° ΡΠ°ΠΊ ΠΆΠ΅ % Π΄Π»Ρ <body> Π½Π΅ ΠΏΡΠΈΠ½Π΅ΡΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
ΠΠΎ, ΠΎΠΏΡΡΡ ΠΆΠ΅, ΡΡΠΈ «ΠΌΠΈΠ½ΡΡΡ» Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ Π½Π°ΡΡΠΆΠΊΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°ΡΡ ΡΠ°ΠΊΠΎΠ²ΡΠΌΠΈ. ΠΡ
Π½Π΅Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎΡΡΡ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎ Π½ΠΈΡ
ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°Π±ΡΡΡ, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π½Π΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΈΠ°Π»ΡΠ½ΠΎ.
Π’Π°ΠΊ ΡΡΠΎ Π² ΡΠ΅Π»ΠΎΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅, Π½Π°Π΄ΡΠΆΠ½ΠΎΠ΅ ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅.
ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
Π Π΅Π·ΡΠΌΠ΅
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ Π½Π°ΠΌ Π² ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, Π½ΠΎ ΠΈ ΡΠ°ΠΊ ΠΆΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΡ ΡΠ°Π±ΠΎΡΡ Π²ΡΠ΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ Π΄Π΅ΡΠ°Π»Π΅ΠΉ, ΡΡΠ°ΡΡΠ²ΡΡΡΠΈΡ
Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅. ΠΡΡ ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ Π²Π΅ΡΠ΅ΠΉ, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ Π΄Π΅Π»ΠΎ. ΠΠΎΡΡΠΎΠΌΡ Ρ Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ°ΡΡ ΡΡΠ°ΡΡΡ, ΠΈ Π½Π΅ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·.
Π― Π±Π΅Π·ΡΠΌΠ½ΠΎ ΡΠ°Π΄, ΡΡΠΎ Π½Π°ΠΌ ΡΠ΄Π°Π»ΠΎΡΡ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ΅Π»ΠΈ ΠΈ Π½Π°ΠΉΡΠΈ Π΄ΠΎΡΡΠΎΠΉΠ½ΠΎΠ΅ ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
ΠΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ
1. ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΡΠ°Π·Π½ΠΎΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ (Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ Π½Π΅ΡΠ°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ
ΠΊΡΠΎ Π½ΠΈΠ±ΡΠ΄Ρ Π½Π°ΡΠΎΠ»ΠΊΠ½ΡΡ Π½Π° Π²Π΅ΡΠ½ΡΠΉ ΠΏΡΡΡ)
2. ΠΠ°ΡΠΈΠ°Π½Ρ Ρ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ (Π Π°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ)
3. ΠΠ°ΡΠΈΠ°Π½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (Π Π°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅)
4. ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (Π Π°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅)
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΎΡ 08.10.2014
ΠΠ°ΡΠΈΠ°Π½Ρ 5 β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π½ΠΎΠ²ΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ
5. ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡΠΎΠ² ΠΈ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΌ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ΠΌ
Π‘ΠΌ. ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΡΠ°ΡΡΡ
P.S. ΠΡΠΎ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ:
css — Bootstrap 4 — ΠΡΡΠΎΠ²Π½ΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ
css — Bootstrap 4 — ΠΡΡΠΎΠ²Π½ΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ — 2 ΠΎΡΠ²Π΅ΡΠ°
ΠΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡΠ΅ΡΡ ΠΊ Stack Overflow , ΡΡΠΎΠ±Ρ ΡΡΠΈΡΡΡΡ, Π΄Π΅Π»ΠΈΡΡΡΡ Π·Π½Π°Π½ΠΈΡΠΌΠΈ ΠΈ ΡΡΡΠΎΠΈΡΡ ΡΠ²ΠΎΡ ΠΊΠ°ΡΡΠ΅ΡΡ.
Π‘ΠΏΡΠΎΡΠΈΠ»
ΠΡΠΎΡΠΌΠΎΡΡΠ΅Π½ΠΎ
7ΠΊ ΡΠ°Π·
ΠΠ° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ ΡΠΆΠ΅ Π΅ΡΡΡ ΠΎΡΠ²Π΅ΡΡ Π·Π΄Π΅ΡΡ :
ΠΠ°ΠΊΡΡΡ 3 Π³ΠΎΠ΄Π° Π½Π°Π·Π°Π΄.
Π― Π½Π΅ ΠΌΠΎΠ³Ρ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ.
ΠΠΎΠΆΠ΅Ρ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠΎΠ΄ΡΠΊΠ°ΠΆΠ΅Ρ Π»ΡΡΡΠΈΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ?
ΠΠΎΡΡΡΠΏ ΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅
<ΡΠΎΡΠΌΠ°>
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ
Π‘ΠΎΠ·Π΄Π°Π½ 08 ΠΎΠΊΡ.
GCoeGCoe
1111 Π·ΠΎΠ»ΠΎΡΠΎΠΉ Π·Π½Π°ΠΊ1010 ΡΠ΅ΡΠ΅Π±ΡΡΠ½ΡΡ Π·Π½Π°ΠΊΠΎΠ²2727 Π±ΡΠΎΠ½Π·ΠΎΠ²ΡΡ Π·Π½Π°ΠΊΠΎΠ²
0
Bootstrap4 ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ CSS Flexbox, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅.Flexbox ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ.
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ flexbox ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ flex-direction
ΠΊΠ°ΠΊ ΡΡΡΠΎΠΊΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) ΠΈΠ»ΠΈ ΡΡΠΎΠ»Π±Π΅Ρ . Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ align-items
ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ
Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ justify-content
— Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΡΠ»ΡΡΠ°Π΅ align-items
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ, Π° justify-content
— Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Flexbox ΠΌΠΎΠΆΠ½ΠΎ ΡΠ·Π½Π°ΡΡ Π·Π΄Π΅ΡΡ: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Π‘ΠΎΠ·Π΄Π°Π½ 09 ΠΎΠΊΡ.
1
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅
ΠΠΎΡΡΡΠΏ ΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅
<ΡΠΎΡΠΌΠ°>
Π― ΡΠ΄Π°Π»ΠΈΠ» col-md-4 ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΠ» Π΅Π³ΠΎ Π½Π° d-flex justify-content-center align-content-center
.ΠΡΠΎ Π±Π΅ΡΠ°-Π²Π΅ΡΡΠΈΡ ΡΡΠΈΠ»ΠΈΡΡ bootstrap 4 Π΄Π»Ρ flexbox. Π₯ΠΎΡΡ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
http://getbootstrap.com/docs/4.0/utilities/flex/
Π‘ΠΎΠ·Π΄Π°Π½ 09 ΠΎΠΊΡ.
brijmcqbrijmcq
3,05322 Π·ΠΎΠ»ΠΎΡΡΡ Π·Π½Π°ΠΊΠ°1313 ΡΠ΅ΡΠ΅Π±ΡΡΠ½ΡΡ Π·Π½Π°ΠΊΠΎΠ²3434 Π±ΡΠΎΠ½Π·ΠΎΠ²ΡΡ Π·Π½Π°ΠΊΠ°
5
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
Stack Overflow Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌ JavaScript
ΠΠ°ΡΠ° ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΡ
ΠΠ°ΠΆΠΈΠΌΠ°Ρ Β«ΠΡΠΈΠ½ΡΡΡ Π²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ cookieΒ», Π²Ρ ΡΠΎΠ³Π»Π°ΡΠ°Π΅ΡΠ΅ΡΡ, ΡΡΠΎ Stack Exchange ΠΌΠΎΠΆΠ΅Ρ Ρ ΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΠ»Ρ cookie Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΈ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½Π°ΡΠ΅ΠΉ ΠΠΎΠ»ΠΈΡΠΈΠΊΠΎΠΉ Π² ββΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² cookie.
ΠΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ cookie
ΠΠ°ΡΡΡΠΎΠΈΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ
Flex Β· Bootstrap
ΠΡΡΡΡΠΎ ΡΠΏΡΠ°Π²Π»ΡΠΉΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠΌ Π΄ΡΡΠ³ΠΈΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° Π³ΠΈΠ±ΠΊΠΈΡ ΡΡΠΈΠ»ΠΈΡ flexbox.ΠΠ»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS.
ΠΠΊΠ»ΡΡΠΈΡΡ Π³ΠΈΠ±ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
ΠΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ display
, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ flexbox ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ ΠΏΡΡΠΌΡΡ
Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΈΠ±ΠΊΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ.
Π― ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ flexbox!
Π― Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Flexbox!
Π― Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ flexbox!
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄Π»Ρ .d-flex
ΠΈ . d-inline-flex
.
-
.d-flex
-
.d-inline-flex
-
.d-sm-flex
-
.d-sm-inline-flex
-
.d-md-flex
-
.d-md-inline-flex
-
.d-lg-flex
-
.d-lg-inline-flex
-
.d-xl-flex
-
.d-xl-inline-flex
ΠΠ°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π³ΠΈΠ±ΠΊΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ.Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΡΡΠΈΡΡ Π·Π΄Π΅ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ , ΡΡΡΠΎΠΊΡ
. ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ Ρ ΡΠΈΡΡΠ°ΡΠΈΡΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ²Π½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ).
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .flex-row,
, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅), ΠΈΠ»ΠΈ .flex-row-reverse
, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Ρ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ.
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ 1
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ 2
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ 3
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ 1
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ 2
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ 3
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 1
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 2
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 3
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 1
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 2
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 3
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .flex-column
, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅, ΠΈΠ»ΠΈ .flex-column-reverse
, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Ρ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ.
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ 1
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ 2
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ 3
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ 1
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ 2
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ 3
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 1
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 2
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 3
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 1
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 2
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex 3
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄Π»Ρ flex-direction
.
-
.flex-row
-
.flex-row-reverse
-
. ΠΠΈΠ±ΠΊΠ°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°
-
.flex-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°-ΡΠ΅Π²Π΅ΡΡ
-
.flex-sm-row
-
.flex-sm-row-reverse
-
.flex-sm-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°
-
.flex-sm-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°-ΡΠ΅Π²Π΅ΡΡ
-
.flex-md-row
-
.flex-md-row-reverse
-
.Flex-MD-ΡΡΠΎΠ»Π±Π΅Ρ
-
.flex-md-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°-ΡΠ΅Π²Π΅ΡΡ
-
.flex-lg-row
-
.flex-lg-row-ΠΎΠ±ΡΠ°ΡΠ½ΡΠΉ
-
.flex-LG-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°
-
.flex-lg-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°-ΡΠ΅Π²Π΅ΡΡ
-
.flex-xl-row
-
.flex-xl-row-reverse
-
.flex-xl-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°
-
.flex-xl-column-reverse
ΠΠ±ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ justify-content
Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°Ρ
flexbox, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ Π³Π»Π°Π²Π½ΠΎΠΉ ΠΎΡΠΈ (ΠΎΡΡ x Π΄Π»Ρ Π½Π°ΡΠ°Π»Π°, ΠΎΡΡ y, Π΅ΡΠ»ΠΈ flex-direction: column
).ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π½Π°ΡΠ°Π»ΠΎ
(Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ), ΠΊΠΎΠ½Π΅Ρ
, ΡΠ΅Π½ΡΡ
, ΠΌΠ΅ΠΆΠ΄Ρ
ΠΈΠ»ΠΈ ΠΎΠΊΠΎΠ»ΠΎ
.
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
...
...
...
...
ΠΠ°ΡΠΈΠ°Π½ΡΡ ΠΎΡΠ²Π΅ΡΠ° ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄Π»Ρ justify-content
.
-
.justify-content-start
-
.justify-content-end
-
.justify-content-center
-
.justify-content-ΠΌΠ΅ΠΆΠ΄Ρ
-
.justify-content-around
-
.justify-content-sm-start
-
.justify-content-sm-end
-
.justify-content-sm-center
-
.justify-content-sm-ΠΌΠ΅ΠΆΠ΄Ρ
-
.justify-content-sm-around
-
.justify-content-md-start
-
.justify-content-md-end
-
.justify-content-md-center
-
.justify-content-md-ΠΌΠ΅ΠΆΠ΄Ρ
-
.justify-content-md-ΠΎΠΊΠΎΠ»ΠΎ
-
.justify-content-lg-start
-
.justify-content-lg-end
-
.justify-content-lg-center
-
.justify-content-lg-ΠΌΠ΅ΠΆΠ΄Ρ
-
.justify-content-lg-around
-
.justify-content-xl-start
-
.justify-content-xl-end
-
.justify-content-xl-center
-
.justify-content-xl-ΠΌΠ΅ΠΆΠ΄Ρ
-
.justify-content-xl-around
ΠΡΡΠΎΠ²Π½ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ align-items
Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°Ρ
flexbox, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΠΏΠΎΠΏΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈ (ΠΎΡΡ Y Π΄Π»Ρ Π½Π°ΡΠ°Π»Π°, ΠΎΡΡ X, Π΅ΡΠ»ΠΈ flex-direction: column
). ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π½Π°ΡΠ°Π»ΠΎ
, ΠΊΠΎΠ½Π΅Ρ
, ΡΠ΅Π½ΡΡ
, Π±Π°Π·ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΈΠ»ΠΈ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΠ΅
(Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ).
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
...
...
...
...
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄Π»Ρ align-items
.
-
.align-items-start
-
.align-items-end
-
.align-items-center
-
.align-items-baseline
-
.align-items-stretch
-
.align-items-sm-start
-
.Π²ΡΡΠΎΠ²Π½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ-sm-ΠΊΠΎΠ½Π΅Ρ
-
.align-items-sm-center
-
.align-items-sm-baseline
-
.align-items-sm-stretch
-
.align-items-md-start
-
.align-items-md-end
-
.align-items-md-center
-
.align-items-md-baseline
-
.align-items-md-stretch
-
.align-items-lg-start
-
.Π²ΡΡΠΎΠ²Π½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ-LG-ΠΊΠΎΠ½Π΅Ρ
-
.align-items-lg-center
-
.align-items-lg-baseline
-
.align-items-lg-stretch
-
.align-items-xl-start
-
.align-items-xl-end
-
.align-items-xl-center
-
.align-items-xl-baseline
-
.align-items-xl-stretch
Π‘Π°ΠΌΠΎΠ²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ align-self
Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Flexbox, ΡΡΠΎΠ±Ρ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΠΎΠΏΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈ (ΠΎΡΡ Y Π΄Π»Ρ Π½Π°ΡΠ°Π»Π°, ΠΎΡΡ X, Π΅ΡΠ»ΠΈ flex-direction: ΡΡΠΎΠ»Π±Π΅Ρ
).ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ΅Ρ
ΠΆΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², ΡΡΠΎ ΠΈ Π΄Π»Ρ align-items
: Π½Π°ΡΠ°Π»ΠΎ
, ΠΊΠΎΠ½Π΅Ρ
, ΡΠ΅Π½ΡΡ
, Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΏΠ»Π°Π½
ΠΈΠ»ΠΈ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΠ΅
(Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ).
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄Π»Ρ align-self
.
-
.align-ΡΠ°ΠΌΠΎΠ·Π°ΠΏΡΡΠΊ
-
. ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅-ΡΠ°ΠΌΠΎΡΠ΅Π·
-
. ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅-ΡΠ°ΠΌΠΎΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
-
.align-self-baseline
-
. ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅-ΡΠ°ΠΌΠΎΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΠ΅
-
.align-self-sm-start
-
.align-self-sm-end
-
.align-self-sm-ΡΠ΅Π½ΡΡ
-
.align-self-sm-baseline
-
.align-self-sm-stretch
-
.Π²ΡΡΠΎΠ²Π½ΡΠΉΡΠ΅-ΡΠ°ΠΌΠΎ-md-start
-
.align-self-md-end
-
.align-self-md-center
-
.align-self-md-baseline
-
.align-self-md-stretch
-
.align-self-lg-start
-
.align-self-lg-ΠΊΠΎΠ½Π΅Ρ
-
.align-self-lg-center
-
.align-self-lg-baseline
-
.align-self-lg-stretch
-
.Π²ΡΡΠΎΠ²Π½ΡΠΉΡΠ΅-self-xl-start
-
.align-self-xl-end
-
.align-self-xl-center
-
.align-self-xl-baseline
-
.align-self-xl-stretch
ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΎΠ»Ρ
Flexbox ΠΌΠΎΠΆΠ΅Ρ Π΄Π΅Π»Π°ΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΠΌΠ΅ΡΠΈΠ²Π°Π΅ΡΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ. ΠΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π³ΠΈΠ±ΠΊΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΏΠΎΠ»Π΅ΠΉ: ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (Π±Π΅Π· Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ), ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π²ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΏΡΠ°Π²ΠΎ (.mr-auto
) ΠΈ ΡΠ΄Π²ΠΈΠ½ΡΠ² Π΄Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π»Π΅Π²ΠΎ ( .ml-auto
).
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, IE10 ΠΈ IE11 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΎΠ»Ρ Π΄Π»Ρ Π³ΠΈΠ±ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠΎΡΠΎΡΡΡ
ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ justify-content
. Π‘ΠΌ. ΠΡΠΎΡ ΠΎΡΠ²Π΅Ρ StackOverflow Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ²Π΅Π΄Π΅Π½ΠΈΠΉ.
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
Π‘ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π²Π΅ΡΡ
ΠΈΠ»ΠΈ Π²Π½ΠΈΠ· ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠΌΠ΅ΡΠ°Π² align-items
, flex-direction: column
ΠΈ margin-top: auto
ΠΈΠ»ΠΈ margin-bottom: auto
.
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Flex
ΠΠ±Π΅ΡΡΠΊΠ°
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠΏΠΎΡΠΎΠ± ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠ° Π³ΠΈΠ±ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ.ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π²Π°ΡΠΈΠ°Π½Ρ Π±Π΅Π· ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠΈ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅) Ρ .flex-nowrap
, ΠΎΠ±Π΅ΡΡΡΠ²Π°Π½ΠΈΠ΅ Ρ .flex-wrap
ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΡΡΠ²Π°Π½ΠΈΠ΅ Ρ .flex-wrap-reverse
.
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄Π»Ρ flex-wrap
.
-
.flex-nowrap
-
. ΠΠΈΠ±ΠΊΠ°Ρ ΠΏΠ»Π΅Π½ΠΊΠ°
-
.flex-wrap-ΡΠ΅Π²Π΅ΡΡ
-
.flex-sm-nowrap
-
.flex-sm-ΠΏΠ»Π΅Π½ΠΊΠ°
-
.flex-sm-wrap-reverse
-
.flex-md-nowrap
-
.flex-md-ΠΏΠ»Π΅Π½ΠΊΠ°
-
.flex-md-wrap-ΠΎΠ±ΡΠ°ΡΠ½ΡΠΉ
-
.flex-lg-nowrap
-
.flex-lg-wrap
-
.flex-lg-wrap-ΠΎΠ±ΡΠ°ΡΠ½ΡΠΉ
-
.flex-xl-nowrap
-
.flex-xl-wrap
-
.flex-xl-wrap-reverse
ΠΠ°ΠΊΠ°Π·Π°ΡΡ
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
Π³ΠΈΠ±ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² visual Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΡΠΈΠ»ΠΈΡ ΠΏΠΎΡΡΠ΄ΠΊΠ° ΠΈ
. ΠΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠ΅ΡΠ²ΡΠΌ ΠΈΠ»ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ±ΡΠΎΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΡΡΠ΄ΠΊΠ° DOM. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π»ΡΠ±ΠΎΠ΅ ΡΠ΅Π»ΠΎΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 5
), Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS Π΄Π»Ρ Π»ΡΠ±ΡΡ
Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΡ
Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.
ΠΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ
ΠΡΠΎΡΠΎΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π’ΡΠ΅ΡΠΈΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠ΅ΡΠ²ΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΠΎΡΠΎΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π’ΡΠ΅ΡΠΈΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄Π»Ρ Π·Π°ΠΊΠ°Π·Π°
.
-
. ΠΠ°ΠΊΠ°Π·-0
-
. ΠΠ°ΠΊΠ°Π·-1
-
. ΠΠ°ΠΊΠ°Π·-2
-
. ΠΠ°ΠΊΠ°Π·-3
-
.Π·Π°ΠΊΠ°Π·-4
-
. ΠΠ°ΠΊΠ°Π·-5
-
. ΠΠ°ΠΊΠ°Π·-6
-
. ΠΠ°ΠΊΠ°Π·-7
-
. ΠΠ°ΠΊΠ°Π·-8
-
. ΠΠ°ΠΊΠ°Π·-9
-
. ΠΠ°ΠΊΠ°Π·-10
-
. ΠΠ°ΠΊΠ°Π·-11
-
. ΠΠ°ΠΊΠ°Π·-12
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-0
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-1
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-2
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-3
-
.Π·Π°ΠΊΠ°Π·-ΡΠΌ-4
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-5
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-6
-
. ΠΠ°ΠΊΠ°Π·-sm-7
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-8
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-9
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-10
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-11
-
. ΠΠ°ΠΊΠ°Π·-ΡΠΌ-12
-
.order-md-0
-
.order-md-1
-
.order-md-2
-
.Π·Π°ΠΊΠ°Π·-ΠΌΠ΄-3
-
.order-md-4
-
.order-md-5
-
.order-md-6
-
.order-md-7
-
.order-md-8
-
.order-md-9
-
.order-md-10
-
.order-md-11
-
.order-md-12
-
.order-lg-0
-
.order-lg-1
-
.Π·Π°ΠΊΠ°Π·-LG-2
-
.order-lg-3
-
.order-lg-4
-
.order-lg-5
-
.order-lg-6
-
.order-lg-7
-
.order-lg-8
-
.order-lg-9
-
.order-lg-10
-
.order-lg-11
-
.order-lg-12
-
.order-xl-0
-
.Π·Π°ΠΊΠ°Π·-XL-1
-
.order-XL-2
-
.order-xl-3
-
.order-XL-4
-
.order-XL-5
-
.order-XL-6
-
.order-xl-7
-
.order-xl-8
-
.order-XL-9
-
.order-XL-10
-
.order-XL-11
-
.order-xl-12
ΠΡΡΠΎΠ²Π½ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ align-content
Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°Ρ
flexbox Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π³ΠΈΠ±ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΌΠ΅ΡΡΠ΅ Π½Π° ΠΏΠΎΠΏΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈ.ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π½Π°ΡΠ°Π»ΠΎ
(ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ°ΡΠ·Π΅Ρ), ΠΊΠΎΠ½Π΅Ρ
, ΡΠ΅Π½ΡΡ
, ΠΌΠ΅ΠΆΠ΄Ρ
, Π²ΠΎΠΊΡΡΠ³
ΠΈΠ»ΠΈ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΠ΅
. Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΡΠΈΠ»ΠΈΡΡ, ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ flex-wrap: wrap
ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ»ΠΈ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π³ΠΈΠ±ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅! ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π³ΠΈΠ±ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
...
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄Π»Ρ align-content
.
-
.align-content-start
-
.align-content-end
-
.align-ΠΊΠΎΠ½ΡΠ΅Π½Ρ-ΡΠ΅Π½ΡΡ
-
.align-content-around
-
.align-content-stretch
-
.align-content-sm-start
-
.align-content-sm-end
-
.align-content-sm-center
-
.align-content-sm-around
-
.Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ-sm-stretch
-
.align-content-md-start
-
.align-content-md-end
-
.align-content-md-center
-
.align-content-md-around
-
.align-content-md-stretch
-
.align-content-lg-start
-
.align-content-lg-end
-
.align-content-lg-center
-
.align-content-lg-about
-
.Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ-lg-stretch
-
.align-content-xl-start
-
.align-content-xl-end
-
.align-content-xl-center
-
.align-content-xl-around
-
.align-content-xl-stretch
ΠΠ°ΠΊ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ div ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π² Bootstrap 4 (2021)
- ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ
- read
Π ΠΌΠ°ΠΊΠ΅ΡΠ°Ρ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ ΡΠ΅Π½ΡΡΠΈΡΡΡΡ ΡΡΠΎΠ»Π±Π΅Ρ Π² ΡΡΡΠΎΠΊΠ΅ ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.ΠΠΎ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Bootstrap? ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°.
ΠΠ°ΡΠΈΠ°Π½Ρ 1 — Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
ΠΠ»Π°ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ. ΠΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ»Π±Π΅Ρ ΠΈΠΌΠ΅Π» ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ, Π½ΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π» Π΅Π³ΠΎ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π² ΡΡΡΠΎΠΊΠ΅.
Π‘ΠΌΠΎΡΡΠΈ! Π― ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ
Π‘ΠΌΠΎΡΡΠΈΡΠ΅! Π― ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ |
ΠΠ°ΡΠΈΠ°Π½Ρ 2 — Margin Auto
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° Π΄Π»Ρ ΡΡΠ΅Π΄Π½ΠΈΡ
ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ
ΡΠΎΡΠ΅ΠΊ ΠΈ ΡΠΈΡΠΈΠ½Π° Π΄ΠΎ 8 ΡΡΠΎΠ»Π±ΡΠΎΠ².ΠΠ°ΡΠ΅ΠΌ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠΉ ΠΊΠ»Π°ΡΡ .mx-auto
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° .row
.
Π― ΡΠΎΠΆΠ΅!
Π― ΡΠΎΠΆΠ΅! |
ΠΠ°ΡΠΈΠ°Π½Ρ 3 — Π£ΡΠΈΠ»ΠΈΡΠ° ΡΠΈΡΠΈΠ½Ρ Bootstrap
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠΉ ΠΊΠ»Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ Bootstrap.w-50, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ Π²ΡΠ΅ΠΌΡ Π΄Π΅Π»Π°ΡΡ div ΡΠΈΡΠΈΠ½ΠΎΠΉ 50%. ΠΠ°ΡΠ΅ΠΌ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠΉ ΠΊΠ»Π°ΡΡ .mx-auto
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° .row
.
Π― Π’ΡΠΎΠ΅!
Me Three! |
ΠΠ°ΡΠΈΠ°Π½Ρ 4 — ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ»Π°ΡΡΡ Flexbox
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² Flexbox.ΠΠΎΡ ΡΠΏΠ°ΡΠ³Π°Π»ΠΊΠ° ΠΏΠΎ flexbox, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠ°Ρ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
ΡΠ»Π΅ΠΌΠ΅Π½Ρ 1 ΡΠ»Π΅ΠΌΠ΅Π½Ρ 2 item 3 |
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠ°ΠΊ ΠΈ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.ΠΡΠ±ΠΎΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ, ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ ΠΌΠ½Π΅Π½ΠΈΡ, Π»Π΅Π³ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ. ΠΠΈΡΠ½ΠΎ ΠΌΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ Π²Π°ΡΠΈΠ°Π½Ρ 1, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΠ»Π±Π΅Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ , Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ Π²ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Π΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Codepen
Bootstrap 4 ΠΏΠΎ ΡΠ΅Π½ΡΡΡ (Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅)
ΠΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°
Π§ΡΠΎΠ±Ρ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π²Π΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠ° MDBootstrap, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠΎΠ»ΡΠΊΠΎ
ΡΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ
ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠΎΠΌΠΎΡΡ Π² ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ°, Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ Π½Π°ΡΠΈΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ ΠΏΠΎ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅.
Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅
ΠΠ°ΡΡΠ° Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ ΡΠ°ΠΉΠ»ΠΎΠ² SCSS Π² MDBootstrap:
ΠΠ΅Π³Π΅Π½Π΄Π°:
'->' ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ 'ΡΡΠ΅Π±ΡΠ΅ΡΡΡ'
ΠΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΡΡΠ΅Π±ΡΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ· ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° 'core'
'none' ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ 'ΡΡΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ, ΠΊΡΠΎΠΌΠ΅ ΡΠ°ΠΉΠ»ΠΎΠ² ΡΠ΄ΡΠ°'
Π€Π°ΠΉΠ», Π·Π°Π²Π΅ΡΠ½ΡΡΡΠΉ Π² ``, ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΡΠΎΡ ΡΠ°ΠΉΠ» Π΄Π΅Π»Π°Π΅Ρ Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²Π΅Π΅, Π½ΠΎ ΡΡΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ.
ΠΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ PRO ΡΡΠ΅Π±ΡΡΡ 'pro / _variables.scss 'ΡΠ°ΠΉΠ»
scss /
|
| - ΡΠ΄ΡΠΎ ββ/
| |
| | - Π±ΡΡΡΡΡΠ°ΠΏ /
| | | - _functions.scss
| | | - _variables.scss
| |
| | - _colors.scss
| | - _global.scss
| | - _helpers.scss
| | - _masks.scss
| | - _mixins.scss
| | - _typography.scss
| | - _variables.scss
| | - _waves.scss
|
| - Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ /
| | - _animations-basic.scss -> Π½Π΅Ρ
| | - _animations-extended.scss -> _animations-basic.scss
| | - _buttons.scss -> Π½Π΅Ρ
| | - _cards.scss -> Π½Π΅Ρ
| | - _dropdowns.scss -> Π½Π΅Ρ
| | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
| | - _navbars.scss -> Π½Π΅Ρ
| | - _pagination.scss -> Π½Π΅Ρ
| | - _badges.scss -> Π½Π΅Ρ
| | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
| | - _carousels.scss ->
| | - _forms.scss -> Π½Π΅Ρ
| | - _msc.scss -> Π½Π΅Ρ
| | - _footers.scss Π½Π΅Ρ (PRO :)
| | - _list-group.scss -> Π½Π΅Ρ
| | - _tables.scss -> Π½Π΅Ρ (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
| | - _depreciated.scss
|
| - pro /
| |
| | - ΡΠ±ΠΎΡΡΠΈΠΊ /
| | | - _default.scss -> Π½Π΅Ρ
| | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
| | | - _default-date.scss -> _default.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _forms.scss
| |
| | - ΡΠ°Π·Π΄Π΅Π»Ρ /
| | | - _templates.scss -> _sidenav.scss
| | | - _social.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _cards.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _forms.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss, pro / _buttons.scss,
| | | - _team.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
| | | - _testimonials.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _carousels.scss, pro / _carousels.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss, pro / _buttons.scss
| | | - _magazine.scss -> _badges.scss
| | | - _pricing.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss, pro / _buttons.scss
| | | - _contacts.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _forms.scss, pro / _forms.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss, pro / _buttons.scss
| |
| | - _variables.scss
| | - _buttons.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
| | - _social-buttons.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss, pro / _buttons.scss
| | - _tabs.scss -> _cards.scss
| | - _cards.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _cards.scss
| | - _dropdowns.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _dropdowns.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss
| | - _navbars.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _navbars.scss (PRO :)
| | - _scrollspy.scss -> Π½Π΅Ρ
| | - _lightbox.scss -> Π½Π΅Ρ
| | - _chips.scss -> Π½Π΅Ρ
| | - _msc.scss -> Π½Π΅Ρ
| | - _forms.scss -> Π½Π΅Ρ
| | - _radio.scss -> Π½Π΅Ρ
| | - _checkbox.scss -> Π½Π΅Ρ
| | - _material-select.scss -> Π½Π΅Ρ
| | - _switch.scss -> Π½Π΅Ρ
| | - _file-input.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _forms.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss
| | - _range.scss -> Π½Π΅Ρ
| | - _input-group.scss -> free / _input-group.scss ΠΈ ΡΠΎ ΠΆΠ΅, ΡΡΠΎ ΠΈ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½Π°Ρ Π³ΡΡΠΏΠΏΠ° Π²Π²ΠΎΠ΄Π°, _checkbox.scss, _radio.scss
| | - _autocomplete.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _forms.scss
| | - _accordion.scss -> pro / _animations.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _cards.scss
| | - _parallax.scss -> Π½Π΅Ρ
| | - _sidenav.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _forms.scss, pro / _animations.scss, ΡΠ°Π·Π΄Π΅Π»Ρ / _templates.scss
| | - _ecommerce.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _cards.scss, pro / _cards.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
| | - _carousels.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _carousels.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _cards.scss, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss
| | - _steppers.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss
| | - _blog.scss -> Π½Π΅Ρ
| | - _toasts.scss -> Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ / _buttons.scss
| | - _animations.scss -> Π½Π΅Ρ
| | - _charts.scss -> Π½Π΅Ρ
| | - _progress.scss -> Π½Π΅Ρ
| | - _scrollbar.scss -> Π½Π΅Ρ
| | - _skins.scss -> Π½Π΅Ρ
| | - _ΡΡΡΠ°ΡΠ΅Π»ΠΎ.scss
|
`- _custom-skin.scss
`- _custom-styles.scss
`- _custom-variables.scss
`- mdb.scss
ΠΠ°ΡΡΠ° Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ JavaScript Π² MDBootstrap:
ΠΠ΅Π³Π΅Π½Π΄Π°:
'->' ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ 'ΡΡΠ΅Π±ΡΠ΅ΡΡΡ'
ΠΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΡΡΠ΅Π±ΡΡΡ jQuery ΠΈ bootstrap.js
js /
βββ dist /
β βββ buttons.js
β βββ cards.js
β βββ character-counter.js
β βββ Chips.js
β βββ collapsible.js -> vendor / velocity.js
β βββ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ.js -> Popper.js, jquery.easing.js
β βββ file-input.js
β βββ forms-free.js
β βββ material-select.js -> dropdown.js
β βββ mdb-autocomplete.js
β βββ preloading.js
β βββ range-input.js -> vendor / velocity.js
β βββ scrolling-navbar.js
β βββ sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
β βββ smooth-scroll.js
βββ _intro-mdb-pro.js
βββ modules.js
βββ src /
β βββ buttons.js
β βββ ΠΊΠ°ΡΡΡ.js
β βββ character-counter.js
β βββ Chips.js
β βββ collapsible.js -> vendor / velocity.js
β βββ dropdown.js -> Popper.js, jquery.easing.js
β βββ file-input.js
β βββ forms-free.js
β βββ material-select.js -> dropdown.js
β βββ mdb-autocomplete.js
β βββ preloading.js
β βββ range-input.js -> vendor / velocity.js
β βββ scrolling-navbar.js
β βββ sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
β βββ smooth-scroll.js
βββ ΠΏΡΠΎΠ΄Π°Π²Π΅Ρ /
βββ Π°Π΄Π΄ΠΎΠ½Ρ /
β βββ datatables.js
β βββ datatables.min.js
βββ chart.js
βββ extended-modals.js
βββ hammer.js
βββ jarallax.js
βββ jarallax-video.js -> vendor / jarallax.js
βββ jquery.easing.js
βββ jquery.easypiechart.js
βββ jquery.hammer.js -> vendor / hammer.js
βββ jquery.sticky.js
βββ lightbox.js
βββ picker-date.js -> vendor / picker.js
βββ picker.js
βββ picker-time.js -> vendor / picker.js
βββ scrollbar.js
βββ scrolling-navbar.js
βββ toastr.js
βββ velocity.js
βββ waves.js
βββ wow.js
Bootstrap 4 Π¦Π΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
Π Π΅ΡΠ΅Π½ΠΈΠ΅:
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ 2019 — Bootstrap 4.3.1
ΠΠ»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
CSS Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ . Π’ΠΎ, ΡΡΠΎ ΡΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ Π² Bootstrap, Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ.Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ (ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ) ΡΠΎΡΠΌΡ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ , ΠΏΠΎΠ»Π½ΡΡ Π²ΡΡΠΎΡΡ . Bootstrap 4 ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ»Π°ΡΡ h-100
Π΄Π»Ρ Π²ΡΡΠΎΡΡ 100% …
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ:
<ΡΠΎΡΠΌΠ°>
https: // codeply.com / go / raCutAGHre
Π²ΡΡΠΎΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠΎΠΌ (Π°ΠΌΠΈ) ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ 100%
(ΠΈΠ»ΠΈ Π»ΡΠ±Π°Ρ Π΄ΡΡΠ³Π°Ρ ΠΆΠ΅Π»Π°Π΅ΠΌΠ°Ρ Π²ΡΡΠΎΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°)
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π²ΡΡΠΎΡΡ : 100%
( ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ ) Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡΠΎΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° . Π ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
vh Π±Π»ΠΎΠΊΠΈ Π²ΡΡΠΎΡΠ°: 100vh;
ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΌΠ΅ΡΡΠΎ %
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΡΡ Π²ΡΡΠΎΡΡ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ html, body {height: 100%} ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ min-vh-100
Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π²ΠΌΠ΅ΡΡΠΎ h-100
.
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ:
-
ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π½ΡΡ
ΠΏΠΎ ΡΠ΅Π½ΡΡΡΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠΎΠ»Π±ΡΠ° -
mx-auto
Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ Π³ΠΈΠ±ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² -
offset- *
ΠΈΠ»ΠΈmx-auto
ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΡ ΠΊΠΎΠ»ΠΎΠ½Π½ (.col-
) -
justify-content-center
β ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ (col- *
) Π²Π½ΡΡΡΠΈ ΡΡΡΠΎΠΊΠΈ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π² Bootstrap 4
Bootstrap 4, ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π²ΠΈΠ΄
Bootstrap 4, ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½Π°Ρ Π³ΡΡΠΏΠΏΠ° Π²Π²ΠΎΠ΄Π°
Bootstrap 4, Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ + Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ
ΠΡΠ° ΡΠ°Π±ΠΎΡΠ° Π΄Π»Ρ ΠΌΠ΅Π½Ρ:
<ΡΠ°Π·Π΄Π΅Π»>
<Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ>
ΠΏΡΠ½ΠΊΡ 1
ΠΏΡΠ½ΠΊΡ 2
flexbox ΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΡΡ.ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π·Π΄Π΅ΡΡ
1
2
css — Bootstrap 4 Center Vertical e Horizontal Alignment
Aggiornamento 2019 — Bootstrap 4.3.1
C’Γ¨ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
CSS . ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ Π΅Π³ΠΎ Π² ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» Bootstrap. Assicurati Che i Contenitori del modulo siano Altezza Complete .Bootstrap 4 ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ h-100
Π΄Π»Ρ 100% altezza …
Centro verticale:
<ΡΠΎΡΠΌΠ°>
https: // www.codeply.com/go/raCutAGHre
ΠΠ»ΡΡΠ΅ΡΡΠ°-Π΄Π΅Π»Ρ-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π° ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ 100% (Π±Π΅Π· ΡΠ΅Π½Π·ΡΡΡ)
Π²ΡΡΠΎΡΠ°: 100 ΡΡΠ°. % ( ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ ) su qualsiasi elemento, l’elemento ΠΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ l’altezza del suo contenitore . Nei browser moderni vh unitΓ Π²ΡΡΠΎΡΠ°: 100vh;
ΠΏΠΎΡΠ»Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΠΏΠΎΡΡΡ %
Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ.
Pertanto, puoi impstare html, body {height: 100%} o utilizzare la nuova classe min-vh-100
sul contenitore anzichΓ© h-100
.
Centro orizzontale:
-
text-center
ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΡΠ΅Π½ΡΡΡΠ΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΠ»ΠΎΠ½Π½Ρ -
mx-auto
Π² ΡΠ΅Π½ΡΡΠ΅ Π²ΡΠ΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² - ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
-
justify-content-center
a colne centrali (col- *
) all’internorow
ΠΈΠ»ΠΈ mx-auto
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΡ
ΠΊΠΎΠ»ΠΎΠ½Π½ (.col-
)
Π¦Π΅Π½ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π² Bootstrap 4
Bootstrap 4 ΡΠΎΡΠΌΠΈΡΡΠ΅Ρ schermo intero centrato
Gruppo di input centrale Bootstrap 4
Bootstrap 4 orizzontale + centro verticale a schermo intero
ΠΠ°ΠΊ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΠ»Π±Π΅Ρ Π² Bootstrap
Π’Π΅ΠΌΠ°: Bootstrap / SassPrev | Π‘Π»Π΅Π΄.
ΠΡΠ²Π΅Ρ: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
mx-auto
Class
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π²Π΅ΡΡΠΈΡ Bootstrap 4 , Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΠ»Π±Π΅Ρ ΡΠ΅ΡΠΊΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ² ΠΊΠ»Π°ΡΡ .mx-auto
Π½Π° Π½Π΅ΠΌ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ:
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊΠ»Π°ΡΡ .justify-content-center
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ .row
, ΡΡΠΎΠ±Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΠ»Π±Π΅Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠΎ Π² Bootstrap 3 Π²ΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Π°ΡΠ΅.ΠΡΠ»ΠΈ Π½ΠΎΠΌΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ ΡΠ΅ΡΠ½ΡΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 2, 4, 6, 8, 10, 12), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡ .col- {xs | sm | md | lg} -offset- *
Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠ° Π² ΡΠ΅Π½ΡΡ, Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π½ΠΎΠΌΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ Π½Π΅ΡΠ΅ΡΠ½ΡΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 1, 3, 5, 7, 9, 11), Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS.ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ:
/ * ΠΊΠΎΠ΄ CSS * /
.col-centered {
float: Π½Π΅Ρ;
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
}
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ ΠΈ ΠΎΡΠ²Π΅ΡΡ
ΠΠΎΡ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΠΎ Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ² ΠΏΠΎ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ΅:
.