Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Malu Stecca

Template Bootstrap

Por , em Desenvolvimento frontend

Recommended Posts

Malu Stecca    0

Malu Stecca
Postado

Boa tarde galera!

 

Queria fazer uma pergunta de iniciante.....

 

Estou aprendendo muita coisa praticamente sozinha....

 

Então, gostaria de usar um template carousel do bootstrap, mas eu não sei o que estou fazendo de errado na hora de chamar o arquivo....

 

Estou usando o sublime 2...

 

 

Alguém pode dar um help?

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Malu Stecca    0

Malu Stecca
Postado

Gente eu estou seguindo uma vídeo aula, então estou fazendo tudo o q o cara esta explicando....

 

Tem uma maneira de me explicar com base nisso aqui.....?

 

Comecei assim....

 

 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="description" content="EPM Pontes Rolantes" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>EPM Pontes Rolantes</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="" href="style.css"/>
</head>
<body>
<div class="container-fluid"/>
<div class "row-fluid">
<div class ="span8 cor1">SPAN8</div>
<div class ="span4 cor2">SPAN4</div>
<script type="text/javascript" src "js/bootstrap.js"></script>
</body>

 

Desculpe a ignorância da pergunta....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Asskiller    4

Asskiller
Postado

http://www.w3c.br/cursos/html5/conteudo/capitulo3.html

Melhorando sua estrutura

Use Notepad++

<!DOCTYPE HTML>
<html lang="pt-br"> 
<head>
    <meta charset="utf-8" />
    <meta name="description" content="EPM Pontes Rolantes" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css"/>
     <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" type="" href="style.css"/>
<script type="text/javascript" src "js/bootstrap.js"></script>
<title>EPM Pontes Rolantes</title>


</head>
<body>




<div class="container-fluid"/>
<div class "row-fluid">
<div class ="span8 cor1">SPAN8</div>
<div class ="span4 cor2">SPAN4</div>


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Olá Malu, tudo bem?

 

Segue um exemplo para analisar e fazer suas adaptações.

<!DOCTYPE HTML>
<html lang="pt-br"> 
<head>
<meta charset="utf-8" />
<meta name="description" content="EPM Pontes Rolantes" />

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">


<title>EPM Pontes Rolantes</title>
</head>

<body>

<!-- Carousel -->
    <div id="myCarousel" class="carousel slide">
    
      <div class="carousel-inner">
      
        <div class="item active">
          <img src="img/01.jpg" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>Titulo 01</h1>
              <p class="lead">Texto da Imagem 01</p>
              <a class="btn btn-large btn-primary" href="#">Leia mais...</a>
            </div>
          </div>
        </div>
        
        <div class="item">
          <img src="img/02.jpg" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>Titulo 02</h1>
              <p class="lead">Texto da Imagem 02</p>
              <a class="btn btn-large btn-primary" href="#">Leia mais...</a>
            </div>
          </div>
        </div>
        
        <div class="item">
          <img src="img/03.jpg" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>Titulo 03</h1>
              <p class="lead">Texto da Imagem 03</p>
              <a class="btn btn-large btn-primary" href="#">Leia mais...</a>
            </div>
          </div>
        </div>
        
      </div><!-- /carousel-inner -->
      
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
      
    </div><!-- /myCarousel -->
<!-- /Carousel -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://globocom.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://globocom.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script>
      !function ($) {
        $(function(){
          $('#myCarousel').carousel()
        })
      }(window.jQuery)
</script>

</body>
</html>

Não sei como está seu CSS "style.css" por isso estou postando ele tb.

 

 

style.css"

<style>

    /* GLOBAL STYLES
    -------------------------------------------------- */
    /* Padding below the footer and lighter body text */

    body {
      padding-bottom: 40px;
      color: #5a5a5a;
    }


   /* Carousel base class */
    .carousel {
      margin-bottom: 60px;
    }

    .carousel .container {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .carousel-control {
      background-color: transparent;
      border: 0;
      font-size: 120px;
      margin-top: 0;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }

    .carousel .item {
      height: 500px;
    }
    .carousel img {
      min-width: 100%;
      height: 500px;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 550px;
      padding: 0 20px;
      margin-bottom: 100px;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
    .carousel-caption .btn {
      margin-top: 10px;
    }



    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
        height: 500px;
      }

    }


    @media (max-width: 767px) {

      .carousel {
        ;
        margin-right: -20px;
      }
      .carousel .container {

      }
      .carousel .item {
        height: 300px;
      }
      .carousel img {
        height: 300px;
      }
      .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-bottom: 40px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }

    }
</style>

Bem, é isso.

 

 

Qualquer problema posso passar todos os arquivos, basta me passar seu e-mail via MP, que mando eles para você.

 

 

Espero ter ajudado.

 

vlw.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hackmbh    0

hackmbh
Postado

Olá Malu!

 

O que não dá certo? Ele não aparece no lugar da imagem, não aparece os controllers? Aparece, mas não desliza?

 

Este modelo que você pegou, no Start Bootstrap tem uma que seria algo parecido com o que você quer e ainda mais completo.

 

http://startbootstrap.com/template-overviews/modern-business

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Oi Malu,

 

Mandei em anexo os arquivos para que vc analise e ver se é mais ou menos isso que deseja.

 

até ++

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Oi Malu, que bom que deu certo então.

 

Precisando estamos ai.

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito