Поиск по сайту:

Уроки по Bootstrap

 
 
Bootstrap - плагин переходов Bootstrap – плагин переходов -

Плагин переходов предоставляет простые эффекты перехода. Если вы хотите включить эту функциональность плагина в отдельности, то вам нужно подключить файл transition.js один раз вместе с другими файлами JS. В противном случае, как уже упоминалось в главе Bootstrap – Обзор плагинов, вы можете включить bootstrap.js или минимизированный bootstrap.min.js. Transition.js является основным помощником для событий transitionEnd, а также эмулятор переходов CSS. Он используется другими плагинами для проверки поддержки перехода CSS и поймать висячие переходы. Случаи использования Несколько примеровЧитать далее… >

Bootstrap - Wells Bootstrap – Wells -

well это контейнер <div>, позволяет содержанию появляться выделенным в ячейку на страницу. Чтобы создать well, просто оберните содержание, которое вы хотели бы, чтобы оно оказалось обернутым в ячейку <div>, в класс .well . Следующий пример показывает, well по умолчанию: <div class = “well”>Привет, я well !!</div>   Определение размеров Вы можете изменить размер используя дополнительные классы, такие как, well-lg или well-sm. Эти классы используются в сочетании с классом .well. Они влияют на отступы, что делает больше илиЧитать далее… >

Bootstrap – Панели -

В этой главе мы поговорим о панелях в Bootstrap. Компоненты панели используются, когда вы хотите, установить компонент DOM в окне. Для того, чтобы получить основную панель, просто добавьте класс .panel к элементу <div>. Кроме того, добавить класс .panel-default для этого элемента, как показано в следующем примере: <div class = “panel panel-default”> <div class = “panel-body”> Это основная панель </div> </div>   Панель с заголовком Есть два способа добавить панель заголовка: Используйте класс .panel-heading чтобы легко добавить контейнер заголовка панели.Читать далее… >

Bootstrap - Список групп Bootstrap – Список групп -

Цель списка групп компонентов для визуализации сложного и настроенного содержимого в списках. Чтобы получить список основной группы, необходимо: Добавьте класс .list-group в элемент <ul>. Добавить класс .list-group-item в элемент <li>. Следующий пример демонстрирует это: <ul class = “list-group”> <li class = “list-group-item”>Бесплатная регистрация доменных имен</li> <li class = “list-group-item”>Бесплатные оконное пространство хостинга</li> <li class = “list-group-item”>Количество изображений</li> <li class = “list-group-item”>Поддержка 24*7</li> <li class = “list-group-item”>Стоимость продления в год</li> </ul>   Добавление значков в список группы МыЧитать далее… >

Bootstrap - Обзор плагинов Bootstrap – Обзор плагинов -

Рассмотренная в предыдущих главах оформления компонентов являются только началом. Bootstrap поставляется в комплекте с 12 плагинами JQuery, которые расширяют возможности и могут добавить больше взаимодействия на вашем сайте. Для того, чтобы начать работу с плагинами JavaScript в Bootstrap, не обязательно быть опытным разработчиком на JavaScript. Используя Bootstrap Data API, большинство плагинов могут быть вызвано не написав ни одной строчки кода. Плагины Bootstrap могут быть включены на сайте в двух формах: Индивидуально – Использование индивидуальных BootstrapЧитать далее… >

Bootstrap - Медиа объект Bootstrap – Медиа объект -

В этой главе рассказывается об медиа-объекте. Эти абстрактные типы объектов предназначены для построения различных типов компонентов (например, комментарии в блоге, твиты и т.д.), которые показываются по левому краю или по правому краю изображения наряду с текстовым содержанием. Цель медиа-объектов, сделать код для разработки блоков информации значительно короче. Цель медиа-объектов (световая разметка, легкая расширяемость) достигаются путем применения классов для некоторых из простых разметок. Есть две формы для медиа-объектов: .media – Этот класс позволяет вставлять медиа-объект (изображения,Читать далее… >

Bootstrap - Прогрессирующая шкала Bootstrap – Прогрессирующая шкала -

В этой главе обсуждаются о прогрессирующей шкале в Bootstrap. Цель прогрессирующей шкалы, показать активность загрузки, в процессе, или что происходит действие в отношении элементов на странице. В прогрессирующих шкалах используются CSS3 переходы и анимация для достижения некоторых их результатов. Эти функции не поддерживаются в Internet Explorer 9 и ниже или более ранние версии Firefox. Opera 12 не поддерживает анимацию. Прогрессирующая шкала по умолчанию Чтобы создать базовый индикатор: Добавить <div> с классом .progress. Далее, внутри <div>, добавьте пустой <div>Читать далее… >

Bootstrap - Оповещения Bootstrap – Оповещения -

В этой главе мы поговорим о предупреждениях и классах обеспечивающих получение оповещений в Bootstrap. Сигналы обеспечивают способ стиля сообщений пользователя. Они обеспечивают контекстные сообщения обратной связи для типичных действий пользователя. Вы можете добавить дополнительный значок рядом, для предупреждения. Для встроенных предупреждений используйте плагин JQuery Alerts. Вы можете добавить базовое предупреждение, создавая оболочку <div> и добавив класс .alert и один из четырех контекстных классов (например, .alert-success, .alert-info, .alert-warning, .alert-danger), следующий пример демонстрирует это: <div class=”alert alert-success”>Успешно! Все успешно отправлено.</div>Читать далее… >

Bootstrap - Navbar Bootstrap – навигационная панель -

Навигационная панель является одной из характерных особенностей сайтов на Bootstrap. Навигационная панель отзывчива «meta» компонента, которые служат в качестве навигационных заголовков для вашего приложения или сайта. Навигационная панель разрушается в мобильных взглядах и становиться горизонтальной, доступной по ширине окна и увеличивается для просмотра. По своей сути, навигационная панель включает в себя стиль для имен сайтов и базовой навигации. Навигационная панель по умолчанию Для создания навигационную панель по умолчанию: Добавить классы .navbar, .navbar-default для тега <nav>. ДобавитьЧитать далее… >

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close