как собрать такой макет на bootsrap?

gordy

Мастер
Регистрация
25 Авг 2015
Сообщения
228
Реакции
32
я просто новичек в bootstrap'e, а уроков по такому макету я не нашел (макет вроде не замороченный), поэтому прошу помощи помочь со сборкой данного макета на bootstrap'e

для десктопной версии

prototip_sayta.jpg

для планшетной

800.jpg


для мобильной

600.jpg
 
Ну вот как то так...

HTML:
        <div class="container">
            <div class="row">
                <div class="col"><h3>Шапка</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
            </div>
            <div class="row">
                <div class="col-xl-3 col-md-6 col-12 order-xl-1 order-md-2 order-sm-2"><h3>Левая колонка</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                <div class="col-xl-6 col-md-12 col-12 order-xl-2 order-md-1 order-sm-1">
                    <h3>Контент</h3>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="col-xl-3 col-md-6 col-12 order-xl-3 order-md-3 order-sm-3"><h3>Правая колонка</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            </div>
            <div class="row">
                <div class="col"><h3>Подвал</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            </div>
        </div>


в аттаче файлик
 

Вложения

  • site.rar
    1,5 KB · Просмотры: 3
Для просмотра ссылки Войди или Зарегистрируйся спасибо огромное дай Бог Вам здоровья на долгие годы, это то что надооооооооо:)
 
Последнее редактирование:
Назад
Сверху