Jump to content

Site Bootstrap


Rickybalbas
 Share

Recommended Posts

Rickybalbas

Boa noite, tenho um problema neste simples código de bootstrap, quando abro ele no google, não aparece nada.

 

<!DOCTYPE html> 
<html lang="en">

<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Meu primeiro HTML com Bootstrap/title> 
    <link rel="shortcut icon" href="img/Circle-icons-computer.svg.png" type="image/x-icon"> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/exemplo.css">
    <link rel="stylesheet" href="libs/fontawesome-free-5.13.0-web/css/all.css" 
</head>

<body>
    <div class=" jumbotron jumbotron-fluid bg-header">
        <h1 class="display-4 text-center text-white text-header">adrianocastro</h1>
        <p class="lead text-center text-white">Desenvolvimento & Design</p> 
    <div>

<nav class="navbar navbar-expand-lg navbar-dark bg-gradient mt-n5"> 
    <a href="index.html" class="navbar-brand">
        <img src="img/Circle-icons-computer.svg.png" alt="Nosso Logo" width="50" height="50">
    </a>
<button class="navbar-toggler" data-target="#menu" data-toggle="collapse" aria-controls="menu" 
aria-expanded="false" aria-label="Meu menu">
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div id="menu" class="collapse navbar-collapse"> 
        <ul class="navbar-nav mr-auto"> 
            <li class="nav-item">
                <a class="nav-link text-white" href="#">Home</a>
            </li> 
            <li class="nav-item">
                <a class="nav-link text-white" href="sobre.html">Sobre</a> 
            </li> 
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white" href="#" id="services" role="button" data-toggle="dropdown" 
                aria-haspopup="true" aria-expanded="false">
                Serviços
                </a> 
                <div class="dropdown-menu" aria-labelledby="services">
                    <a class="dropdown-item" href="#">Desenvolvimento de Aplicações Web</a> 
                    <a class="dropdown-item" href="#">Identidade Visual</a>
                    <a class="dropdown-item" href="#">Marketing Digital</a> 
                </div> 
            </li> 
            <li class="nav-item">
                <a class="nav-link text-white" href="#">Contato</a>
            </li>
        </ul>
    </div> 
</nav>
<div class="container mt-3"> 
    <div class="row"> 
        <div class="col-12 col-si-6 col-md-6">
            <img src="img/designer-gráfico 570645106.jpg" class="img-fluid rounded" alt="Designer Gráfico"> 
        </div> 
    <div class="col-12 col-sm-6 col-md-6">
    <h1 class="text-danger text-justify">Lorem ipsum, dolor sit amet consec 
    <p class="text-justify text-dark">Lorem ipsum dolor, sit amet consectet 
    ducimus, aspernatur molestias neque ipsam mollitia quia libero distinct 
    cumque. Reiciendis, ipsa repudiandae. Sapiente impedit,
        natus inventore suscipit cum eveniet ab, maiores vero itaque blandi
        deserunt vitae! Saepe quia </p> 
    </div> 
</div>
<div class="dropdown-dividerdiv>

<div class="row mt-2"> 
    <div class="col-12 col-sm-9 col-md-9">
        <h2 class="text-justify text-danger">Substitulo</h2> 
        <p class="text-justify text-dark">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dolor ex animi 
        blanditiis, doloribus vel quae velit delectus suscipit reprehenderit possimus deserunt error alias similique
        cupiditate labore ipsum incidunt inventore?</p>
        </div> 
        <div class="col-12 col-sm-3 col-md-3 d-none d-sm-block">
            <img class="img-fluid" src="img/designer-gráfico_570645106.jpg" alt="Noticia 1"> </div> 
        </div>

<div class="dropdown-divider"></div>

<div class="row mt-2"> 
    <div class="col-12 col-sm-3 col-md-3 d-none d-sm-block">
        <img class="img-fluid" src="img/designer-gráfico_570645106.jpg" alt="NO 
    </div> 
    <div class="col-12 col-sm-9 col-md-9">
        <h2 class="text-justify text-danger">Substitulo</h2>
        <p class="text-justify text-dark">Lorem ipsum dolor sit amet consectetu 
        blanditiis, doloribus vel quae velit delectus suscipit reprehenderit po
        cupiditate labore ipsum incidunt inventore?</p> 
    </div>
</div>
</div>

<div class="container-fluid bg-info mt-3"> 
    <div class="row"> 
        <div class="col-12">
            <p class="text-center text-white mt-2">Todos os direitos reservados.</p> 
            <p class="text-center text-white">Siga-nos em nossas redes sociais</p> 
            <p class="text-center">
                <i class="fas fa-user"></i>
            </p>
        </div> 
    </div> 
    <div class="row"> 
        <div class="col-12"> 
            <p class="text-right text-white">
                Desenvolvido por: adrianoCastro
            </p> 
        </div> 
    </div> </div>


    <script src="js/jquery-3.4.1.js"></script> 
    <script src="js/bootstrap.js"></script>
    <script src="libs/fontawesome-free-5.13.0-web/js/fontawesome.js"></script> 
</body>

</html>

 

Edited by M6
Formatação
Link to comment
Share on other sites

viva,

tens um problema na tag <title></title>:

<title>Meu primeiro HTML com Bootstrap/title>

<title>Meu primeiro HTML com Bootstrap</title>

cps,

  • Vote 1
Link to comment
Share on other sites

Cerzedelo

Em primeiro lugar verifique se os caminhos para os ficheiros css e js do boostrap estão correctos.

Em segundo verifique se tem todas as tags devidamente fechadas.

Em terceiro abra as ferramentas de programador do seu browser, normalmente tecla F12, e analise os erros que ai são indicados, pois transmitem a informação onde poderá estar o problema.

  • Vote 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.