Como remover resources responsivos no Twitter Bootstrap 3?

Desde o Bootstrap 3, não há mais arquivos separados para folhas de estilo responsivas e padrão. Então, como posso remover facilmente os resources responsivos?

Para desativar os estilos que não são da área de trabalho, basta alterar 4 linhas de código no arquivo variables.less. Defina os pontos de interrupção de largura de canvas no arquivo variables.less como este:

 // Pontos de interrupção de consultas de mídia
 // ------------------------------------------------ -

 // Tela pequena extra / telefone
 // Nota: Deprecado @ screen-xs e @ screen-phone a partir da v3.0.1
 @ screen-xs: 1px;
 @ screen-xs-min: @ screen-xs;
 @ screen-phone: @ screen-xs-min;

 // Tela pequena / tablet
 // Nota: Deprecado @ screen-sm e @ screen-tablet a partir da v3.0.1
 @ screen-sm: 2px;
 @ screen-sm-min: @ screen-sm;
 @ screen-tablet: @ screen-sm-min;

 // Medium screen / desktop
 // Nota: Deprecado @ screen-md e @ screen-desktop a partir da v3.0.1
 @ screen-md: 3px;
 @ screen-md-min: @ canvas-md;
 @ screen-desktop: @ screen-md-min;

 // Tela grande / ampla área de trabalho
 // Nota: Deprecado @ screen-lg e @ screen-lg-desktop a partir da v3.0.1
 @ screen-lg: 9999px;
 @ screen-lg-min: @ screen-lg;
 @ screen-lg-desktop: @ screen-lg-min;

Isso define a largura mínima na consulta de mídia de estilo de área de trabalho inferior de modo que se aplique a todas as larguras de canvas. Graças a 2calledchaos para a melhoria! Alguns estilos básicos são definidos nos estilos de dispositivos móveis, por isso precisamos incluí-los.

Edit: chris observa que você pode definir essas variables ​​no compilador menos on-line no site de bootstrap

Isso é explicado nos documentos oficiais de lançamento do Bootstrap 3 :

Etapas para desativar as vistas responsivas

Para desativar os resources responsivos, siga estas etapas. Veja-o em ação no modelo modificado abaixo.

  1. Remova (ou simplesmente não adicione) a viewport mencionada nos documentos CSS
  2. Remova a largura máxima no .container para todas as camadas da grade com max-width: none! Important; e defina uma largura regular como largura: 970px ;. Certifique-se de que isso vem depois do Bootstrap CSS padrão. Você pode, opcionalmente, evitar o! Importante com consultas de mídia ou algum seletor-fu.
  3. Se estiver usando navbars, desfaça todo o comportamento de expansão e colapso da barra de navegação (isso é muito para mostrar aqui, então espreite o exemplo).
  4. Para layouts de grade, faça uso de classs .col-xs- * além ou no lugar das médias / grandes. Não se preocupe, a grade de dispositivos extra-pequenos é dimensionada para todas as resoluções, então você está definido lá.

Você ainda precisará do Respond.js para o IE8 (já que nossas consultas de mídia ainda estão lá e precisam ser coletadas). Isso apenas desativa o “site móvel” do Bootstrap.

Veja também o exemplo em GetBootstrap.com/examples/non-responsive/

Eu só descobri ultimamente como é fácil fazer com que o seu bootstrap v3.1.1 não seja responsivo. Isso inclui navbars para não colapsar. Eu não sei se todo mundo sabe disso, mas eu gostaria de compartilhar isso.

Dois passos para um Bootsrap não-responsivo v3.1.1

Primeiro, crie um nome de arquivo css como não responsivo.css. Certifique-se de anexá-lo aos seus temas ou link logo após os arquivos css de bootstrap.

Em segundo lugar, cole este código no seu não-responsivo.css:

 /* Template-specific stuff * * Customizations just for the template; these are not necessary for anything * with disabling the responsiveness. */ /* Account for fixed navbar */ body { min-width: 970px; padding-top: 70px; padding-bottom: 30px; } /* Finesse the page header spacing */ .page-header { margin-bottom: 30px; } .page-header .lead { margin-bottom: 10px; } /* Non-responsive overrides * * Utilitze the following CSS to disable the responsive-ness of the container, * grid system, and navbar. */ /* Reset the container */ .container { width: 970px; max-width: none !important; } /* Demonstrate the grids */ .col-xs-4 { padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86,61,124,.15); border: 1px solid #ddd; border: 1px solid rgba(86,61,124,.2); } .container .navbar-header, .container .navbar-collapse { margin-right: 0; margin-left: 0; } /* Always float the navbar header */ .navbar-header { float: left; } /* Undo the collapsing navbar */ .navbar-collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-toggle { display: none; } .navbar-collapse { border-top: 0; } .navbar-brand { margin-left: -15px; } /* Always apply the floated nav */ .navbar-nav { float: left; margin: 0; } .navbar-nav > li { float: left; } .navbar-nav > li > a { padding: 15px; } /* Redeclare since we override the float above */ .navbar-nav.navbar-right { float: right; } /* Undo custom dropdowns */ .navbar .navbar-nav .open .dropdown-menu { position: absolute; float: left; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-width: 0 1px 1px; border-radius: 0 0 4px 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #333; } .navbar .navbar-nav .open .dropdown-menu > li > a:hover, .navbar .navbar-nav .open .dropdown-menu > li > a:focus, .navbar .navbar-nav .open .dropdown-menu > .active > a, .navbar .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar .navbar-nav .open .dropdown-menu > .active > a:focus { color: #fff !important; background-color: #428bca !important; } .navbar .navbar-nav .open .dropdown-menu > .disabled > a, .navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #999 !important; background-color: transparent !important; } 

Isso é tudo e aproveite .. ^^

Fonte: non-responsive.css do exemplo em getbootstrap.com .

Eu precisava remover completamente o recurso responsivo Bootstrap, acabei substituindo o comportamento com o seguinte trecho:

 .container { width: 960px !important; } @media (min-width: 1px) { .container { max-width: 940px; } .col-lg-1, .col-lg-2, [...] 

Snippet completo: https://gist.github.com/ivanminutillo/8557293

Fonte de: http://getbootstrap.com/getting-started/#disable-responsive

  1. Omita a janela de exibição mencionada nos documentos CSS
  2. Substitua a width no .container para cada camada de grade com uma única largura, por exemplo width: 970px !important; Certifique-se de que isso vem depois do Bootstrap CSS padrão. Você pode, opcionalmente, evitar o !important com consultas de mídia ou algum seletor-fu.
  3. Se estiver usando navbars, remova todo o comportamento de expansão e recolhimento da barra de navegação.
  4. Para layouts de grade, use .col-xs-* além ou no lugar das médias / grandes. Não se preocupe, a grade de dispositivos extra-pequenos é dimensionada para todas as resoluções.

Você pode fazer isso usando o CSS do Bootstrap 3 com resources não responsivos

https://github.com/bassjobsen/non-responsive-tb3

Se você quiser um site de tamanho fixo, isso deve ser bastante simples:

 // Override container sizes @container-sm: 700px; @container-md: 700px; @container-lg: 700px; // Fixate media queries to tablet view only (lower viewports set to 0px, desired one to 1px, and the higher to ~9999px) @screen-xs-min: 0px; @screen-sm-min: 1px; @screen-md-min: 9999px; @screen-lg-min: 9999px; // Disable responsive features such as navbar-collapse @grid-float-breakpoint: 1; 

Olhe para http://www.goo.gl/2SIOJj é um trabalho em andamento, mas pode ajudá-lo.

Eu uso cookie para definir se eu quero desktop ou versão responsiva. No rodapé da página você pode encontrar dois spans e no general.js é o script para lidar com os cliques.

  
Desktop
Mobile
function setMobDeskCookie(c_name, value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString()); document.cookie = c_name + "=" + c_value + "; path=/"; window.location.reload(); } $(function() { $(".make_desktop").click(function() { setMobDeskCookie('deskmob', 1, 3650); }); $(".make_responsive").click(function() { setMobDeskCookie('deskmob', 0, 3650); }); });`enter code here`

Eu acabei dividindo todo o meu css personalizado em dois arquivos eu não uso navegação de bootstrap, mas o meu próprio, de modo que é maioria dos meus estilos personalizados, por isso não vai resolver todo o seu problema, mas funciona para mim

e também criei non-responsive.css que força a grade a manter a versão em canvas grande

no caso de você selecionar mobile eu carregaria / echo

      and load these stylesheets   

no caso de você selecionar desktop eu iria carregar / eco

         

o não-responsivo.css é o que tem overrides para bootstrap minha preocupação é layout então não há muito lá, dado que eu manipulo a navegação do meu jeito assim css para ele e os outros bits está nos meus outros arquivos css

Por favor, note que a minha configuração se comporta como desktop, mesmo em navegadores de desktop ao contrário de algumas outras soluções que vi que só vai ignorar a porta de visualização que parece ter funcionado apenas em dispositivos móveis para mim