BOOTSTRAP | Задание 9 из 50

Урок 2.5. Интерактивное упражнение

С помощью системы Grid System фреймворка Bootstap, задайте классы таким образом, чтобы при увеличении размера браузера (больше 992px), блоки выстроились один слева, другой справа. При этом первый блок шириной в 8 колонок, второй - 4 колонки. Остальной код не меняйте. Для увеличения и уменьшения размера браузера, захватите мышкой ползунок и двигайте влево или вправо

index.html
style.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Grid System</title>
    
    <!-- Подключаем Bootstrap CSS через CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Подключаем style.css -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="container">
        <div class="col-xs-12 col-sm-12 color-left-block">
           <h3>Left block</h3> 
        </div>
        <div class="col-xs-12 col-sm-12 color-right-block">
           <h3>Right block</h3> 
        </div>
    </div>
    
    <!-- Подключаем jQuery и Bootstrap JS через CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


1
2
3
4
5
6
7
8
9
.color-left-block {
    background-color: #2b303b;
    color: white;
}
.color-right-block {
    background-color: rgb(56, 7, 89);
    color: white;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

0 px

index.html

localhost/index.html

Показать ответ

Пропустить

Остались вопросы? Задайте ваш вопрос в сообщество студентов beONmax! Задать вопрос