CODING, Koala, SASS, Bootstrap

Вёрстка HomeWork *

Koala

SassDocs

Front-End Framework Bootstrap

Bootstrap (рус)

Sass

@import «import.scss»;

/*——Variables——*/

$link_color: #000fc9;
$link_size: 50px;

a{
color: $link_color;
font-size: $link_size;
}

/*——Scope——*/

$main_color: #ccc;

a{
$main_color: #111;
color: $main_color;
}

p{
color: $main_color;
}

/*——Math——*/

$container_width: 100%;

.container{
width: $container_width;
}

.col-7{
width: $container_width / 7;
}

/*——Nesting——*/

.container{
width: 100%;

h1{
font-size: 30px
}

a{
color: #222;
text-decoration: none;

&:hover{
text-decoration: underline; } }
}

/*——Extend——*/

.button{
background: #444;
color: #fff;
border-radius: 3px;
padding: 10px 20px;
}

.button-error{
@extend .button;
background: red;
}

/*——Mixin——*/

@mixin link{
color: $link_color;
font-size: $link_size;
text-decoration: none;
}

.container{

a{
@include link; }
}

/*——Functions——*/

@function getColumnWidth($width, $columns, $margin){
@return ($width / $columns) — ($margin * 2)
}

$container_width: 100%;
$columns: 4;
$margin: 1%;

.column{
float: left;
width: getColumnWidth($container_width, $columns, $margin);
margin: 0 $margin;
}

Bootstrap

Телефоны

(<768px)

Планшeты

(≥768px)

Настольные

(≥992px)

Настольные

(≥1200px)

Нет (автом.) 750px 970px 1170px
.col-xs- .col-sm- .col-md- .col-lg-

12
Авто 60px 78px 95px
30px(15px) на каждой стороне колонки

Применяя любой .col-md- класс к элементу не только влияет на его стиль на средних устройств, но и на больших устройствах, если класс .col-lg- был упущен.

Пример: Сложенные по горизонтали

Используя единичный набор .col-md-* классовой разметки, вы можете создать базовую систему разметки, которая запускается одновременно на мобильные устройства и планшетные устройства (от экстра маленьких до малых диапазонов) до того как выстроится горизонталь средних устройств. Разместите столбцы разметки в любом .row.

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Пример: Резиновые блоки

Превратите любую фиксированную ширину сетки макет в полную ширину макета, изменив последний .container на .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Пример: Мобильные и настольные

Не хотите чтобы ваши колонки просто складывались на небольших устройствах? Используйте очень маленькие xs или средние md классы разметки устройства добавляя .col-xs-*.col-md-* к вашим столбцам. Смотрите пример ниже для лучшего понимания как это работает.

.col-xs-12 .col-md-8 | .col-xs-6 .col-md-4

.col-xs-6 .col-md-4 | .col-xs-6 .col-md-4 | .col-xs-6 .col-md-4

.col-xs-6 | .col-xs-6

Join the discussion

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
Filter by Categories
=) Home Work
CSS
JavaScript
Word Press

Интеркасса (API)

Доллар

покупка  $ 1 | 25.95 грн
продажа $ 1 | 23.27 грн

Евро

покупка  € 1 | 28.5 грн
продажа € 1 | 25.59 грн