Twitter Bootstrap

Bootstrap - веб-сайтлар һәм сайтларның үсешен башлап җибәрү өчен эшләнгән Твиттердан кораллар җыелмасы.
Бу типография, формалар, төймәләр, таблицалар, челтәрләр, навигация һ.б. өчен төп CSS һәм HTMLны үз эченә ала.

Нерд уяулыгы: Bootstrap Less белән төзелгән һәм заманча браузерларны гына истә тотып капкадан чыгару өчен эшләнгән.

CSS кайнар линк

Иң тиз һәм җиңел башлау өчен, бу фрагментны веб-битегезгә күчерегез.

Аны азрак кулланыгыз

Азрак куллану фанаты? Проблема юк, репоны клонлагыз һәм бу юлларны өстәгез:

GitHub

Github'тагы рәсми Bootstrap репо белән йөкләү, тарату, тарту, файл чыгару һәм башкалар.

GitHub'та Bootstrap »

Килешү челтәре

Bootstrap кысаларында бирелгән килешү челтәре 940px киңлектәге 16 баганалы челтәр. Бу популяр 960 челтәр системасының тәме, ләкин сул һәм уң якларда өстәмә маржа / паддерсыз.

Челтәр билгесе

Монда күрсәтелгәнчә, төп макет ике "багана" белән ясалырга мөмкин, аларның һәрберсе безнең челтәр системасы өлеше итеп билгеләгән 16 нигез баганасын үз эченә ала. Күбрәк вариацияләр өчен түбәндәге мисалларны карагыз.

<div class = "row"> класс = "рәт" >
  <div class = "span6 баганалар" > 
    ...
  </div>
  <div class = "span10 багана" > 
    ...
  </div>
</div>

Колонналарны офсетлау

8 офсет 4

4 офсет 4

5 офсет 3

10 офсет 6

Тикшерелгән макет

Төп 940px киң, үзәк контейнер макеты теләсә нинди сайт яки бит өчен.

<body>
  <div class = "контейнер" > 
    ...
  </div>
</body>

Сыеклык урнашуы

Мин һәм максималь киңлекләр һәм сул як ягы белән сыгылмалы сыеклык яки сыек бит структурасы. Кушымталар өчен бик яхшы.

<body>
  <div class = "контейнер-сыеклык" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "эчтәлек" > 
      ...
    </div>
  </div>
</body>

Башлыклар һәм күчермә

Веб-битләрегезне структуралаштыру өчен стандарт типографик иерархия.

h1. 1 нче баш

h2. 2 нче баш

h3. 3 нче баш

h4. 4 нче баш

h5. 5 нче баш

h6. 6 нчы баш

Мисал абзац

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус. Nullam id dolor id nibh ultricies транспорт чарасы.

Мисал рубрикасының суб-рубрикасы бар ...

Сез шулай ук <strong>һәм өстәмә исемнәр өсти аласыз<em>

Төрле. элементлары

Басым, адреслар, кыскартулар куллану

<strong> <em> <address> <abbr>

Кайчан кулланырга

Сүз яки фраза һәм аның тирәсендәге күчермә арасында визуаль аерма өстәү өчен басым тэглары ( <strong>һәм ) кулланылырга тиеш. Гади иске игътибар өчен, әкрен игътибар һәм исемнәр өчен <em>кулланыгыз .<strong><em>

Абзацка басым ясау

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentation massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Адреслар

Элемент кулланыла - addressсез аны чамаладыгыз! - адреслар. Менә ул ничек:

Твиттер , Inc.
_
_

Искәрмә: эчтәлекнең дөрес структурасы өчен сызыктагы addressтәнәфес ( <br />) белән тәмамланырга тиеш, чөнки ул реаль тормышта укылган стильләрсез.

Кыскартулар

Кыскартулар һәм кыскартулар өчен abbrтегны кулланыгыз ( HTML5'таacronym искергән ). Теног эчендә стенограмма формасын куегыз һәм тулы исем өчен исем куегыз.

Блоккотлар

<blockquote> <p> <cite>

blockquoteAroundзегезнең paragraphәйберләрегезне урыгыз cite. Чыганакны китергәндә, citeэлементны кулланыгыз. CSS автоматик рәвештә em dash белән исем кертәчәк (& mdash;).

Лорем ипсум долор утыра амет, консексетур адиписизация элитасы, лаборатория һәм долор магна аликасы ...
Доктор uliлий Хибберт

Исемлекләр

Тәртипсез`<ul>`

Джереми Биксби
Роберт Дезюр
Джош Вашингтон
Антон Капреси
Минем команда иптәшләрем
- Джордж Кастанза
- Джерри Сейнфельд
- Космо Крамер
- Элейн Беннис
- Ньюман
Джон Джейкоб
Пол Пирс
Кевин Гарнетт

Стильсез`<ul.unstyled>`

Джереми Биксби
Роберт Дезюр
Джош Вашингтон
Антон Капреси
Минем команда иптәшләрем
- Джордж Кастанза
- Джерри Сейнфельд
- Космо Крамер
- Элейн Беннис
- Ньюман
Джон Джейкоб
Пол Пирс
Кевин Гарнетт

Заказлы`<ol>`

Джереми Биксби
Роберт Дезюр
Джош Вашингтон
Антон Капреси
Минем команда иптәшләрем
1. Джордж Кастанза
2. Джерри Сейнфельд
3. Космо Крамер
4. Элейн Беннис
5. Ньюман
Джон Джейкоб
Пол Пирс
Кевин Гарнетт

Тасвирлау`dl`

Тасвирлау исемлекләре: Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.
Эвизмод: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida eget metus.
Малесуада портасы: Etiam porta sem maleuada magna mollis euismod.

Таблицалар төзү

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Таблицалар бик яхшы - күп нәрсә өчен. Зур таблицалар, файдалы, масштаблы һәм укылырлык булырга (код дәрәҗәсендә) бераз билгеләргә ярату кирәк. Менә берничә киңәш.

Columnәрвакыт багана башларын иерархия theadбелән theadкаплагыз .trth

Колонка башларына охшаган, сезнең өстәлнең бөтен эчтәлеге tbodyсезнең иерархиягез белән уралган булырга тиеш tbody>> .trtd

Мисал: Килешү өстәл стиле

Барлык таблицалар да укуны тәэмин итү һәм структураны саклау өчен төп чикләр белән автоматик рәвештә ясалачак. Өстәмә класслар яки атрибутлар өстәргә кирәкми.

#	Исем	Фамилия	Тел
1	Кайберләре	Бер	Инглиз
2	Джо	Алты пакет	Инглиз
3	Стю	Теш	Код

<өстәл сыйныфы = "уртак таблица" > 
  ...
</table>

Мисал: Зебра-сызыклы

Зебра-стрипинг өстәп, өстәлләрегез белән бераз хыялланыгыз - .zebra-stripedклассны өстәгез.

#	Исем	Фамилия	Тел
1	Кайберләре	Бер	Инглиз
2	Джо	Алты пакет	Инглиз
3	Стю	Теш	Код

<өстәл классы = "уртак өстәл зебра-сызыклы" > 
...
</table>

Мисал: Зебра сызыклы w / TableSorter.js

Алдагы мисалны алсак, jQuery һәм Tablesorter плагины аша сортлау функциясен тәэмин итеп, таблицаларыбызның файдалылыгын яхшыртабыз. Сортны үзгәртү өчен теләсә нинди багана башына басыгыз.

#	Исем	Фамилия	Тел
1	Сезнең	Бер	Инглиз
2	Джо	Алты пакет	Инглиз
3	Стю	Теш	Код

<script type = "text / javascript" src = "js / jquery / jquery.tablesorter.min.js" > </script>  
<скрипт тибы = "текст / javascript" > 
  $ ( документ ). әзер ( функция () { 
    $ ( "таблица # sortTableExample" ). таблицалар ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<өстәл классы = "уртак өстәл зебра-сызыклы" > 
  ...
</table>

Тикшерелгән өстәмә

Нәрсә бу

Безнең өске такталар - вебсайтның логотибы яки исеме, төп навигация һәм эзләү формасы булган тотрыклы бар.

Custзенчәлекле

Эчтәге барлык элементлар, һәм шулай ук бөтен өстәмә факультатив. Сез логотип / исем, nav, эзләү, һәм икенчел диңгезне яисә аның теләсә нинди комбинациясен кертә аласыз.

Тамчы

Төп навигациянең бер өлеше буларак, без сезнең диңгезгә тамчылар өстәү мөмкинлеген керттек. Аның ничек эшләнгәнен күрү өчен өстә икенчел диңгезне карагыз (уңга тигезләнгән).

Таблицалар һәм дарулар

А белән гади икенчел навигация булдырыгыз ul. Тиешле класс өстәп таблицалар яки таблеткалар арасында алыштырыгыз.

Эчтәлекнең бүлекчәләре өчен бик яхшы, безнең хисап көйләү битләре һәм эчтәлек битләре арасында күчү өчен кулланучылар сроклары. Таблицада яки таблетка стилендә бар.

<ul class = "tabs" > 
  <li class = "актив" > <a href = ""> Өй </a> </li>  
  <li> <a href = ""> Профиль </a> </li> 
  <li> <a href = ""> Хәбәрләр </a> </li> 
  <li> <a href = ""> көйләүләр </a> </li> 
  <li> <a href = ""> Контакт </a> </li> 
</ul>

<ul class = "таблеткалар" > 
  <li class = "актив" > <a href = ""> Өй </a> </li>  
  <li> <a href = ""> Профиль </a> </li> 
  <li> <a href = ""> Хәбәрләр </a> </li> 
  <li> <a href = ""> көйләүләр </a> </li> 
  <li> <a href = ""> Контакт </a> </li> 
</ul>

Пагинация

Ультра гади һәм минималь стильдә ясалган пагинация Rdio тарафыннан рухландырылган. Зур блокны сагыну авыр, җиңел масштаблы, зур басу өлкәләрен тәэмин итә.

<div class = "pagination" > 
  <ul>
    <li class = "алдан инвалид" > <a href = ""> & larr; Алдагы </a> </li>  
    <li class = "актив" > <a href = ""> 1 </a> </li>  
    <li> <a href = ""> 2 </a> </li> 
    <li> <a href = ""> 3 </a> </li> 
    <li> <a href = ""> 4 </a> </li> 
    <li> <a href = ""> 5 </a> </li> 
    <li class = "next" > <a href = ""> Киләсе & rarr; </a> </li>  
  </ul>
</div>

Төп хәбәрләр

Уңышсызлыкны, мөмкин булган уңышсызлыкны яки эшнең уңышын күрсәтү өчен бер юллы хәбәрләр. Бигрәк тә формалар өчен файдалы.

Әй! Бу һәм теге үзгәртегез һәм кабатлап карагыз.

Изге гакамол! Иң яхшы тикшерү, сез бик яхшы күренмисез.

Афәрин! Сез бу уяу хәбәрне уңышлы укыйсыз.

Идарә итә! Бу сезнең игътибарыгызга мохтаҗ, ләкин бу әле зур өстенлек түгел.

Хәбәрләрне блоклау

Бераз аңлатуны таләп иткән хәбәрләр өчен бездә абзац стиле турында хәбәрләр бар. Бу озынрак хаталар җибәрү, кулланучыны көтелгән эш турында кисәтү, яисә биткә күбрәк басым ясау өчен бик яхшы.

Әй! Сез хата алдыгыз!Бу һәм теге үзгәртегез һәм кабатлап карагыз. Дуис моллис, коммерция булмаган луктус, портитор лигула, lacinia odio sem nec elit. Cras mattis consectetur purus amet fermentum утыра.

Бу чара күрегез Яки моны эшлә

Изге гакамол! Бу кисәтү!Иң яхшы тикшерү, сез бик яхшы күренмисез. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur һ.б.

Бу чара күрегез Яки моны эшлә

Афәрин!Сез бу уяу хәбәрне уңышлы укыйсыз. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус. Maecenas faucibus mollis interdum.

Бу чара күрегез Яки моны эшлә

Идарә итә!Бу сезнең игътибарыгызга мохтаҗ, ләкин бу әле зур өстенлек түгел.

Бу чара күрегез Яки моны эшлә

Модальләр

Модальләр - диалоглар яки яктырткычлар - фон контекстын саклау мөһим булган контекстуаль чаралар өчен бик яхшы.

Корал киңәшләре

Twipsies буталчык кулланучыга булышу һәм аларны дөрес юнәлештә күрсәтү өчен бик файдалы.

Лорем ипсум доллары утыра амет илло хата ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus resultunturur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam архитектура эксплуатациясе кваси фугит, тотам долоремке унде сунт сед дикта ква аккусантиум фугит волупт вему волуптас вему волутам

аста!

дөрес!

сулда!

өстә!

Поповерлар

Биткә субтекстуаль мәгълүмат бирү өчен поповерларны кулланыгыз.

Bootstrap Preboot белән төзелгән , ачык чыганаклы миксиннар һәм үзгәрешләр пакеты, тизрәк һәм җиңелрәк веб үсеше өчен CSS эшкәртүчесе Less белән берлектә кулланылачак.

Bootstrap'та Preboot'ны ничек кулланганыбызны һәм киләсе проектта азрак эшләсәгез, сез аны ничек куллана алуыгызны тикшерегез.

Аны ничек кулланырга

Bootstrap-ның аз үзгәрүчәннәрен, миксиннарын һәм CSS-та оя коруны браузерыгыздагы javascript аша тулысынча куллану өчен бу параметрны кулланыгыз.

<link rel = "стиль таблицасы / азрак" тип = "текст / css" href = "азрак / bootstrap.less" медиа = "барысы" />     
<script type = "text / javascript" src = "js / less-1.0.41.min.js" > </script>

.Js чишелешен сизми? Кечкенә Mac кушымтасын карагыз яки Node.js кулланыгыз , кодыгызны урнаштырганда.

Нәрсә кертелгән

Bootstrap кысаларында Twitter Bootstrap'ка кертелгәннәрнең кайбер моментлары. Күбрәк йөкләү һәм өйрәнү өчен Bootstrap сайтына яки Github проект битенә керегез.

Төс үзгәрүчеләре

Кечкенә үзгәрүләр сезнең CSS баш авыртуыгызны саклап калу һәм яңарту өчен бик яхшы. Төс кыйммәтен яки еш кулланыла торган кыйммәтне үзгәртергә теләгәндә, аны бер урында яңартып торыгыз.

// Сылтамалар
@linkColor : # 8b59c2;         
@linkColorHover :     караңгылану ( @linkColor , 10 ); 
 
// Соры
@black : # 000;             
@grayDark :           җиңеләйтегез ( @black , 25 %); 
@gray :               җиңеләйтегез ( @black , 50 %); 
@grayLight :          җиңеләйтегез ( @black , 70 %); 
@grayLighter :        җиңеләйтегез ( @black , 90 %); 
@ ак : #fff;             
 
// Акцент төсләре
@blue : # 08b5fb;              
@green : # 46a546;             
@red : # 9d261d;               
@yellow : # ffc40d;            
@orange : # f89406;            
@pink : # c3325f;              
@purple : # 7a43b6;            
 
// Төп нигез
@baseline : 20px ;

Аңлатма

CSS нормаль /* ... */синтаксисына өстәп, аңлатма бирүнең тагын бер стиле тәкъдим ителә.

// Бу аңлатма
/ * Бу шулай ук аңлатма * /

Вазу катнашмасы

Миксиннар, нигездә, CSS өчен өлешләр яки өлешләр, сезгә код блокын берләштерергә мөмкинлек бирә. Алар сатучы префиксланган үзлекләр өчен бик яхшы box-shadow, кросс-браузер градиентлары, шрифт стеклары һәм башкалар. Түбәндә Bootstrap белән кертелгән миксиннар үрнәге.

Шрифт сенажлары

# шрифт {
  . стенограмма ( @ авырлык : нормаль , @ зурлык : 14px , @lineHeight : 20px ) {     
    шрифт - зурлык : @size ; 
    шрифт - авырлык : @ авырлык ; 
    сызык - биеклек : @lineHeight ; 
  }
  . санс - сериф ( @ авырлык : нормаль , @ зурлык : 14px , @lineHeight : 20px ) {     
    шрифт - гаилә : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    шрифт - зурлык : @size ; 
    шрифт - авырлык : @ авырлык ; 
    сызык - биеклек : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    шрифт - гаилә : "Грузия" , Times New Roman , Times , санс - сериф ;     
    шрифт - зурлык : @size ; 
    шрифт - авырлык : @ авырлык ; 
    сызык - биеклек : @lineHeight ; 
  }
  . моносмос ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    шрифт - гаилә : "Монако" , Курьер Яңа , моноспос ;   
    шрифт - зурлык : @size ; 
    шрифт - авырлык : @ авырлык ; 
    сызык - биеклек : @lineHeight ; 
  }
}

Градиентлар

# градиент {
  . горизонталь ( @startColor : # 555, @endColor: # 333) { 
    фон - төс : @endColor ; 
    фон - кабатлау : кабатлау - х ;
    фон - рәсем : - khtml - градиент ( сызыклы , сул өскә , уң өскә , ( @startColor ) дан, ( @endColor ) ) ; // Конкорор   
    фон - рәсем : - моз - сызыклы - градиент ( сулда , @startColor , @endColor ); // FF 3.6+    
    фон - рәсем : - мс - сызыклы - градиент ( сулда , @startColor , @endColor ); // IE10    
    фон - рәсем : - вебкит - градиент ( сызыклы , сул өске , уң өс , төс - тукталыш ( 0 %, @startColor ), төс - тукталыш ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    фон - рәсем : - вебкит - сызыклы - градиент ( сулда , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    фон - рәсем : - о - сызыклы - градиент ( сулда , @startColor , @endColor ); // Опера 11.10    
    - мс - фильтр : % ( "прогид: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor ); // IE8 +  
    фильтр : e (% ( "прогид: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor )); // IE6 & IE7 
    фон - рәсем : сызыклы - градиент ( сулда , @startColor , @endColor ); // Le standard   
  }
  . вертикаль ( @startColor : # 555, @endColor: # 333) { 
    фон - төс : @endColor ; 
    фон - кабатлау : кабатлау - х ;
    фон - рәсем : - khtml - градиент ( сызыклы , сул өске , сул асты , ( @startColor ), ( @endColor ) ) ; // Конкорор   
    фон - рәсем : - моз - сызыклы - градиент ( @startColor , @endColor ); // FF 3.6+   
    фон - рәсем : - мс - сызыклы - градиент ( @startColor , @endColor ); // IE10   
    фон - рәсем : - вебкит - градиент ( сызыклы , сул өске , сул асты , төс - тукталыш ( 0 %, @startColor ), төс - тукталыш ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    фон - рәсем : - вебкит - сызыклы - градиент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    фон - рәсем : - о - сызыклы - градиент ( @startColor , @endColor ); // Опера 11.10   
    - мс - фильтр : % ( "прогид: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor ); // IE8 +  
    фильтр : e (% ( "прогид: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor )); // IE6 & IE7 
    фон - рәсем : сызыклы - градиент ( @startColor , @endColor ); // Стандарт  
  }
  . юнәлешле ( @startColor : 55 555, @endColor: # 333, @deg: 45deg) { 
    ...
  }
  . вертикаль - өч - төсләр ( @startColor : # 00b3ee, @midColor: # 7a43b6, @colorStop: 0.5, @endColor: # c3325f) { 
    ...
  }
}

Операцияләр һәм челтәр системасы

Түбәндәге кебек сыгылучан һәм көчле катнашмалар тудыру өчен матур итеп математика эшләгез.

// Челтәр
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Челтәр системасы
. контейнер {
  киңлеге : @ сайт киңлеге ; 
  маржа : 0 автомобиль ;  
  . Clearfix ();
}
. баганалар ( @columnSpan : 1 ) {  
  күрсәтү : сызык ; 
  йөзү : сул ;
  киңлеге : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  маржа - сулда : @gridGutterWidth ; 
  &: беренче - бала {
    маржа - сулда : 0 ; 
  }
}
. офсет ( @columnOffset : 1 ) {  
  маржа - сулда : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! мөһим ;          
}

Ботстрап

Twitter Bootstrap

CSS кайнар линк

Аны азрак кулланыгыз

GitHub

Челтәр системасы 940px стандартны селкетегез яки үзегезнекен әйләндерегез

Килешү челтәре

Челтәр билгесе

Колонналарны офсетлау

Веб -битләр ясау өчен төп шаблоннар

Тикшерелгән макет

Сыеклык урнашуы

Типография рубрикалары, абзацлар, исемлекләр һәм бүтән тип элементлары

Башлыклар һәм күчермә

h1. 1 нче баш

h2. 2 нче баш

h3. 3 нче баш

h4. 4 нче баш

h5. 5 нче баш

h6. 6 нчы баш

Мисал абзац

Мисал рубрикасының суб-рубрикасы бар ...

Төрле. элементлары

Кайчан кулланырга

Абзацка басым ясау

Адреслар

Кыскартулар

Блоккотлар

Исемлекләр

Тәртипсез<ul>

Стильсез<ul.unstyled>

Заказлы<ol>

Тасвирлауdl

Таблицалар , сез аны чамаладыгыз, таблицалар

Таблицалар төзү

Мисал: Килешү өстәл стиле

Мисал: Зебра-сызыклы

Мисал: Зебра сызыклы w / TableSorter.js

Формалар

Килешү стильләре

Тапланган формалар

Кнопкалар

Мисал төймәләре

Альтернатив зурлыклар

Инвалид хәл

Сылтамалар

Кнопкалар

Навигация

Тикшерелгән өстәмә

Проект исеме

Нәрсә бу

Custзенчәлекле

Тамчы

Таблицалар һәм дарулар

Пагинация

Уңыш, кисәтү, хаталар яки хәбәрләр өчен хәбәрләр һәм хаталар

Төп хәбәрләр

Хәбәрләрне блоклау

Поповерлар Модальләрдә, инструментлар, поповерларда эчтәлек күрсәтү өчен компонентлар

Модальләр

Модаль башлам

Корал киңәшләре

Поповерлар

Поповер исеме

Bootstrap-ны азрак суперчар белән куллану CSS-ны үзгәрүләр, миксиннар һәм функцияләр белән кулланыгыз

Аны ничек кулланырга

Нәрсә кертелгән

Төс үзгәрүчеләре

Аңлатма

Вазу катнашмасы

Шрифт сенажлары

Градиентлар

Операцияләр һәм челтәр системасы

Тәртипсез`<ul>`

Стильсез`<ul.unstyled>`

Заказлы`<ol>`

Тасвирлау`dl`