Як видалити адаптивні функції в Twitter Bootstrap 3?

Question 1

З Bootstrap 3 більше немає окремих файлів для адаптивних та стандартних таблиць стилів. Тож як я можу легко видалити адаптивні функції?

Question 2

Щоб інактивувати нестолові стилі, вам просто потрібно змінити 4 рядки коду у файлі variables.less. Встановіть точки обмеження ширини екрана у файлі variables.less так:

// Точки зупинки медіа-запитів
// ------------------------------------------------ -

// Дуже маленький екран / телефон
// Примітка: Застарілі @ screen-xs та @ screen-phone станом на v3.0.1
@ screen-xs: 1px;
@ screen-xs-min: @ screen-xs;
@ screen-phone: @ screen-xs-min;

// Маленький екран / планшет
// Примітка: застарілі @ screen-sm та @ screen-tablet станом на v3.0.1
@ screen-sm: 2px;
@ screen-sm-min: @ screen-sm;
@ screen-tablet: @ screen-sm-min;

// Середній екран / робочий стіл
// Примітка: Застарілі @ screen-md та @ screen-desktop станом на v3.0.1
@ screen-md: 3px;
@ screen-md-min: @ screen-md;
@ screen-desktop: @ screen-md-min;

// Великий екран / широкий робочий стіл
// Примітка: Застарілі @ screen-lg та @ screen-lg-desktop станом на v3.0.1
@ screen-lg: 9999px;
@ screen-lg-min: @ screen-lg;
@ screen-lg-desktop: @ screen-lg-min;

Це встановлює мінімальну ширину на запиті медіа-запиту в стилі робочого столу нижчою, так що вона застосовується до всіх ширин екрану. Дякуємо 2calledchaos за вдосконалення! Деякі базові стилі визначені в мобільних стилях, тому нам обов’язково потрібно їх включити.

Редагувати: Кріс зазначає, що ви можете встановити ці змінні в онлайн-компіляторі менше на веб-сайті завантаження

Question 3

Це пояснюється в офіційних документах до випуску Bootstrap 3 :

Кроки для вимкнення адаптивних подань

Щоб вимкнути адаптивні функції, виконайте такі дії. Подивіться це в дії у зміненому шаблоні нижче.

Видаліть (або просто не додайте) область перегляду, <meta>згадану в документах CSS

Видаліть максимальну ширину .container для всіх рівнів сітки з max-width: none! Important; і встановіть звичайну ширину, наприклад ширину: 970px ;. Переконайтеся, що це відбувається після стандартного Bootstrap CSS. За бажання ви можете уникнути! Важливого за допомогою медіа-запитів або деяких селекторних фу.

Якщо ви використовуєте панелі навігації, скасуйте всю поведінку панелі навігації, яка згортається та розширюється (цього занадто багато, щоб показати тут, тому підгляньте приклад).

Для макетів сітки використовуйте класи .col-xs- * на додаток або замість середніх / великих. Не хвилюйтеся, надто маленька сітка пристрою масштабується до всіх роздільних здатностей, тож ви там налаштовані.

Вам все одно знадобиться Respond.js для IE8 (оскільки наші медіа-запити все ще є і їх потрібно взяти). Це просто відключає "мобільний сайт" Bootstrap.

Дивіться також приклад на GetBootstrap.com/examples/non-responsive/

Question 4

Останнім часом я просто з’ясовую, наскільки легко змусити ваш bootstrap v3.1.1 не реагувати. Сюди входять панелі навігації, щоб не здійснювати колпазу. Не знаю, чи всі це знають, але я хотів би поділитися цим.

Два кроки до неактивного Bootsrap v3.1.1

По-перше, створіть файл css із назвою non-responsive.css. Обов’язково додайте його до своїх тем або зв’яжіть одразу після css-файлів bootstrap.

По-друге, вставте цей код до вашого 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;
}

Це все і насолоджуйтесь .. ^^

Джерело: non-responsive.css із прикладу на getbootstrap.com .

Question 5

Джерело з: http://getbootstrap.com/getting-started/#disable-responsive

Опустіть область перегляду, <meta>згадану в документах CSS
Перевизначити widthна .containerкожній сітці ярусу з однієї ширини, наприклад , width: 970px !important;переконайтеся , що це відбувається після того, як Bootstrap CSS за замовчуванням. За бажанням ви можете уникнути !importantзапитів медіа чи деяких селекторів.
Якщо ви користуєтеся панелями навігаційних панелей, видаліть усі поведінки, що згортаються та розширюються.
Для макетів сітки використовуйте .col-xs-*класи на додаток до або середніх / великих. Не хвилюйтеся, надто маленька сітка пристрою масштабується до всіх роздільних здатностей.

Question 6

Мені потрібно було повністю видалити адаптивну функцію Bootstrap, і в підсумку я перевизначив поведінку за допомогою такого фрагмента:

.container {
    width: 960px !important;
}

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

Повний фрагмент: https://gist.github.com/ivanminutillo/8557293

Question 7

Ви можете зробити це, використовуючи CSS Bootstrap 3 з невідповідними функціями

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

Question 8

Якщо ви хочете веб-сайт фіксованого розміру, це має бути досить просто:

// 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;

Розгорніть фрагмент

Якщо ви не використовуєте .container-fluid, тоді також додайте:

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

Question 9

Подивіться на www.goo.gl/2SIOJj, це незавершена робота, але це може вам допомогти.

Я використовую cookie, щоб визначити, чи хочу я настільну версію або адаптивну версію. У нижньому колонтитулі сторінки ви можете знайти два інтервали, і загалом .js - це скрипт для обробки кліків.

        <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`

я в кінцевому підсумку розділив усі свої власні css на два файли, я використовую не навігаційну систему завантаження, а свою власну, так що це більшість моїх користувацьких стилів, тому це не вирішить всю вашу проблему, але це працює для мене

і я також створив non-responsive.css, який змушує сітку підтримувати версію для великого екрану

у випадку, якщо ви виберете мобільний, я завантажував би / луну

<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" />

у випадку, якщо ви виберете робочий стіл, я завантажував би ехо

<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 - це той, який має перевизначення для bootstrap. Моє занепокоєння - макет, тому там не так багато, враховуючи те, що я обробляю навігацію по-своєму, тому css для нього та інші біти є в інших моїх файлах css

зауважте, що моє налаштування поводиться як робочий стіл навіть у браузерах для настільних комп'ютерів, на відміну від деяких інших рішень, які я бачив, ігноруючи лише область перегляду, яка, здається, працювала лише на мобільних пристроях