Bootstrap система сетки Пример: мобильные телефоны, планшетные компьютеры, настольные компьютеры
Мы уже видели , среднего и крупного оборудования . Теперь, давайте рассмотрим еще один пример, мы будем делать это одинаково подходит как для небольших мобильных телефонов. Мы хотим, чтобы колонна таблетка разделена на 25% / 75%, мы добавим следующие опции:
<Div класс = "Col-см-3 Col-й мкр-6 Col-Л.Г.-4"> .... </ DIV> <Div класс = "Col-СМ-9 Col-й мкр-6 Col-Л.Г.-8"> .... </ DIV>
Теперь, дайте нам другой макет столбец 3, соответственно, для трех устройств. На телефоне, он будет оставлен на правый 25% макет 75%. На таблетки, то это будет 50% распределения / 50%. На большом окне просмотра оборудования, то это будет 33% распределения / 66%. Далее приведен пример для проверки. (Здесь, столбцы определяются для каждого типа, вы можете избежать этого.)
<! DOCTYPE HTML> <HTML> <Head> <Title> Bootstrap экземпляр - ваш телефон, планшет, настольный компьютер </ title> <Ссылка HREF = "/ начальной загрузки / CSS / bootstrap.min.css" отн = "таблицы стилей"> <Script SRC = "/ скрипты / jquery.min.js"> </ скрипт> <Script SRC = "/ начальной загрузки / JS / bootstrap.min.js"> </ скрипт> </ Head> <Body> <Div класс = "контейнер"> <H1> Привет, мир! </ H1> <Div класс = "строка"> <Div класс = "Col-см-3 Col-й мкр-6 Col-Л.Г.-8" стиль = "цвет фона: # dedef8; коробка-тень: 1px врезке -1px 1px # 444, врезке -1px 1px 1px # 444; "> <P> Lorem Ipsum Dolor сидеть Амет, consectetur adipisicing Элит, SED сделать eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ut enim объявление миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat. </ P> <P> Сед ут perspiciatis недеформированной Omnis ISTE Natus ошибка сидячую voluptatem accusantium doloremque laudantium, totam бэр aperiam, eaque IPSA Quae AB Illo inventore Veritatis и др квази architecto beatae Vitae изречения Сюнт explicabo. </ P> </ Div> <Div класс = "Col-СМ-9 Col-й мкр-6 Col-Л.Г.-4" стиль = "цвет фона: # dedef8; коробка-тень: 1px врезке -1px 1px # 444, врезке -1px 1px 1px # 444; "> <P> Сед ут perspiciatis недеформированной Omnis ISTE Natus ошибка сидячую voluptatem accusantium doloremque laudantium. </ P> <P> Neque Порро quisquam Эст, Qui dolorem Ipsum Quia Dolor сидят Амет, consectetur, adipisci велит, СЕПГ Quia не numquam eius Моди Темпора incidunt ут Лаборе и др Dolore magnam aliquam quaerat voluptatem. </ P> </ Div> </ Div> </ Body> </ HTML>
Результаты следующие: