Основной курс Bootstrap

Плагины Bootstrap

Пример системы сетки Bootstrap:中型 и large устройства

Пример системы сетки Bootstrap: телефон, планшет, стационарный компьютер

Мы уже видели Средние и крупные устройства Теперь让我们一起看一下另一个 пример, который также будет подходить для маленьких телефонов. Мы будем делить столбцы планшета на 25%/75%, и добавим следующие параметры:

<div>....</div>
<div>....</div>

Теперь нам предложено 3 различных макета столбцов, подходящих для трёх видов устройств. На телефоне это будет макет 25% слева и 75% справа. На планшете это будет макет 50%/50%. На устройствах с крупным обзором это будет макет 33%/66%. Пожалуйста, проверьте примеры ниже для подтверждения. (Здесь для каждого столбца определены стили, и вы можете избежать этого.)

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
　　　<title>Bootstrap пример - телефон, планшет, стационарный компьютер</title>
　　　<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"
　　　<h1>Hello, world!</h1>
　　　<div class="row"
　　　　　　<div class="col-sm-3 col-md-6 col-lg-8"　　
　　　　　　　　　стиль: цвет фона: #dedef8;　
　　　　　　　　　тень: встроенный 1px -1px 1px #444;　
　　　　　　　　　внутренний тень -1px 1px 1px #444;
　　　　　　　　　<p>Лорем ipsum dolor sit amet, consectetur adipisicing elit, sed do　
　　　　　　　　　　　　время, на которое он влияет, на работе и великих страданиях. Итак　
　　　　　　　　　　　　даже в наименьшую пользу, кто бы не хотел извести себя　
　　　　　　　　　　　　если бы не то, что из этого можно было бы получить　
　　　　　　　　　</p>
　　　　　　　　　<p>Следует ли нам видеть, почему все эти ошибки и удовольствия?　
　　　　　　　　　　　　обвинять в страданиях и хвалить, все открывать, и то, что она сама　
　　　　　　　　　　　　которое он изобрел, истина и как будто архитектор счастливой жизни　
　　　　　　　　　　　　сказанное можно объяснить　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-sm-9 col-md-6 col-lg-4"　
　　　　　　　　　стиль: цвет фона: #dedef8;
　　　　　　　　　тень: встроенный 1px -1px 1px #444;　
　　　　　　　　　внутренний тень -1px 1px 1px #444;
　　　　　　　　　<p>Следует ли нам видеть, почему все эти ошибки и удовольствия?　
　　　　　　　　　　　　обвинять в страданиях и хвалить
　　　　　　　　　</p>
　　　　　　　　　<p>Никто не хочет страдать от боли, но почему?　
　　　　　　　　　　　　сочетающийся, желающий страдать, но не потому, что страдания доставляют удовольствие　
　　　　　　　　　　　　tempora incidunt ut labore et dolore magnam aliquam quaerat　
　　　　　　　　　　　　voluptatem.　
　　　　　　　　　</p>
　　　	</div>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ›/›

Результаты показаны ниже:

Пример системы сетки Bootstrap:中型 и large устройства