Расширить сайт на весь экран в bootstrap: Как создать div ширины экрана 100% внутри контейнера в bootstrap?

Марк Отто создал и внедрил в 5-ю версию Bootstrap новую библиотеку иконок с поддержкой SVG.

Jekyll — это бесплатный генератор статических сайтов с открытым исходным кодом. Jekyll используется для создания веб-сайтов с простой в использовании навигацией, компонентами веб-сайтов и генерирует весь контент сразу. Bootstrap 4 был отличным инструментом для интеграции с Jekyll через Sass (Syntactically Awesome Style Sheets), но в Bootstrap 5 ожидается переход с Jekyll на Hugo.

Hugo описывается как «быстрый и гибкий генератор статических сайтов, созданный на GoLang». Возможная причина перехода в том, что Hugo прост в использовании. По сравнению с Jekyll, он имеет отличную интеграцию с популярным веб-хостингом и может организовать ваш контент с любой структурой URL-адресов.

Из Bootstrap 5 будут удалены некоторые CSS-классы и добавлены новые. Согласно официальным данным из Bootstrap 5 уже удалены классы:

• form-row
• form-inline
• list-inline
• card-deck

Список добавленных классов:

• gx*- пространство между ячейками по горизонтали
• gy*- пространство между ячейками по вертикали
• g*- пространство между ячейками по горизонтали и вертикали
• row-cols-auto — автоматическое распределение колонок сетки

Bootstrap 5 по умолчанию включает адаптивные размеры шрифтов, которые автоматически изменяют размер элемента типографики в соответствии с размером области просмотра пользователя с помощью механизма RFS (механизма изменения размера единиц).

RFS предлагает возможность изменять размер практически любого значения для любого свойства CSS с такими единицами измерения, как margin, padding, border-radius или box-shadow.

Контейнеры используются для размещения в них содержимого, дополнений и центрирования содержимого внутри них.
Bootstrap использует 3 разных типа контейнеров:

• container, который устанавливает максимальную ширину max-width в каждой отзывчивой контрольной точке;
• container-fluid, ширина которого width: 100% на всех контрольных точках;
• container-{breakpoint}, то есть ширина width: 100% до указанной контрольной точки.

В 5 версии добавился еще один размер контейнера. Теперь у пользователей с шириной экрана больше 1400px будет контейнер на 1320px.

Как начать работу с Bootstrap?

Перейдите на официальный сайт и на главной странице нажмите кнопку «скачать». Далее следуйте инструкции исходя из удобного для вас способа загрузки.

Читайте другие статьи

Лучшие инструменты для frontend-разработчика

В этой статье мы собрали подборку самых полезных и нужных инструментов CSS и JavaScript для верстальщиков.

Веб-разработка

26 февр. 2021

История одной японской игры

(パ チ ン コ) или в переводе с японского «пачинко» – часть культуры Японии, игра, которая приносит около 200 миллиардов долларов в год и существует только в пределах страны создателя. Что такое «пачинко» и почему она так популярна?

Веб-разработка

15 сент. 2020

HTML, CSS, JavaScript и PHP: что такое и для чего?

Если вы слышали эти обозначения, но до сих пор не понимаете, что это такое и как они работает, то Айтилогия поможет вам стать ближе к процессу разработки сайтов!

Веб-разработка

6 окт. 2019

Как растянуть блок на всю высоту экрана с помощью CSS

» Как растянуть блок на всю высоту экрана с помощью CSS

В сегодняшней статье я расскажу, как растянуть блок на всю высоту экрана с помощью CSS.
Вам понравится способ, так как он легкий, без множества строк в коде. А самое главное – он эффективный.
Пожалуй, начну из проблемной ситуации, с которой не так легко выйти. Финальное решение задачи, естественно, я предоставлю.

Итак, о проблеме.
Если вы верстальщик, я уверен, что вы сталкивались с такой ситуацией, когда нужно было растянуть блок на всю высоту экрана.
Итак, самый простой способ.

Пример в HTML:

<div>
<h4>BLOGGOOD.RU</h4>
</div>

в CSS:

#hei
{
height: 100vh;
background:#ccc;
}

Благодаря единице измерений «vh» со значением «100», блок примет высоту на вес экран.

vh – это единица измерений, которую можно расшифровать, как viewport height, высота области просмотра.
1vh равен одному проценту от высоты области просмотра.
Между прочим, есть еще и единица измерений «vw».

vw — это единица измерений, которую можно расшифровать, как viewport width, ширина области просмотра.

Если вам по каким-то причинам не нравится верхний код, можете воспользоваться вот таким:

#hei {
height: 100%;
width:100%;
position: absolute;
background:#ccc;
}

Если и это вам не подошло, тогда вы сможете воспользоваться JS.
Всем пока!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css, Вебмастеру, для сайта

Веб-сайты выглядят неправильно или выглядят не так как им следует

В этой статье рассматривается проблема, связанная с неправильным отображением веб-сайтов в Firefox.

Примечание: Если у вас возникли проблемы с веб-сайтом, щёлкните по значку значка в адресной строке, чтобы увидеть, заблокировал ли Firefox части страницы, которые являются небезопасными. Подробнее прочитайте в статье Блокировка небезопасного содержимого в Firefox.

Firefox кэширует веб-сайты, что означает, что он сохраняет некоторые файлы на вашем компьютере для того, чтобы не загружать их повторно при посещении сайтов. Если код веб-сайта обновился, Firefox может всё ещё использовать часть старого кода наряду с некоторыми новыми частями. Это может привести к неправильному отображению веб-страницы. Чтобы устранить эту проблему, необходимо удалить куки и кэш:

1. Щёлкните по кнопке меню , чтобы открыть панель меню.
   Щёлкните по кнопке Библиотека на вашей панели инструментов. (Если вы её не видите, щёлкните по кнопке меню , затем щёлкните щёлкните по кнопке меню ).

2. Щёлкните Журнал и выберите Удалить историю….
3. В выпадающем меню Удалить: выберите Всё.
4. Под выпадающием меню выберите Куки и Кэш. Убедитесь, что другие элементы, которые вы хотите сохранить, не выбраны.
5. Щёлкните по кнопке ОК.

Теперь, когда ваши куки и кэш удалены, попробуйте снова зайти на веб-сайт и проверить, не решилась ли проблема.

Некоторые веб-сайты могут выглядеть неправильно при разных уровнях масштаба. Чтобы сбросить настройку масштаба для одного сайта нажмите Ctrl + 0command + 0. Для сброса настройки масштаба для всех сайтов обратитесь к документации на расширение Масштабирования, которое вы используете.

Некоторые сайты не отображаются правильно, если установлен минимальный размер шрифта. Для сброса минимального размера шрифта:

1. На Панели меню в верхней части экрана щёлкните и выберите .
   Нажмите на кнопку меню и выберите .Нажмите на кнопку меню и выберите .

   .

2. Выберите панель панель и перейдите к Язык и внешний вид..
3. В раздел Шрифты и цвета щёлкните по кнопке Дополнительно….
4. Установите Наименьший размер шрифта в Нет.

Возможно, вы случайно установили стиль страницы в . Чтобы удостовериться в том, что в Firefox установлено использование стиля страницы по умолчанию:

• Нажмите клавишу Alt, чтобы временно вызвать традиционное меню,В панели менюВ верхней части окна Firefox откройте меню , выберите и щёлкните по .

Теперь, когда страница использует её стиль по умолчанию, она может отображаться правильно.

Вам следует проверить, не установлено ли у вас расширение (например, NoScript) или программа Интернет-безопасности (такая как межсетевой экран, антивирус или анти-шпионская программа), которая может блокировать JavaScript.

В некоторых случаях загрузка и проверка защищённого веб-содержимого может зависеть от времени, так что вам необходимо проверить, что дата, время и часовой пояс установлены в вашей системе правильно.

Некоторые расширения могут влиять на отображение веб-сайтов, или комбинация ваших драйверов и видеокарты может привести к тому, что некоторое веб-содержимое будет отображаться неправильно при включённом аппаратном ускорении. Чтобы проверить, не вызывает ли одно из них проблему, следуйте инструкциям в статье Устранение проблем с расширениями, темами и аппаратным ускорением для решения типичных проблем в Firefox.

Иногда вы можете наткнуться на страницу, которая просто не работает в Firefox. Если это произойдёт, пожалуйста, сообщите о проблеме, посетив сайт Webcompat.com.

Если вы используете Firefox Beta, Developer Edition или Nightly, щёлкните по меню действий на странице (три точки в адресной строке) и выберите Вы можете также перейти в меню Firefox и щёлкнуть , а затем выбрать .

Основано на информации из статьи Websites look wrong (mozillaZine KB)

Обзор фреймворка Bootstrap — его составляющие, советы по использованию

Фреймворк Bootstrap позволяет ускорить процесс верстки, плюс, сделать готовый продукт более адаптивным к разным вариантам разрешения и формата экрана. Распространяется полностью бесплатно в виде HTML, CSS и JS файлов. Это один из самых популярных фреймворков в мире. Основной областью применения является разработка интерфейса сайтов, веб-приложений, среды администрирования. Любому веб-разработчику потребуется для работы ознакомиться хотя бы с базовыми материалами по Bootstrap.

Почему Bootstrap так популярен

Благодаря тому, что в файлах Bootstrap прописаны самые распространенные стили и поведения для элементов, процесс верстки ускоряется в разы. Плюс, готовый продукт реализуется более грамотно с технической точки зрения и его проще привести к общепринятым стандартам в компании.

Bootstrap достаточно прост в освоении, так как за его основу взяты стандартные возможности HTML, CSS и JS, с которыми знаком даже начинающий разработчик. По-сути, весь процесс работы сводится к присвоению “правильного” класса тому или иному элементу верстки. Конечно же, перед этим требуется предварительно подключить нужные файлы к основному, но проблем с этим не должно возникнуть даже у начинающего разработчика.

Рассмотрим пример на создании кнопки из обычной ссылки. В случае с фреймворком Bootstrap для этого достаточно прописать следующий блок:

<a href=»#»>Ссылка, оформленная в виде кнопки</a>

То есть вы просто добавляете нужный класс к ссылке и она принимает вид кнопки. Без фреймворка вам пришлось бы вручную прописать стили для кнопки в CSS-файле проекта, а затем подключить данный класс к кнопке. Если же стили Bootstrap вас не устраивают, то вы можете их расширить, приписав дополнительный класс к элементу и описав его в CSS-файле вашего проекта.

Также с помощью Bootstrap можно создавать и более сложные элементы в верстке всего за несколько секунд. Например, для создания вкладок на сайте вам придется делать несколько блоков в HTML-документе, затем оформлять их в CSS, а после прописывать поведение в JS. Даже у опытного разработчика на это может уйти минут 10. Делая вкладки с помощью Bootstrap от вас потребуется только прописать каркас в HTML-документе и расставить в нем нужные классы.

Преимущества и недостатки Bootstrap

Фреймворк Bootstrap имеет весомые преимущества:

1. Ускорение процесса верстки. От разработчика требуется только сделать HTML-макет и присвоить ему нужные классы, что позволяет сильно сэкономить время на написание CSS-свойств и JavaScript-кода.
2. Кроссбраузерность и кроссплатформенность. Сайт или приложение, написанное с помощью данного фреймворка будет поддерживаться по умолчанию большинство браузеров, операционных систем и устройств. Разработчику не придется тратить дополнительное время для адаптации продукта.
3. Большая библиотека продуманных компонентов. С ее помощью можно будет быстро создать все основные компоненты на сайте или в приложении — кнопки, выпадающие списки, меню, слайдеры и так далее. Все компоненты в библиотеки протестированы многими разработчиками по всему миру, поэтому проблемы с совместимостью минимальны.
4. Можно настраивать под свой проект. Несмотря на то, что в Bootstrap используются прописанные шаблоны, их легко настроить под свой проект. Это можно сделать как с помощью изменения стандартных классов, так и добавления дополнительных.
5. Низкий порог входа. Чтобы начать пользоваться Bootstrap необязательно плотно заниматься веб-разработкой. Достаточно знать основы HTML, CSS и JavaScript. Это позволит делать шаблонные проекты.
6. Единая стилистика дизайна. Все компоненты библиотеки Bootstrap выполнены в одном стиле, благодаря чему можно быстро сделать страницу, которая будет гармонично смотреться без необходимости работать над дизайном отдельных элементов.
7. Собственное сообщество разработчиков и большое количество обучающих материалов. Наличие большого количества обучающих материалов и развитого сообщества разработчиков, в том числе и русскоязычного, позволяют очень быстро изучить работу фреймворка.
8. Распространяется бесплатно. Bootstrap — это проект с открытым исходным кодом, который распространяется на полностью бесплатной основе и может быть использован даже в коммерческих проектах.

Однако помимо достоинств у данного фреймворка имеются и свои недостатки:

1. Не подходит для создания сайтов с уникальным дизайном. Его, конечно, можно использовать для этих целей, но делать это не всегда целесообразно, так как на переработку стандартных компонентов может уйти больше времени, чем если бы вы делали все с нуля.
2. Большой размер конечных файлов CSS и JS. Это может негативно повлиять на скорость загрузки страниц готового проекта. Частично это можно исправить, проведя оптимизацию файлов проекта. Сделать это можно автоматически с помощью специальных сервисов.

Из чего состоит Bootstrap

В “состав” Bootstrap входят следующие элементы:

• инструменты для создания макета — оберточные контейнеры, системы сеток, адаптивных классов;
• готовые компоненты — кнопки, формы, навигационные панели, слайдеры, аккордеоны, выпадающие списки и так далее;
• классы стилизации контента — кнопок, форм, текстовых полей и так далее;
• дополнительные классы, отвечающие за выравнивание текста, отображение и скрытие элементов, установки цветов и отступов.

Пример разметки страницы в Bootstrap

Полезные советы по использованию Bootstrap

Несмотря на то, что сам по себе Bootstrap позволяет ускорить процесс верстки и оптимизировать некоторые задачи, его можно использовать более эффективно. Рассмотрим несколько советов от опытных разработчиков, которые позволят начинающему быстрее изучить инструмент Bootstrap и использовать его более эффективно в своих проектах.

Изучите HTML и CSS

Если вы только начинаете обучаться разработке, то перед тем, как переходить к верстке с помощью фреймворков вам рекомендуется нормально освоить HTML и CSS. Фреймворк позволяет вам сократить количество рутинных действий, однако “верстать за вас” он не в состоянии. Чтобы эффективно пользоваться всеми возможностями Bootstrap нужно знать хотя бы на среднем уровне HTML и CSS. С JavaScript, конечно, тоже было бы неплохо разобраться, но это уже можно сделать по ходу освоения самого фреймворка.

Пользуйтесь только последней версией Bootstrap

Если проект, над которым вы работаете не требует от вас обратного, то используйте последнюю стабильную версию фреймворка. Ее можно посмотреть на официальном ресурсе разработчика и там же скачать. Так вам проще будет в будущем адаптироваться к нововведениям, плюс, новые версии предлагают и новые инструменты, оптимизирующие весь рабочий процесс.

Актуальная версия Bootstrap

Постоянно мониторьте официальные сообщества Bootstrap

Это может быть не только официальный сайт разработчика, но и ресурсы для общения разработчиков, профессиональные порталы и так далее. Так как Bootstrap очень распространен, то существуют даже русские сообщества, которые не сильно уступают своим англоязычным аналогам. Проводя постоянный мониторинг вы сможете быть в курсе всех нововведений, увидите, какие “фишки” делают другие разработчики.

Блог Bootstrap

Также не брезгуйте онлайн-курсами для веб-разработчиков. Таким образом вы сможете быстро войти в курс дела, изучить все основные фишки Bootstrap или даже найти опытного наставника и свои первые проекты. Онлайн-курсы по Bootstrap не всегда платные — их много бесплатных, условно-бесплатных или тех, которые стоят не очень дорого.

Отведите время для изучения документации

В Bootstrap есть множество прописанных заранее классов и элементов, поэтому запомнить их все не представляется возможным. Плюс, с каждым обновлением добавляются новые. Для эффективной работы вам придется научится работать с технической документацией Bootstrap. Она представлена на официальном сайте разработчика и достаточна проста в освоении. Там вы сможете быстро узнать, за что отвечает тот или иной класс, как с ним работать, как его кастомизировать под свои задачи и так далее.

Официальная документация Bootstrap

Используйте JS-плагины

Возможности Bootstrap можно расширить за счет использования сторонних JavaScript-плагинов. Существуют онлайн-библиотеки плагинов. Некоторые из них являются официальными библиотеками плагинов Bootstrap, а некоторые являются неофициальными и поддерживаются независимыми разработчиками. Плагины позволяют еще больше автоматизировать и оптимизировать процесс верстки.

Если у вас есть достаточные знания JavaScript и JQuery, то вы можете редактировать эти плагины под свои нужды или создавать собственные. Не брезгуйте этой возможностью. Использование плагинов помогут не только сделать вашу работу более эффективной, но и готовый продукт более “необычным”.

Фокусируйтесь на отдельных компонентах

Вам потребуется разделить страницу на условные блоки, а эти блоки в свою очередь на другие блоки или колонки в зависимости от ваших потребностей. Такой подход к работе поможет вам разработать повторно используемые компоненты, которые можно будет использовать на нескольких страницах, что сделает процесс верстки более простым и эффективным. Также разделение страницы на блоки позволит быстрее вносить правки и другие изменения в проект.

Пример разделения страницы на Bootstrap

Умение делить страницу на отдельные блоки, колонки и элементы в них также очень полезно и при классической верстке, однако не имеет такого решающего значения как при верстке с помощью Bootstrap.

Заключение

Веб-разработчику, работающему с фронтенд, обязательно знать и уметь работать с фреймворком Bootstrap. Даже если вы его не используете в текущем проекте, вполне вероятно, что вам придется работать с ним в последующих. Плюс, использование Bootstrap и других подобных решений позволяет сократить время на разработку, что позволит вам выполнить больше работы за один и тот же промежуток времени, а следовательно, заработать больше.

Не стоит останавливаться только на одном Bootstrap — изучайте другие похожие фреймворки, пытайтесь одновременно использовать сразу несколько штук в проекте. Также не забывайте о том, что стандартные возможность Bootstrap могут быть расширены за счет сторонних плагинов или самописных.

html — полноэкранная ширина контейнера Bootstrap 4 без класса контейнера-жидкости

html — ширина полного экрана контейнера Bootstrap 4 без класса контейнера-жидкости — qaru

Спросил
3 года, 8 мес. Назад

Просмотрено
6к раз

Я хочу дать контейнеру 100% ширину с помощью медиа-запросов, чтобы элементы содержались на большом экране и не содержались на маленьком или наоборот.Этот код является всего лишь примером, и он работает с Bootstrap v4 alpha 6, но в последней версии он больше не работает.

Кто-нибудь знает решение проблемы?

JSFiddle

  @media screen и (max-width: 1000px) {
  container {
    ширина: 100%;
  }
}  

WebDevBooster

13.6k88 золотых знаков6262 серебряных знака6969 бронзовых знаков

Создан 29 янв.

Габриэль Соуза Габриэль Соуза

62744 золотых знака1414 серебряных знаков2828 бронзовых знаков

4

Попробуйте следующий код.Он соответствует навигационной панели по ширине страницы, когда ширина страницы на меньше, чем 500 пикселей , в противном случае он имеет обычные эффекты класса контейнера на вашем элементе. Если вы хотите изменить размер страницы и протестировать его, вы можете использовать jsFiddel demo .

  @media screen и (max-width: 1000px) {
  .container {
      отступ справа: 0! важно;
      padding-left: 0! важно;
      максимальная ширина: начальная! важно;
  }
}
тело{
  фон: # a7b7bf! important;
}  

И если вы хотите, чтобы панель навигации всегда заполняла всю ширину страницы, вы можете легко удалить контейнер класса из оболочки div:

  кузов {
  фон: # a7b7bf! important;
}  

Создан 29 янв.

RAMRAM

14.5k77 золотых знаков5858 серебряных знаков8686 бронзовых знаков

2

Вот как вы это делаете правильно, не используя класс container-fluid , но вместо этого помещая все внутри в контейнер (нажмите кнопку «запустить фрагмент кода» и разверните его на весь экран, чтобы увидеть, что он действительно во всю ширину):

  
   

        Navbar 
       
            
       

       

           

               

                    Главная  (текущая)  
               
               

                    Ссылка 
               
               

                   
                       Падать
                   
                   

                        Действие 
                        Другое действие 
                       
 
                        Здесь что-то еще 
                   
               
               

                    Отключено 
               
           
           <форма>
               
                Поиск 
           
       
   



 



 

 .modal.modal-fullscreen .modal-dialog {
  ширина: 100вв;
  высота: 100vh;
  маржа: 0;
  отступ: 0;
  максимальная ширина: нет;
}

.modal.modal-fullscreen .modal-content {
  высота: авто;
  высота: 100vh;
  радиус границы: 0;
  граница: нет;
}

.modal.modal-fullscreen .modal-body {
  переполнение-у: авто;
}
 

 

  

    

      

        
 Модальный заголовок 
        
           & times; 
        
      
      

        ...
      
      

         Закрыть 
         Сохранить изменения 
      
    
  

 

  


  
  

    
 
    
 
    
 
  

  
  

    

      
      

        
 Первое изображение 
      
    
    

      
    
    

      
    

    
  

  
  
     
     Предыдущий 
  
  
     
     Далее 
  

  

Следующим шагом является инициализация карусели с помощью JavaScript и изменение предопределенных значений свойств конфигурации интервала и паузы . Обратите внимание, что мы решили установить для свойства pause значение false , потому что мы всегда хотим, чтобы цикл был активным:

  $ ('. Карусель'). Карусель ({
  интервал: 6000,
  пауза: "ложь"
});  

Выполнив эти простые шаги (и, конечно же, импортировав необходимые файлы), мы теперь можем построить первую версию карусели.Вот как это выглядит на данный момент:

См. Базовую карусель начальной загрузки Pen от SitePoint (@SitePoint) на CodePen.

Создание полноэкранных слайдов Bootstrap Carousel

На этом этапе мы сделаем еще один шаг, преобразовав существующую карусель в полноэкранное слайд-шоу Bootstrap Carousel. Чтобы реализовать эту обновленную версию, нам нужно добавить пользовательский jQuery:

  var $ item = $ ('. Элемент-карусель');
var $ wHeight = $ (окно) .height ();

$ item.height ($ wHeight);
$ item.addClass ('полноэкранный');

$ ('. carousel img'). each (function () {
  var $ src = $ (это) .attr ('src');
  var $ color = $ (this) .attr ('цвет данных');
  $ (this) .parent (). css ({
    'background-image': 'url (' + $ src + ')',
    'background-color': $ color
  });
  $ (это) .remove ();
});

$ (window) .on ('изменение размера', function () {
  $ wHeight = $ (окно) .height ();
  $ item.height ($ wHeight);
});  

Затем мы добавляем CSS:

  .full-screen {
  размер фона: обложка;
  background-position: center;
  фон-повтор: без повторения;
}  

В приведенном выше коде мы делаем следующее:

• Прокрутите наши изображения и получите значения атрибутов src и data-color .
• Найдите их прямого родителя ( .item ) и назначьте ему полноэкранный класс вместе с несколькими свойствами, связанными с фоном. Имейте в виду, что значения этих свойств зависят от значений вышеупомянутых атрибутов (которые различны для каждого изображения).
• Установите высоту родительского элемента, равную высоте области просмотра. Важно отметить, что мы должны пересчитывать высоту окна браузера, когда оно меняет размер (используя событие resize ).
• Удалите элементы img , которые не нужны, поскольку мы полагаемся на фон.

Хотя это и не обязательно, давайте внесем последнее изменение. Когда страница загрузится, мы добавим активный класс к первому слайду с помощью jQuery, вместо того, чтобы жестко закодировать его в HTML:

.

Так вместо этого:

Делаем так:

  $ item.eq (0) .addClass ('активный');  

Это позволяет нам предотвратить небольшое переключение между двумя разными высотами (до и после внесенных нами изменений) первого слайда.

Вот новая версия нашего слайд-шоу:

См. Полноэкранную карусель Pen Bootstrap от SitePoint (@SitePoint) на CodePen.

Может быть полезно просмотреть полную версию страницы, чтобы увидеть отличие от предыдущего примера.

Инициализация случайного слайда

Иногда нам может понадобиться показать случайный слайд при загрузке страницы. Чтобы создать эту новую функциональность, мы должны обновить наш код. Для начала нам нужно удалить активный класс по умолчанию с первого слайда, а также с первого индикатора.

Вот исходный код:

Что теперь становится:

Если вы используете jQuery для добавления активного класса к первому слайду, как я объяснил ранее, вам необходимо удалить этот код после добавления нового случайного кода слайда.

Теперь мы можем добавить следующий фрагмент кода к существующему jQuery:

  var $ numberofSlides = $ ('. Элемент-карусели'). Length;
var $ currentSlide = Math.floor ((Math.random () * $ numberofSlides));

$ ('. карусель-индикаторы li'). each (function () {
  var $ slideValue = $ (this) .attr ('data-slide-to');
  if ($ currentSlide == $ slideValue) {
    $ (это) .addClass ('активный');
    $ item.eq ($ slideValue) .addClass ('активный');
  } еще {
    $ (это) .removeClass ('активный');
    $ item.eq ($ slideValue).removeClass ('активный');
  }
});  

• Мы начинаем с получения общего количества слайдов и используем это значение, чтобы найти случайный слайд.
• Мы перебираем индикаторы карусели и получаем значение атрибута data-slide-to . Если случайное число соответствует значению этого атрибута, мы назначаем активный класс соответствующему слайду и индикатору. Если этого не происходит, мы удаляем его из целевых элементов.

Конечно, если вы не хотите совмещать это поведение с полноэкранным слайд-шоу, не стесняйтесь удалять ненужный код.

Вы можете увидеть эту функциональность в следующей демонстрации CodePen:

См. Полноэкранную загрузочную карусель Pen со случайным начальным изображением от SitePoint (@SitePoint) на CodePen.

Если вы нажмете кнопку RERUN на вставке CodePen, вы увидите, что исходное изображение меняется при каждой загрузке.

Возможна дальнейшая настройка?

Помимо расширений, представленных в этой статье, существует множество других способов изменить предопределенное поведение компонента карусели.Если вы любите приключения, вот еще несколько идей, которые вы можете изучить:

• создавать дополнительные эффекты анимации (например, fade или scale ) при переключении между слайдами
• построить наложение изображения
• рандомизирует следующий и предыдущий слайды (используйте настраиваемое событие slide.bs.carousel ).

Заключение

В этой статье я показал вам, как повысить гибкость ваших проектов Bootstrap, настроив компонент карусели.Хотя не все считают карусели полезными, у вас может быть клиент, который попросит о такой функции, и, возможно, эти настройки пригодятся.

Если у вас есть основы Bootstrap за плечами, но вам интересно, как вывести свои навыки Bootstrap на новый уровень, ознакомьтесь с нашим курсом «Создание своего первого веб-сайта с помощью Bootstrap 4», чтобы быстро и весело познакомиться с возможностями Bootstrap. .

.