No módulo anterior,
examinamos o número de componentes Bootstrap que são puramente baseados em CSS.
Então, aplicando as classes CSS para esses componentes,
fomos capazes de criá-los em nossa página web.
Neste módulo, vamos examinar mais componentes baseados em JavaScript do Bootstrap.
Então resumindo, como vimos no módulo anterior,
Bootstrap suporta um número de classes CSS que podem ser aplicadas à
sua marcação HTML em suas páginas da Web para ativar e fazer uso dessas classes CSS.
Então, você pode ver como as classes CSS modificaram as tags HTML genéricas e
forneceu a própria maneira do Bootstrap de apresentar as mesmas informações.
Assim, os componentes que são puramente baseados em CSS podem ser facilmente ativados
aplicando as classes CSS bootstrap para
as várias tags HTML que estão lá em suas páginas da Web.
Bootstrap por si só pode ser usado puramente para suas classes CSS.
Um outro aspecto das classes CSS Bootstraps que vimos foi
que a maioria desses componentes começou com uma classe base que você aplicou.
Como por exemplo, quando você olha para o botão,
você viu que a classe base era a classe BTN.
Então você aplicaria algo como
um primário BTN que adicionaria suas cores ao BTN,
então você poderia definir o tamanho do botão dizendo BTN SM.
Em seguida, você também pode definir o botão para ser um bloco inteiro usando a classe de bloco BTN.
Então, todas essas classes subseqüentes e modificadores para a classe BTN base.
Então, esta abordagem, você vai vê-lo uma
e outra vez em muitos dos componentes Bootstraps.
Então você terá uma classe base, em seguida, conjunto de classes modificadoras que podem ser
aplicadas para modificar o comportamento do componente base.
Isso facilita o design da sua página web.
Tomando outro exemplo, podemos olhar para a classe Nav.
Usamos a classe Nav na barra Naval que
incluímos em nossa página web no módulo anterior.
A classe Nav, modificamos isso aplicando a classe Nav-bar Nav a ela.
Isso nos proporcionou uma certa forma de apresentar as informações de navegação.
Neste módulo, vamos examinar Nav-tabs e
NAV-tablets que são mais uma forma de apresentar informações de navegação para a página web.
As guias e as pílulas que estamos apresentando navegação novamente,
suportado com um plugin JavaScript,
fornece uma maneira aprimorada de fornecer navegação dentro do seu conteúdo.
Então, vamos examinar isso neste módulo em particular.
Eu uso isso como um exemplo para ilustrar como começou a partir de uma classe base,
você pode modificar aplicando as classes modificadoras para a classe base.
Claro, se você quiser trazer a
parte JavaScript de seus componentes Bootstrap em ação,
então você deve começar a aplicar as classes JavaScript.
Então, o Bootstrap suporta uma série de componentes que
são suportados através de plugins JavaScript.
Agora, quando você usa esses plugins em sua página da Web,
você pode incluir plugins individuais que você está realmente indo para usar em seu site,
ou todo o conjunto de plugins.
Agora, o que nós vamos fazer nos exercícios é,
incluir todo o conjunto de plugins porque nós só queremos explorar todos eles.
Mas se você estiver projetando um site,
você pode incluir apenas um subconjunto desses plugins
que você está realmente empregando em seu site,
reduzindo assim a quantidade de código JavaScript que precisa
ser enviado para um usuário que está visualizando sua página da Web.
Esta é a maneira que eu olhar para Bootstraps abordagem para usar JavaScript em
seu próprio suporte para componentes Bootstrap que são habilitados com JavaScript.
Se você olhar para o JavaScript por conta própria,
ele fornece muita flexibilidade e permite que você faça muitas coisas interessantes.
Mas isso também implica
escrever código JavaScript para ser usado quando você está projetando seu site.
Agora, eu vejo o JavaScript como um grande lutador de sumô com muita capacidade,
muito poder, mas indomável.
Agora, jQuery como uma biblioteca que é construído em cima do JavaScript,
essencialmente leva o lutador de sumo e, em seguida, empacota de uma maneira melhor para tornar
este gorila de cem libras em um tamanho mais gerenciável,
mais fácil de abordar e mais fácil de
incluir e fazer uso em seu site design.
Então, se você estiver usando a biblioteca jQuery diretamente,
você pode definitivamente aproveitar muitos
dos componentes jQuery e fazer uso deles em sua página web.
Agora, essa é uma abordagem que você sempre pode tomar porque jQuery
já vai ser incluído em sua página da Web do Bootstrap,
se você estiver indo para alavancar os componentes baseados em JavaScript.
Bootstrap leva isso um passo adiante,
e, em seguida, olhando para a
abordagem de Bootstrap imagem é tomar o lutador de sumô e, em seguida, colocá-lo em uma caixa.
Essencialmente, para empacotar
seus plugins JavaScript em um componente que você pode usar mais facilmente em suas páginas da Web.
Então, os componentes baseados em JavaScript do Bootstrap essencialmente tomam suporte baseado em JQuery,
mas, em seguida, empacote-os de uma forma que você pode empregá-los em
sua página da Web, mesmo sem escrever uma única linha de código JavaScript.
É aqui que o componente JavaScript Bootstrap
pode ser usado sem escrever uma única linha de código.
A forma como ele é suportado no Bootstrap é que,
os componentes JavaScript suportam uma série de
atributos de estrela de hífen de dados que você pode aplicar às suas tags HTML.
Então, você vai me ver usando coisas como data-toggle,
data-spy, data-target, e assim por diante.
Se você se lembra, quando projetamos a barra Naval,
você tinha visto alguns desses atributos.
Lá nós projetamos o botão para as telas extra pequenas.
Agora, é hora de nós [inaudível] por que fizemos isso no módulo anterior.
Então, vamos explorar essa abordagem com grande detalhe neste módulo,
olhando para vários componentes do Bootstrap que aproveitam o suporte a JavaScript.
Claro, você pode aproveitar
a API JavaScript completa que está
disponível para todos esses componentes, na verdade escrevendo código JavaScript.
Vamos adiar isso para o próximo módulo,
onde vamos examinar como você pode escrever código JavaScript simples baseado
na sintaxe jQuery para adicionar
mais funcionalidade aos seus componentes Bootstrap baseados em JavaScript.