В предыдущем модуле
мы рассмотрели количество компонентов Bootstrap, которые основаны исключительно на CSS.
Таким образом, применяя классы CSS для этих компонентов,
мы смогли создать их на нашей веб-странице.
В этом модуле мы рассмотрим больше компонентов на основе JavaScript Bootstrap.
Таким образом, суммируя, как мы видели в предыдущем модуле,
Bootstrap поддерживает ряд классов CSS, которые могут быть применены к
вашей разметке HTML в ваших веб-страницах, чтобы активировать и использовать эти классы CSS.
Таким образом, вы могли видеть, как классы CSS изменили общие HTML-теги и
предоставили собственный способ Bootstrap представления той же информации.
Таким образом, компоненты, которые основаны исключительно на CSS, могут быть легко активированы,
применяя классы bootstrap CSS к
различным HTML-тегам, которые есть на ваших веб-страницах.
Bootstrap сам по себе может использоваться исключительно для своих классов CSS.
Еще один аспект классов Bootstraps CSS, который мы видели, заключается в
том, что большинство из этих компонентов начинались с базового класса, который вы применили.
Например, когда вы смотрите на кнопку,
вы видели, что базовый класс был классом BTN.
Затем вы примените что-то вроде
первичного BTN, который добавит свои цвета в BTN,
тогда вы можете определить размер кнопки, сказав BTN SM.
Затем вы также можете определить кнопку, чтобы быть целым блоком, используя класс блока BTN.
Итак, все эти последующие классы и модификаторы к базовому классу BTN.
Таким образом, этот подход, вы будете видеть его
снова и снова во многих компонентах Bootstraps.
Таким образом, у вас будет базовый класс, а затем набор классов модификаторов, которые могут
быть применены для изменения поведения базового компонента.
Это облегчает дизайн вашей веб-страницы.
Возьмем другой пример, мы можем посмотреть на класс Nav.
Мы используем класс Nav в Nav-баре, который
мы включили в нашу веб-страницу в предыдущем модуле.
Класс Nav, мы изменяем это, применяя к нему класс Nav-Bar Nav.
Таким образом, это дало нам определенный способ представления навигационной информации.
В этом модуле мы рассмотрим Nav-вкладки и
Nav-таблетки, которые являются еще одним способом представления навигационной информации для веб-страницы.
Вкладки и таблетки, которые мы представляем навигацию снова,
поддерживается плагином JavaScript,
обеспечивает расширенный способ обеспечения навигации внутри вашего контента.
Итак, мы рассмотрим это в данном конкретном модуле.
Я использую это в качестве примера, чтобы проиллюстрировать вам, как началось с базового класса,
вы можете изменить, применив классы модификаторов к базовому классу.
Конечно, если вы хотите привести
часть JavaScript ваших компонентов Bootstrap в действие,
вы должны начать применять классы JavaScript.
Таким образом, Bootstrap поддерживает ряд компонентов,
которые поддерживаются через плагины JavaScript.
Теперь, когда вы используете эти плагины на вашей веб-странице,
вы можете включить отдельные плагины, которые вы фактически собираетесь использовать на вашем веб-сайте,
или весь набор плагинов.
Теперь, то, что мы собираемся сделать в упражнениях,
включить весь набор плагинов, потому что мы просто хотим исследовать все из них.
Но если вы разрабатываете веб-сайт,
вы можете включить только подмножество этих плагинов,
которые вы фактически используете на вашем веб-сайте,
тем самым уменьшая количество кода JavaScript, который должен
быть отправлен пользователю, просматривающему вашу веб-страницу.
Вот как я смотрю на подход Bootstraps к использованию JavaScript в
собственной поддержке компонентов Bootstrap, которые включены с JavaScript.
Если вы посмотрите на JavaScript самостоятельно,
он обеспечивает большую гибкость и позволяет делать много интересного.
Но это также влечет за собой
написание кода JavaScript, который будет использоваться при проектировании вашего веб-сайта.
Теперь я смотрю на JavaScript как на большого борца сумо с большим потенциалом,
большой силой, но неприрученным.
Теперь jQuery как библиотека, построенная поверх JavaScript,
по существу берет рестлера сумо, а затем упаковывает его лучше, чтобы сделать
эту гориллу 100 фунтов в более управляемый размер,
более легче подходить и легче
включить и использовать на вашем сайте дизайн.
Таким образом, если вы используете библиотеку jQuery напрямую,
вы можете определенно использовать многие
компоненты jQuery и использовать их на своей веб-странице.
Теперь это подход, который вы всегда можете принять, потому что jQuery
уже будет включен в вашу веб-страницу Bootstrap,
если вы собираетесь использовать компоненты на основе JavaScript.
Bootstrap делает этот шаг дальше,
а затем, глядя на
подход Bootstrap, чтобы взять рестлера сумо, а затем положить его в коробку.
По существу стоит для упаковки
ваших плагинов JavaScript в компонент, который вы можете более легко использовать на ваших веб-страницах.
Таким образом, компоненты на основе Bootstrap JavaScript по существу принимают поддержку на основе JQuery,
но затем упаковывают их таким образом, чтобы вы могли использовать их на
своей веб-странице даже без написания одной строки кода JavaScript.
Здесь компонент Bootstrap JavaScript
можно использовать без написания одной строки кода.
Способ поддержки в Bootstrap заключается в
том, что компоненты JavaScript поддерживают ряд
атрибутов дефиса данных, которые вы можете применить к вашим HTML-тегам.
Итак, вы увидите, что я использую такие вещи, как переключение
данных, шпион данных, цель данных и так далее.
Если вы помните, когда мы разработали Nav-бар,
вы видели пару этих атрибутов.
Там мы разработали кнопку для дополнительных маленьких экранов.
Теперь настало время для нас [неразборчиво], почему мы сделали это в предыдущем модуле.
Таким образом, мы подробно рассмотрим этот подход в этом модуле,
рассматривая несколько компонентов Bootstrap, которые используют поддержку JavaScript.
Конечно, вы можете использовать
полный API JavaScript, который
доступен для всех этих компонентов, фактически написав код JavaScript.
Мы отложим это до следующего модуля,
где мы рассмотрим, как вы можете написать простой код JavaScript на основе
синтаксиса jQuery, чтобы добавить
больше функциональности для ваших компонентов Bootstrap на основе JavaScript.