Jak usunąć responsywne funkcje w Twitter Bootstrap 3?

85

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?

twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 
— kanarifugl
źródło
1
Ten wpis na blogu zawiera informacje o tym, jak to zrobić, a na końcu link do ukończonej wersji na Github.
— bbill
1
@STLDeveloper zapytał 3 grudnia o 16:11. Bootstrap 3 ma 2 dni czy coś.
— kanarifugl
1
@STLDeveloper, mówi, że pliki responsywne nie są już oddzielne w Bootstrap 3 . Post na blogu i konto Github Bootstrap wyjaśniają zmiany.
— bbill
Dokumentacja bootstrap opisuje, jak to zrobić: getbootstrap.com/getting-started/#disable-responsive
— Nicolas Janel
@NicolasJanel Twój link nie działa.
— Dmitry

Odpowiedzi:

104

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

— Jay Douglass
źródło
7
Możesz również zatrzymać układanie paska nawigacyjnego, zmieniając zmienną @ grid-float-breakpoint na 1px.
— Chris,
8
wow, działa to również w kompilatorze online na niestandardowej stronie pobierania bootstrap!
— chris,
1
Nie jestem pewien, czy powyższe działa. Jeśli ktoś zdefiniuje @media (min-width: @screen-sm-min)(czyli zastosuje ten styl do sm, md, lg), powyższe przesłonięcia złamałyby to założenie, ponieważ definicja nie byłaby już stosowana do md? Ustawiam @ screen-xs na 1px i @ screen-sm na 1px (oprócz tego, że @ screen-md wynosi 1px); w ten sposób wszystkie style xs, sm i md są stosowane, nadpisując się priorytetem kolejności źródeł.
— Martin Suchanek
1
Lepiej jest użyć 1px dla xs, 2px dla sm, 3px dla md i 9999px dla lg. W ten sposób nie masz navbarów i modali w „trybie mobilnym”.
— wezwany-chaos
1
działa, ale nadal brakuje poziomego paska przewijania przeglądarki
— Cichy
45

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/

— lborgav
źródło
5
To nie zadziałało dla mnie. Niektóre elementy odpowiadają szerokości portu widoku.
— Ziyan Junaideen
@ZiyanJunaideen Prawdopodobnie coś przeoczyłeś. Czy możesz zapewnić jsfiddle?
— Adrien Be
1
To zadziałało dla mnie. Myślę, że należy to zaznaczyć jako poprawną odpowiedź.
— Dave Stewart
20

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 .

— JiNexus
źródło
2
Woow, bardzo miło! Dzięki :)
— Ronald Araújo
2
Podaj link do źródła kodu podczas kopiowania / wklejania go tutaj.
— ba0708
11

Ź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.
— Sophy
źródło
11

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

— Ivan Minutillo
źródło
5

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

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

— ɐsɹǝʌ ǝɔıʌ
źródło
1
Fajnie, ale szkoda, że ​​jest to pełny zestaw css bootstrap. Byłoby miło mieć css tylko do wyłączenia funkcji responsywnych. Powiedzmy, że nazywamy go „nonresponsive.css”. W ten sposób, jeśli dołączymy nonresponsive.css, responsywna reature jest wyłączona. Jeśli usuniesz ten CSS, responsywność zostanie przywrócona.
— user1995781
1
Możesz zrobić to, co zasugerowałeś, dodając w nagłówkach oryginalny plik bootstrap.css i nieodpowiadający plik bootstrap.css zamieszczony pod powyższym łączem. Oczywiście możesz zmienić jego nazwę, jak chcesz. Zakomentuj linię, a wtedy będzie działać zgodnie z oczekiwaniami.
— ɐsɹǝʌ ǝɔıʌ
1
Tak, ale to zastąpi cały mój niestandardowy motyw bootstrap. Na przykład, jeśli użyję motywu z bootswatch.com , zostanie on zastąpiony przez ten css.
— user1995781
1
Oczywiście. Jeśli używasz niestandardowego motywu
— zamiast programu
0

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;
Rozwiń fragment

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

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}
— Hrvoje Golcic
źródło
-2

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

— tomhre
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.