Làm cách nào để xóa các tính năng đáp ứng trong Twitter Bootstrap 3?

Question 1

Kể từ Bootstrap 3, không còn tệp riêng biệt cho các bảng định kiểu chuẩn và đáp ứng nữa. Vậy làm cách nào để có thể dễ dàng loại bỏ các tính năng đáp ứng?

Question 2

Để hủy kích hoạt các kiểu không phải màn hình, bạn chỉ cần thay đổi 4 dòng mã trong tệp variable.less. Đặt các điểm ngắt chiều rộng màn hình trong tệp variable.less như sau:

// Điểm ngắt truy vấn phương tiện
// ------------------------------------------------ -

// Màn hình / điện thoại cực nhỏ
// Lưu ý: @ screen-xs và @ screen-phone không được dùng nữa kể từ v3.0.1
@ screen-xs: 1px;
@ screen-xs-min: @ screen-xs;
@ screen-phone: @ screen-xs-min;

// Màn hình nhỏ / máy tính bảng
// Lưu ý: @ screen-sm và @ screen-tablet không được dùng nữa kể từ v3.0.1
@ screen-sm: 2px;
@ screen-sm-min: @ screen-sm;
@ screen-tablet: @ screen-sm-min;

// Màn hình trung bình / màn hình nền
// Lưu ý: @ screen-md và @ screen-desktop không được dùng nữa kể từ v3.0.1
@ screen-md: 3px;
@ screen-md-min: @ screen-md;
@ screen-desktop: @ screen-md-min;

// Màn hình lớn / màn hình rộng
// Lưu ý: @ screen-lg và @ screen-lg-desktop không được dùng nữa kể từ v3.0.1
@ screen-lg: 9999px;
@ screen-lg-min: @ screen-lg;
@ screen-lg-desktop: @ screen-lg-min;

Điều này đặt chiều rộng tối thiểu trên truy vấn phương tiện kiểu máy tính để bàn thấp hơn để áp dụng cho tất cả các chiều rộng màn hình. Cảm ơn 2calledchaos vì sự cải tiến! Một số kiểu cơ sở được xác định trong kiểu dành cho thiết bị di động, vì vậy chúng tôi cần đảm bảo bao gồm chúng.

Chỉnh sửa: chris lưu ý rằng bạn có thể đặt các biến này trong trình biên dịch less trực tuyến trên trang bootstrap

Question 3

Điều này được giải thích trong tài liệu phát hành Bootstrap 3 chính thức :

Các bước để tắt chế độ xem đáp ứng

Để tắt các tính năng đáp ứng, hãy làm theo các bước sau. Xem nó hoạt động trong mẫu sửa đổi bên dưới.

Xóa (hoặc không thêm) chế độ xem <meta>được đề cập trong tài liệu CSS

Xóa chiều rộng tối đa trên .container cho tất cả các tầng lưới có chiều rộng tối đa: none! Important; và đặt chiều rộng thông thường như width: 970px ;. Đảm bảo rằng điều này xuất hiện sau CSS Bootstrap mặc định. Bạn có thể tùy ý tránh! Important với các truy vấn media hoặc một số selector-fu.

Nếu sử dụng thanh điều hướng, hãy hoàn tác tất cả hành vi thu gọn và mở rộng thanh điều hướng (điều này quá nhiều để hiển thị ở đây, vì vậy hãy xem ví dụ).

Đối với bố cục lưới, hãy sử dụng các lớp .col-xs- * bên cạnh hoặc thay cho các lớp vừa / lớn. Đừng lo lắng, lưới thiết bị cực nhỏ mở rộng đến tất cả các độ phân giải, vì vậy bạn đã sẵn sàng ở đó.

Bạn sẽ vẫn cần Respond.js cho IE8 (vì các truy vấn phương tiện của chúng tôi vẫn ở đó và cần được tiếp nhận). Điều này chỉ vô hiệu hóa "trang web di động" của Bootstrap.

Xem thêm ví dụ trên GetBootstrap.com/examples/non-responsive/

Question 4

Gần đây, tôi chỉ tìm ra cách dễ dàng khiến bootstrap v3.1.1 của bạn không phản hồi. Điều này bao gồm các thanh điều hướng để không ghép nối. Tôi không biết mọi người có biết điều này không nhưng tôi muốn chia sẻ nó.

Hai bước đối với Bootsrap không đáp ứng v3.1.1

Đầu tiên, tạo một tệp css đặt tên là non-responsive.css. Đảm bảo thêm nó vào các chủ đề hoặc liên kết của bạn ngay sau các tệp css bootstrap.

Thứ hai, dán mã này vào non-responsive.css của bạn:

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

Đó là tất cả và tận hưởng .. ^^

Nguồn: non-responsive.css từ ví dụ tại getbootstrap.com .

Question 5

Nguồn từ: http://getbootstrap.com/getting-started/#disable-responsive

Bỏ qua chế độ xem <meta>được đề cập trong tài liệu CSS
Ghi đè widthlên .containercho mỗi tầng lưới bằng một chiều rộng, chẳng hạn như width: 970px !important;Hãy chắc chắn rằng điều này xuất hiện sau CSS Bootstrap mặc định. Bạn có thể tùy ý tránh !importantvới các truy vấn phương tiện hoặc một số bộ chọn-fu.
Nếu sử dụng thanh điều hướng, hãy xóa tất cả hành vi thu gọn và mở rộng thanh điều hướng.
Đối với bố cục lưới, hãy sử dụng .col-xs-*các lớp ngoài hoặc thay cho các lớp vừa / lớn. Đừng lo lắng, lưới thiết bị cực nhỏ có quy mô phù hợp với mọi độ phân giải.

Question 6

Tôi cần phải xóa hoàn toàn tính năng đáp ứng Bootstrap, tôi đã ghi đè hành vi bằng đoạn mã sau:

.container {
    width: 960px !important;
}

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

Đoạn mã đầy đủ: https://gist.github.com/ivanminutillo/8557293

Question 7

Bạn có thể làm điều đó bằng cách sử dụng CSS Bootstrap 3 với các tính năng không đáp ứng

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

Question 8

Nếu bạn muốn một trang web có kích thước cố định, điều này sẽ khá đơn giản:

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

Mở rộng đoạn mã

Trừ khi bạn đang sử dụng .container-liquid, thì hãy thêm vào:

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

Question 9

Hãy xem www.goo.gl/2SIOJj đây là một công việc đang được tiến hành nhưng nó có thể giúp ích cho bạn.

Tôi sử dụng cookie để xác định xem tôi muốn phiên bản dành cho máy tính để bàn hay phiên bản đáp ứng. Trong phần chân trang của trang, bạn có thể tìm thấy hai nhịp và nói chung.js là tập lệnh để xử lý các nhấp chuột.

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

Tôi đã kết thúc việc tách tất cả css tùy chỉnh của mình thành hai tệp, tôi không sử dụng điều hướng bootstrap mà là của riêng tôi, vì vậy đó là phần lớn các kiểu tùy chỉnh của tôi, vì vậy nó sẽ không giải quyết được toàn bộ vấn đề của bạn nhưng nó phù hợp với tôi

và tôi cũng đã tạo non-responsive.css để buộc lưới duy trì phiên bản màn hình lớn

trong trường hợp bạn chọn thiết bị di động, tôi sẽ tải / 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" />

trong trường hợp bạn chọn máy tính để bàn, tôi sẽ tải / 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 là cái có ghi đè đối với bootstrap, mối quan tâm của tôi là bố cục nên không có nhiều thứ trong đó, vì tôi xử lý điều hướng theo cách riêng của mình nên css cho nó và các bit khác nằm trong các tệp css khác của tôi

xin lưu ý rằng thiết lập của tôi hoạt động như máy tính để bàn ngay cả trên trình duyệt máy tính để bàn không giống như một số giải pháp khác mà tôi đã thấy sẽ chỉ bỏ qua chế độ xem dường như chỉ dành cho tôi trên thiết bị di động