seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^

Você não está conectado. Conecte-se ou registre-se

 » Programação Web » HTML / XML / CSS » [tutorial] basico do bootstrap

[tutorial] basico do bootstrap

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [tutorial] basico do bootstrap em Sex Mar 29, 2013 10:46 am

Kodo no Kami

avatar
master
master
bom galera nesse tutorial vou ensinar como usar o bootstrap na sua pagina, o bootstrap e um framework grafico para paginas html para usar ele basta baixa-lo (tambem e necessario o jquery)

[Você precisa estar registrado e conectado para ver este link.]
[Você precisa estar registrado e conectado para ver este link.]

depois de baixar o bootstrap extrai ele, vai ter 3 pastas css, js, e img, coloque esses arquivos perto da sua pagina html (no meu caso eu coloquei a pasta toda dentro de uma pasta chamada biblioteca (/biblioteca/bootstrap/) e o jquery eu coloquei dentro da pasta biblioteca (/biblioteca/jquery.js), agora agente chama eles na pagina (o arquivo jquery.js, o bootstrap.css e bootstrap.js)

Código:
<html>
<head>
   <!-- incluir o jquery -->
   <script type="text/javascript" src="biblioteca/jquery.js"></script>

   <!-- incluir o js/bootstrap.js e css/bootstrap.css do bootstrap -->
   <script type="text/javascript" src="biblioteca/bootstrap/js/bootstrap.js"></script>
   <link rel="stylesheet" type="text/css" href="biblioteca/bootstrap/css/bootstrap.css">
</head>
<body>
</body>
</html>

para usar basta usar o bootstrap basta colocar determinadas class nos atributos, por exemplo um botao eu coloquei a class="btn" e ele mudo

Código:
<html>
<head>
   <!-- incluir o jquery -->
   <script type="text/javascript" src="biblioteca/jquery.js"></script>

   <!-- incluir o js/bootstrap.js e css/bootstrap.css do bootstrap -->
   <script type="text/javascript" src="biblioteca/bootstrap/js/bootstrap.js"></script>
   <link rel="stylesheet" type="text/css" href="biblioteca/bootstrap/css/bootstrap.css">
</head>
<body>
   <input type="button" class="btn" value="fts">
</body>
</html>

tambem podemos colocar "btn btn-inverse" ai o botao ficaria com a cor preta,"btn btn-info" ficaria azul, "btn btn-warning" ficaria amarelo, "btn btn-danger" ficaria vermelho, "btn btn-default" ficaria cor padrao

Código:
<html>
<head>
   <!-- incluir o jquery -->
   <script type="text/javascript" src="biblioteca/jquery.js"></script>

   <!-- incluir o js/bootstrap.js e css/bootstrap.css do bootstrap -->
   <script type="text/javascript" src="biblioteca/bootstrap/js/bootstrap.js"></script>
   <link rel="stylesheet" type="text/css" href="biblioteca/bootstrap/css/bootstrap.css">
</head>
<body>
   <input type="button" class="btn btn-inverse" value="fts">
   <input type="button" class="btn btn-info" value="fts">
   <input type="button" class="btn btn-warning" value="fts">
   <input type="button" class="btn btn-danger" value="fts">
   <input type="button" class="btn btn-default" value="fts">
</body>
</html>

alguns input usa o mesmo nome na class por exemplo text ou password

Código:
<html>
<head>
   <!-- incluir o jquery -->
   <script type="text/javascript" src="biblioteca/jquery.js"></script>

   <!-- incluir o js/bootstrap.js e css/bootstrap.css do bootstrap -->
   <script type="text/javascript" src="biblioteca/bootstrap/js/bootstrap.js"></script>
   <link rel="stylesheet" type="text/css" href="biblioteca/bootstrap/css/bootstrap.css">
</head>
<body>
   <input type="text" class="text">
   <input type="password" class="password">
</body>
</html>

bom galera isso e so o basico com que se pode fazer com bootstrap ^^

by hacker fts315


_________________ASSINATURA_________________
[Você precisa estar registrado e conectado para ver esta imagem.]
[Você precisa estar registrado e conectado para ver esta imagem.]

Contato:
Spoiler:

Contato:
Facebook: [Você precisa estar registrado e conectado para ver este link.]
Skype: hackerfts315
http://endoffile.umforum.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum