Please enable JavaScript.
Coggle requires JavaScript to display documents.
Bootstrap, Carrossel, Textos, Cards, Modal, Bootstrap, Como instalar?,…
Bootstrap
Como adicionar as interações como nav, botão e etc:
No Bootstrap, tem um botão que você pode procurar o que colocar.
Para a sua nav ficar fixada, adicionar a classe fixed-top.
Remover o fixed top, se não o carrosel vai parar debaixo da nav.
Para ajeitar o tamanho das imagens, coloque uma class de mesmo nome nelas e ligue a um css. Ajeitar com height e usar o object-fit: cover; para ajeita-la no container. object-position: (x) (y); eixos para mover o elemento e posiciona-lo.
Remover Li dependendo da quantidade de imagens que vai ter no seu carrossel, para tirar as barrinhas debaixo da imagem.
Tempo dos slides, colocar data-interval= "(Tempo desejado)" dentro da div que tem carousel slide.
Adicionando fontes do google fonts, vá até a fonte desejada, copia o link e cole na head da sua página html. Nas tags de texto desejada, crie uma classe e no css cole sua font family.
Modificando o tamanho da div para o texto ficar centralizado. Procurar height no bootstrap, ver a class desejada e jogar na div filha.
Para aumentar o tamanho da fonte, procurar typography, ir até as displays, copiar uma desejada e colar na classe de texto desejada.
Para alinhar o texto desejado, procurar no bootstrap text alignment, copiar o alinhamento desejado e colocar na class desejada.
O bootstrap ajeita ajeita os textos de acordo com as tags, se for do tipo <p> vai diminuir o tamanho e etc.
Para colocar uma cor desejada, você pode procurar por colors e colocar umas cores de lá. Caso não tenha, pode criar uma classe no css com a cor especifica.
Para dar espaçamento, separar, procuramos no bootstrap por spacing e jogamos na classe como no exemplo pt-3.
Para mudar a cor do background do botão, criar uma class mudando o background-color e adiciona na class do botão. Para remover a borda azul do botão, apagar btn-primary
[Para mudar a cor da borda que engloba o card, criar uma class e adicionar o border-color. Já jogar no lado da class card.
Preenchendo Card
Imagens desproporcionadas? Basta criar uma classe no seu css, ajeitar com height, object-position(caso não estejam com a imagem posicionadas) e object-fit: cover;
Logo jogar essa classe na tag imagem do seu card.
Adicione a classe container no seu card e crie uma div com a classe row.
Após, adicione o col em cada parte diferente. E como funciona? O número no final é de quantos cards você que ele preencha na sua tela, o tamanho.
Caso tenha borda interna, utilize a classe de padding e margin do Bootstrap, para dar um espaçamento.
Para alinhar os seus cards ao centro, basta colocar a classe ao div debaixo do pai.
Para adicionar um background e preencher todo o espaço do lado de fora dos cards. Adiciona o colors ou cria uma classe de cor especifica, trocar container por container-fluid.
Tirar o style da tag e jogar no css criando uma classe, jogando na tag do seu card.
Caso você posicione e o card estique, coloque max-widht na frente da propriedade da classe acima. Ai o Bootstrap não vai esticar na largura máxima de 18.
Para adicionar o seu modal a uma coisa especifica, você deve primeiro copiar o data-toggle e o data-target do botão, apaga-lo e conectar no que você quiser. Depois mudar o nome do target sem tirar a tralha(#), e o id do modal.
Para adicionar as coisas ao seu modal como forms e etc, só colar/escrever as tags desejadas no lugar dos ...(três pontinhos).
Deixar html semântico mudando as tags com header, main, article, dialog, footer e etc.
Bootstrap é um framework web com código-fonte aberto para desenvolvimento de componentes de interface e front-end para sites e aplicações web usando HTML, CSS e JavaScript, baseado em modelos de design para a tipografia, melhorando a experiência do usuário em um site amigável e responsivo.
Para subscrever a classe css do Bootstrap para a nossa, devemos usar o !important.
Exemplo: color: darkred!important;
Como instalar?
Você vai entrar no site do Bootstrap e clicar no botão "Get started".
Assim que entrar, adiciona o css e o js na sua página.
Para adicionar flexbox a sua página com Bootstrap, procure por flex. Copie o que está escrito na class desejada e coloque na class do elemento pai no seu código.
HTML Semântico
Para deixar o HTML semântico, é trocar as tags divs para tags que dá para identificar. Como exemplo usar figure,article, header e etc.
Footer
**<footer class="bg-secondary p-3"><p class="text-light m-0 text-center">contato: <a class="text-light" href="mailto:email@frutafruto.com.br">email@frutafruto.com.br</a></p>
</footer**