Jak usunąć responsywne funkcje w Twitter Bootstrap 3?

Od wersji Bootstrap 3 nie ma już oddzielnych plików dla responsywnych i standardowych arkuszy stylów. Jak więc mogę łatwo usunąć responsywne funkcje?

Aby dezaktywować style inne niż desktopowe, wystarczy zmienić 4 linie kodu w pliku variable.less. Ustaw punkty przerwania szerokości ekranu w pliku variable.less w następujący sposób:

// Media wysyła zapytania o punkty przerwania
// ------------------------------------------------ -

// Bardzo mały ekran / telefon
// Uwaga: przestarzałe @ screen-xs i @ screen-phone od wersji 3.0.1
@ screen-xs: 1px;
@ screen-xs-min: @ screen-xs;
@ screen-phone: @ screen-xs-min;

// Mały ekran / tablet
// Uwaga: wycofane @ screen-sm i @ screen-tablet od wersji 3.0.1
@ screen-sm: 2px;
@ screen-sm-min: @ screen-sm;
@ tablet z ekranem: @ screen-sm-min;

// Średni ekran / pulpit
// Uwaga: przestarzałe @ screen-md i @ screen-desktop od wersji 3.0.1
@ screen-md: 3px;
@ screen-md-min: @ screen-md;
@ screen-desktop: @ screen-md-min;

// Duży ekran / szeroki pulpit
// Uwaga: przestarzałe @ screen-lg i @ screen-lg-desktop od wersji 3.0.1
@ screen-lg: 9999px;
@ screen-lg-min: @ screen-lg;
@ screen-lg-desktop: @ screen-lg-min;

Spowoduje to ustawienie niższej minimalnej szerokości w zapytaniu o media w stylu pulpitu, tak aby była stosowana do wszystkich szerokości ekranu. Dzięki 2calledchaos za ulepszenie! Niektóre style podstawowe są zdefiniowane w stylach mobilnych, więc musimy je uwzględnić.

Edycja: chris zauważa, że ​​możesz ustawić te zmienne w mniej kompilatorze online na stronie bootstrap

Jest to wyjaśnione w oficjalnej dokumentacji wydania Bootstrap 3 :

Kroki, aby wyłączyć responsywne widoki

Aby wyłączyć responsywne funkcje, wykonaj następujące kroki. Zobacz to w akcji w zmodyfikowanym szablonie poniżej.

1. Usuń (lub po prostu nie dodawaj) widok <meta>wymieniony w dokumentach CSS
2. Usuń max-width z .container dla wszystkich warstw siatki z max-width: none! i ustaw zwykłą szerokość, taką jak width: 970px ;. Upewnij się, że następuje to po domyślnym CSS Bootstrap. Opcjonalnie możesz uniknąć! Important w przypadku zapytań o media lub niektórych funkcji selector-fu.
3. Jeśli używasz navbarów, cofnij wszystkie zwijanie i rozwijanie paska nawigacyjnego (to zbyt wiele, aby tu pokazać, więc zerknij na przykład).
4. W przypadku układów siatki użyj klas .col-xs- * oprócz lub zamiast klas średnich / dużych. Nie martw się, bardzo mała siatka urządzeń skaluje się do wszystkich rozdzielczości, więc jesteś na miejscu.

Nadal będziesz potrzebować pliku Respond.js dla IE8 (ponieważ nasze zapytania o media są nadal dostępne i należy je odebrać). To po prostu wyłącza „witrynę mobilną” Bootstrap.

Zobacz także przykład na GetBootstrap.com/examples/non-responsive/

Niedawno odkryłem, jak łatwo jest sprawić, by bootstrap w wersji 3.1.1 nie odpowiadał. Obejmuje to paski nawigacyjne, aby nie zwinąć. Nie wiem, czy wszyscy o tym wiedzą, ale chciałbym się tym podzielić.

Dwa kroki do nieodpowiadającego programu Bootsrap w wersji 3.1.1

Najpierw utwórz plik css i nazwij go non-responsive.css. Upewnij się, że dodałeś go do swoich motywów lub linku zaraz po plikach bootstrap css.

Po drugie, wklej ten kod do swojego non-responsive.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;
}

To wszystko i ciesz się .. ^^

Źródło: non-responsive.css z przykładu w getbootstrap.com .

Źródło: http://getbootstrap.com/getting-started/#disable-responsive

1. Pomiń widoczny obszar <meta>wymieniony w dokumentach CSS
2. Przesłonić widthna .containerdla każdej warstwy siatki z pojedynczej szerokości, na przykład width: 970px !important;mieć pewność, że przychodzi po domyślnej Bootstrap CSS. Możesz opcjonalnie uniknąć za !importantpomocą zapytań o media lub jakiegoś selector-fu.
3. Jeśli używasz navbarów, usuń wszystkie zwijanie i rozwijanie paska nawigacyjnego.
4. W przypadku układów siatki użyj .col-xs-*klas oprócz średnich / dużych lub zamiast nich. Nie martw się, bardzo mała siatka urządzenia skaluje się do wszystkich rozdzielczości.

Musiałem całkowicie usunąć funkcję responsywną Bootstrap, skończyłem nadpisując zachowanie następującym fragmentem kodu:

.container {
    width: 960px !important;
}

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

Pełny fragment: https://gist.github.com/ivanminutillo/8557293

Możesz to zrobić za pomocą Bootstrap 3 CSS z niereagującymi funkcjami

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

Jeśli chcesz mieć witrynę o stałym rozmiarze, powinno to być dość proste:

// 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: 9999px;

Jeśli nie używasz .container-fluid, dodaj też:

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}

Spójrz na www.goo.gl/2SIOJj. To jest w toku, ale może ci pomóc.

Używam plików cookie, aby określić, czy chcę wersję komputerową czy responsywną. W stopce strony można znaleźć dwa przęsła i ogólnie.js to skrypt obsługujący kliknięcia.

        <div class="col-xs-6" style="text-align:center;"><span class="make_desktop">Desktop</span></div>
        <div class="col-xs-6" style="text-align:center;"><span class="make_responsive">Mobile</span></div>

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`

Skończyło się na tym, że podzieliłem wszystkie moje niestandardowe pliki css na dwa pliki Nie używam nawigacji bootstrap, ale własnej, więc jest to większość moich niestandardowych stylów, więc nie rozwiąże to całego problemu, ale działa dla mnie

stworzyłem również non-responsive.css, który wymusza na siatce utrzymanie wersji na dużym ekranie

w przypadku wybrania telefonu komórkowego załadowałbym / echo

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

and load these stylesheets
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style-responsive.css?modified=1402758346" />

w przypadku wybrania pulpitu załadowałbym / echo

<meta name="viewport" content="width=1024">    


        <!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

        <!-- Main CSS -->
        <link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/non-responsive.css?modified=1402758635" />

non-responsive.css to ten, który ma nadpisania dla bootstrapu, moim problemem jest układ, więc nie ma tam zbyt wiele, biorąc pod uwagę, że obsługuję nawigację na swój własny sposób, więc css dla niego, a inne bity są w moich innych plikach css

proszę zauważyć, że moja konfiguracja zachowuje się jak komputer nawet w przeglądarkach stacjonarnych, w przeciwieństwie do niektórych innych rozwiązań, które widziałem, które ignorują tylko widok, który wydaje się działać tylko na urządzeniach mobilnych