ListGroup em Bootstrap [ListGroup Bootstrap] - Curso de Bootstrap - Aula 19

e amassada Professor brigou tanto para nos cursos de multi Strap elogios nós vamos aprender a classes para formatação de list groups para aula então pessoal vamos lá já tô com um código pronto aqui são duas listas dá uma lista utilizando o o l e lista não-ordenada eu uso deste item e outra lista aqui com o link sem utilizando uma forma estrutura padrão de divi né como contém né e os links aqui todo esse código resulta nessa página que a nossa lista não-ordenada e aqui os nossos links vamos transformar tudo isso em list groups Bora lá

vamos ver as possibilidades as classes que a gente tem nada muito difícil não olha só dentro do container nós vamos ter que utilizar uma classe para transformar esse grupo é um lixo de Globo em cada item nós vamos ter que utilizar uma ou a transformar aquele elemento em Um item do list group Beleza então no container eu vou colocar aqui é o list list group Beleza agora no elemento da lista eu vou colocar o list grow e tem deste bloco item Essa é estrutura básica do list Globo Independente se é 1l aqui ou se é

uma estrutura com links Olha só eu vou fazer a mesma coisa aqui tá vamos colocar essa esse contém né que sendo 1 STE bro e agora nós vamos ver que nós temos duas listas eu vou colocar um BR aqui inicialmente só para dar um espaço entre uma lista e a outra dá para gente ver que nós temos duas listas diferentes tá vendo essa aqui é a lista com l e essa que a lista com os links obviamente a lista dos e ela é navegável certo eu não vou navegar aqui porque eu coloquei oh H oh

oh h f com quadrado com a hashtag então a gente não vai sair dessa página aqui beleza bom que mais Quais são as outras classes agora que nós podemos compor aqui o nosso list-group nós podemos usar é o Active desabou Beleza se eu quiser ativar alguma que eu marcar Como ativa aqui ó eu coloco um Active ele vai receber aquela a formatação em destaque né não não salvei era aí é tive para pouco errado né É tive salva atualiza aqui ó tá vendo o ativado fica em destaque dos outros e e podemos fazer aquele mesmo

esquema que nós vamos lá com a paginação para ele destacando né mas deixar destacar somente o que foi clicado tá o script de nós já vimos lá naquela naquela hora paginação é uma base beleza mas tem outras classes eu desenvolvi mesma coisa tem outras classes aqui que nós podemos utilizar por exemplo ou list broker e STE grow item Action list-group-item-action não salvar aqui aplicar em todos vai colocar aqui também tá tudo bonitinho aqui tudo com Action vai fazer essa ação aqui ó salva a pode eu coloco o mouse em cima dele eu não sei se

vai dar para ver aí no vídeo mas ele fica num destaque tá vendo ele fica numa corzinha de destaque eu ver se a gente colocar uma corra aqui ele a gente consiga ver com com mais clareza por exemplo Vamos colocar aqui é um Black Brother primary em todos aqui o teclado primeirinho atualizando te ver e não me deu não na verdade que está mudando aqui ó mas acho que também não vai dar para ver no vídeo acordo textinho aqui tá ficando um pouco mais clara tá vendo isso é por causa do lixo broto e itens

é que tive é que tem não né Action e outra possibilidade que a gente tem é de transformar que eu tirar o PG aqui que não deu muito bonitinha ali pode deixar né se você quiser deixar ele de outra pouco mas eu vou tirar aqui porque não deu muito efeito no que eu queria mostrar não mas nós podemos configurar o lixo grupo também como horizontal tá vendo que por padrão ele é vertical e se ele quiser ele na horizontal tem como tem tem como basta eu vim aqui ó e colocar um list grow horizontal beleza

atualiza olha aqui ó agora esse grupo aqui está na horizontal e esse aqui continua e este canal para de Bacana gente os legal e muito fácil isso né então a pensando aqui nós usamos o begê né para cor mas tem as coisas próprias do list group então listing o groping a list colocar aqui a bro peão ah e tem e tem lá dentro darkflight Premiere colocar primarine seguir i e colocar primeiro em todos aqui ó salva aí sim ele vai ficar da porta agora a gente vê o Edson tá vendo eu que tinha colocado o

begê né então com a cor dele a gente visualiza agora mais facilmente o Action em ação e a gente pode usar as outras cores né usei primary mas aqui ó secador e aí vamos lá nesse outro aqui um Light primeiros séculos sexys sexys aqui atualiza mesmo cada um com uma corzinha agora de fundo ali bacana né E aí agora a gente pode usando a criatividade para ir misturando as coisas aqui olha só que bacana nesse aqui ó nesse aqui no link pode ser deixe o ou nas outras de.li enfim não sei qualquer um que a

gente quiser nesse do link aqui e eu não vou fazer nele não porque eu diria que tem um container aqui com o list-group dentro desse container O link tá eu vou fazer nesse aqui ó eu vou tirar eu vou fazer até o seguinte vou colocar o horizontal no link vou deixar isso aqui vertical mesmo tá vamo mudar o cenário aqui também e aqui eu vou colocar é o bad lembra do Bate aqui ó tem o texto eu vou abrir um span span Beleza vou colocar um númerozinho aí sei lá uma letra que represente alguma ação

ou será a gente tá falando dos cursos aqui número de aulas por exemplo esse aqui é aula 19 tá eu não lembro exatamente Quantas aulas nós temos no JavaScript nos ser mais mais eu não vou chutar aqui ó por exemplo será 120 javscript 80 em beleza e aqui eu vou formatar esse camarada aqui como o bad se lembrou do Bate da classe bate Vamos colocar essa classe aqui nos outros fãs atualiza aqui ó tá aqui do lado esquerdo tá mas vamos melhorar esse Bardi aqui na cidade muito legal ainda não ó vamos colocar mais classes

aqui vamos mudar a cor aquele tá usando Premiere Então vamos lá bg-primary Premiere esse aqui tá no século ou então usar PG Século IV esse que tá no então usar bg-success e sexys e vou colocar ele é redondinho também tá ovaladas lembram como é que faz ovalado João de rands piu né lembre disso piu piu piu e agora eu quero jogar ele para o outro lado que ele vai ficar do ladinho aqui ainda também eu quero jogar ele para cá como que eu faço para jogar ele para cá muito simples vamos trabalhar com alinhamento aqui

ó do container desse camarada que é o ele é o spanta dentro do ele então contém né ele no container vão dar um just fine conta dele no descoberto em vai jogar um lado outra outro aqui ó copia cola cola salva atualiza não jogou um lado do outro vamos ver uma classe melhor o seu assim é Deus que faz contente é de display Flex né então faltou o display Flex B Flex é de Flex e B Flex vamos ver atualiza a agora assim ó eu vou ir lá para o outro lado vendo É porquê Dias

te faz pronta a gente ia lá em itens é tudo de display Flex né então display tem que você pegue flex-container funcionamento tem que ser Flex Beleza então tá aí ó aprendemos sobre librow as classes para contratação e criação de listbox espero esse negócio dado até a próxima ao forte abraço e tchau tchau tchau E aí [Música] E aí