Сегодня поговорим о встраиваемых иконках Bootstrap, с которыми вы можете ознакомиться на страницах getbootstrap.com
Сегодня поговорим о встраиваемых иконках Bootstrap, с которыми вы можете ознакомиться на страницах getbootstrap.com
По умолчанию все картинки в Bootstrap не являются отзывчивыми, т.е. не меняют свой размер в зависимости от экрана, но такая возможность. Для этого к каждой картинке нужно добавить специальный класс img-responsive
Сейчас очень многие сайты используют новый дизайн рубля, вставляют его либо картинкой, либо кто-то пользуется шрифтом. Я же предлагаю вам сразу 2 варианта и начну с картинки. Просто скачивайте ее и вырезайте в фотошопе или любом другом редакторе нужную букву.
Одна из самых основных вещей, которая мне нравится в Bootstrap — это стилизация кнопок, учитвая убожество стандартных кнопок. Всего пару классов и наша кнопка становится классной. Давайте сразу посмотрим демо, а уже потом будем разбираться, что к чему.
Давайте еще раз взглянем на нашу работу, которую мы делали ранее (демо). Если смотреть в большом разрешении, то все отлично, но вот есть смотреть в очень маленьком разрешении (менее 768px), то наша картинка с животным смещается на второй ряд.
С Bootstrap 3 идут различные стили, которые вы можете использовать. Пройдя до данного урока вы уже должны были заменить, что с Bootstrap'ом идут тонны стайлинга, хотя мы еще ничего даже и применить не успели.
А теперь пришло время домашнему заданию. Я вам дам неотформатированный исходник, а вы из него должны сделать что-нибудь красивое, приятное глазу, основываясь на изученном ранее материале.
Попробую объяснить, что такое Jumbotron. Ниже представленка картинка, и вот слайдер на ней вполне сошел бы за Jumbotron, т.е. это что-то такое длинное на весь экран, большое, "кричащее", заставляющее обратить на себя внимание.
Смотрим демо. Если уменьшить браузер до минимум, то мы видим, что нужный блок находится выше, чем хотелось бы.
Давайте сразу посмотри демо1 и демо2. Если не смотреть в код, то в обоих примерах нет совершенно никакх различий, конечно, если вы смотрите в большом разрешении. Но давайте попробуем уменьшить. Как видно, в демо2 левый блок находится под правым, т.е. основное содержимое сайта находится выше, чем менее значимый блок.