Framework Bootstrap e jQuery

7 respostas
D

Olá pessoal, alguem ja usou/utiliza o bootstrap [url]http://twitter.github.com/bootstrap/components.html[/url] ?
Estou querendo iniciar um projeto pequeno so pra aprendizado mesmo utilizando este mais servlets para um cadastro/consultas de clientes.
Sou iniciante em jquery tambem, pois nessa semana mais precisamente em 4 dias eu li o livro (Jquery- A biblioteca do programador Javascript) até o capitulo 7 para entender um pouco mais sobre jquery e realmente aprendi.
Mas, eis minha dúvida, muito simples, não estou conseguindo utilizar o js do bootstrap, não consigo fazer funcionar um simples modal como mostra no exemplo da pagina.
Utilizei o mesmo exemplo da pagina

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste Bootstrap</title>

<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-modal.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>

</head>

<body>
	<script>
   	$(document).ready(function() {
         $('#botao1').click(function() {
				$("#myModal").modal({
					keyboard: false
					});
				
			});
      });
   </script>
   
<button id="botao1" class="btn-danger" value="">teste</button>  

    <div class="modal hide" id="myModal">
    	<div class="modal-header">
    		<a class="close" data-dismiss="modal">×</a>
    		<h3>Modal header</h3>
    	</div>
    <div class="modal-body">
	  	<p>One fine body?</p>
    </div>
    <div class="modal-footer">
       <a href="#" class="btn btn-primary">Save changes</a>
       <a href="#" class="btn">Close</a>
    </div>
    </div>
</body>
</html>

7 Respostas

A

Eu já usei o twitter bootstrap em alguns projetos e gostei muito, inclusive estou usando em um projeto pessoal que estou desenvolvendo.
Com relação ao seu codigo, coloque a declaração do jquery antes da declaração do bootstrap, pois este depende do jquery.

Ficaria assim:

<link rel="stylesheet" href="css/bootstrap.css" />  
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>  
<script type="text/javascript" src="js/bootstrap.js"></script>  
<script type="text/javascript" src="js/bootstrap-modal.js"></script>
R

Eu que postei isso. ;)
Estranho, o fórum está aceitando posts sem autenticação.

Anonymous:
Eu já usei o twitter bootstrap em alguns projetos e gostei muito, inclusive estou usando em um projeto pessoal que estou desenvolvendo. Com relação ao seu codigo, coloque a declaração do jquery antes da declaração do bootstrap, pois este depende do jquery.

Ficaria assim:

<link rel="stylesheet" href="css/bootstrap.css" />  
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>  
<script type="text/javascript" src="js/bootstrap.js"></script>  
<script type="text/javascript" src="js/bootstrap-modal.js"></script>
C

Tem um detalhezinho que talvez possa te ajudar, mas não tem nada a ver com bootstrap e jquery e sim o padrão DocType que vc esta usando…

Você esta usando o que é padrão para XHTML

até ai blz, o único problema é que este padrão é muito rigoroso e não aceita a tag sem declarar seu type e no seu caso você esta executando JQuery sem ele:

Errado:

<script>
      .... codigo JQuery / Bootstrap

</script>

Certo:

<script type="text/javascript">
      .... codigo JQuery / Bootstrap

</script>

Ou você muda o doctype para formato HTML5 pelo qual não tem essas frescuras com tags ou você segue corretamente o padrão XHTML, espero que isso ajude, pois o seu código esta perfeito sem nenhum problema.

D

Pessoal,
muito obrigado mesmo pela atenção, realmente deu certo, obrigado pelas dicas do jquery antes do bootstrap (eu não sabia, mas realmente tem lógica pois o bootstrap utiliza o jquery). Obrigado pela dica do doctype. Só por causa dessa dúvda estudo 250 paginas sobre jquery nesse carnaval rsrsrsrs, e ainda sim não tinha dado certo. Novamente obrigado.

D
rlazoti:
Eu que postei isso. ;) Estranho, o fórum está aceitando posts sem autenticação.
Anonymous:
Eu já usei o twitter bootstrap em alguns projetos e gostei muito, inclusive estou usando em um projeto pessoal que estou desenvolvendo. Com relação ao seu codigo, coloque a declaração do jquery antes da declaração do bootstrap, pois este depende do jquery.

Ficaria assim:

<link rel="stylesheet" href="css/bootstrap.css" />  
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>  
<script type="text/javascript" src="js/bootstrap.js"></script>  
<script type="text/javascript" src="js/bootstrap-modal.js"></script>

ola @rlazoti,
eu tenho muitas duvidas referente a utilização desse framework com java.
Vc disse uqe esta usando ele num projeto pessoal. Vc utiliza ele com mvc? se sim como que vc faz pra utiliza-lo no seu jsp (scripts) como fica a arquitetura e tal...

C

Cara se vc esta estudando JQuery e tem um ingles aceitavel te recomendo ver as videos aula de JQuery Tuts+ que é de graça e ensina do básico ao expert!

Sinceramente na primeira aula eu achava que manjava de JQuery mas num manjava nada, tem muitas técnicas e boas práticas que não se encontra nas docs do JQuery.

R

Estou usando vraptor como mvc e tiles para templates.
A utilização no jsp não tem segredo e é parecido com o seu exemplo, afinal o twitter bootstrap nada mais é do que css e javascript. :wink:

Criado 26 de fevereiro de 2012
Ultima resposta 28 de fev. de 2012
Respostas 7
Participantes 4