Bootstrap

[Getho 0]

Salve rapaziada, me digam uma coisa como eu faço para cria um design responsivo apenas para dispositivos moveis.

Por exemplo usando as @queries::

/* Desktop maiores */
@media (min-width: 1200px) { ... }

/* tables em formato porta retrato até os desktos no formato paisagem */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* dispositivo em paisagem até os tablets em formato porta-retrato */
@media (max-width: 767px) { ... }

/* dispositivo no formato paisagem e abaixos */
@media (max-width: 480px) { ... }

Eu quero fazer assim: criar um sistema padrão pra desktop, porém se for acessado por aparelhos moveis redimensione ficando resposive.
Quero carregar apenas o CSS normal. E ao ser acessado por dipositivos moveis carregue o css dos arquivos bootstrap. Tem como fazer isso ? ou eu posso simplesmente criar com bootstrap e rodar e quaquer dispositivo, falo porque é mais dificil adaptar o css do bootstrap para funcionar normalmente em Desktop.

[William Bruno 1501]

Simplesmente crie com o seu framework e rode em qualquer dispositivo.

[Getho 0]

Simplesmente crie com o seu framework e rode em qualquer dispositivo.

 

Voce me indicaria o Bootstrap mesmo ?

Quero fazer está tela responsiva .

[Sebastiao Marcos 3]

Getho, não é dificil fazer isso p desktop e mobile, você só precisa verificar direitinho a documentação do bootstrap, muito conhecido hoje por milhares de pessoas o bootstrap do twitter, tem vantagens que particularmente acho incrível, como a customização de seus css e deixar o sistema/web com a cara que você quer, não fazendo um padrao de interfaces universal, veja na página : http://getbootstrap.com/css/#grid-example-mixed -> isso te levará para mobile and desktop, lá você vai entender como funciona o grid system do bs perfeitamente, repare no uso das classes, col-md-12, col-xs-12, col-lg-8.

 

 

Atenciosamente Marcos

[Getho 0]

Getho, não é dificil fazer isso p desktop e mobile, você só precisa verificar direitinho a documentação do bootstrap, muito conhecido hoje por milhares de pessoas o bootstrap do twitter, tem vantagens que particularmente acho incrível, como a customização de seus css e deixar o sistema/web com a cara que você quer, não fazendo um padrao de interfaces universal, veja na página : http://getbootstrap.com/css/#grid-example-mixed -> isso te levará para mobile and desktop, lá você vai entender como funciona o grid system do bs perfeitamente, repare no uso das classes, col-md-12, col-xs-12, col-lg-8.

 

 

Atenciosamente Marcos

Legal estou tentadno fazer com base na documentação, por exemplo no meu caso como preciso fazer está tela da imagem se eu usar

<div class="col-md-10">.col-md-10</div>

e uma segunda pra fazer o dasboard com

<div class="col-md-2">.col-md-2</div>

ele fica muito grande, se usar 11 e 1 tambem fica grande, e olhando na documentação não encontrei como fazer a edição do css direto no documento (se eu usar !important para fazer a identificação da leitura ele não fica responsivo porque é uma serie de arquivo que altera).

 

Me desculpe a minha ignorância vc saberia de unde eu poderia encontrar um material bom sobre bootstrap referente a isso, ou na documentação eu encontro, porque talves por desculdo meu, fiz a leitura e não econtrei como fazer isso.

Qual a dica que vc me daria pra fazer a tela da imagem, 100% responsiva/adaptavel.

[victorqueiroz 34]

Tenha esse exemplo como base:

 

HTML:

<div class="col-md-5">
 <!-- CONTEÚDO E TAL -->
   <div class="tabela">
       <!-- TABELA -- >
   </div>
   <div class="menu">
         <!-- MENU -->
   </div>
</div>

Na classe "TABELA" você define uma largura em %, a mesma coisa para a classe"MENU", coloca o float left na class "TABELA", pois quando a tela diminuir a classe col-md-5 irá diminuir também proporcionalmente com as classes filhas, se ficar algo "desalinhado", "conserte na mão"...

/* Desktop maiores */
@media (min-width: 1200px) { ... }

/* tables em formato porta retrato até os desktos no formato paisagem */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* dispositivo em paisagem até os tablets em formato porta-retrato */
@media (max-width: 767px) { ... }

/* dispositivo no formato paisagem e abaixos */
@media (max-width: 480px) { ... }