Twitter Bootstrap 3'teki duyarlı özellikler nasıl kaldırılır?

85

Bootstrap 3'ten bu yana, duyarlı ve standart stil sayfaları için artık ayrı dosyalar yok. Peki, duyarlı özellikleri nasıl kolayca kaldırabilirim?

twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 
— Kanarifugl
kaynak
1
Bu blog gönderisinde bunu yapmakla ilgili bazı bilgiler ve sonunda Github'da tamamlanmış bir sürüme giden bir bağlantı var.
— bbill
1
@STLDeveloper 3 Aralık 2012'de 16: 11'de sordu. Bootstrap 3 2 günlük falan.
— kanarifugl
1
@STLDeveloper, duyarlı dosyaların artık Bootstrap 3'te ayrı olmadığını söylüyor . Blog yazısı ve Bootstrap'ın Github hesabı değişiklikleri açıklıyor.
— bbill
Önyükleme belgeleri bunun nasıl yapılacağını açıklıyor
— Nicolas Janel
@NicolasJanel bağlantınız kesildi.
— Dmitry

Yanıtlar:

104

Masaüstü olmayan stilleri devre dışı bırakmak için, değişkenler.less dosyasındaki 4 satırlık kodu değiştirmeniz yeterlidir. Değişkenler.less dosyasında ekran genişliği kesme noktalarını şu şekilde ayarlayın:

// Medya kesme noktalarını sorgular
// ------------------------------------------------ -

// Ekstra küçük ekran / telefon
// Not: @ screen-xs ve @ screen-phone v3.0.1 itibarıyla kullanımdan kaldırıldı
@ screen-xs: 1px;
@ ekran-xs-min: @ ekran-xs;
@ ekran-telefon: @ ekran-xs-min;

// Küçük ekran / tablet
// Not: @ screen-sm ve @ screen-tablet v3.0.1 itibarıyla kullanımdan kaldırıldı
@ ekran-sm: 2px;
@ ekran-sm-min: @ ekran-sm;
@ ekran-tablet: @ ekran-sm-min;

// Orta ekran / masaüstü
// Not: @ screen-md ve @ screen-desktop v3.0.1 itibarıyla kullanımdan kaldırıldı
@ ekran md: 3px;
@ ekran-md-min: @ ekran-md;
@ ekran-masaüstü: @ ekran-md-min;

// Büyük ekran / geniş masaüstü
// Not: @ screen-lg ve @ screen-lg-desktop v3.0.1 itibarıyla kullanımdan kaldırıldı
@ ekran-lg: 9999px;
@ ekran-lg-min: @ ekran-lg;
@ ekran-lg-masaüstü: @ ekran-lg-min;

Bu, tüm ekran genişliklerine uygulanabilmesi için masaüstü stili ortam sorgusundaki minimum genişliği daha düşük ayarlar. İyileştirme için 2calledchaos'a teşekkürler! Bazı temel stiller mobil stillerde tanımlanmıştır, bu yüzden onları dahil ettiğimizden emin olmamız gerekir.

Düzenleme: chris, bu değişkenleri bootstrap sitesindeki çevrimiçi daha az derleyicide ayarlayabileceğinizi not eder.

— Jay Douglass
kaynak
7
Ayrıca, @ grid-float-breakpoint değişkenini 1px olarak değiştirerek navbar'ın yığınlanmasını durdurabilirsiniz.
— Chris
8
vay, bu aynı zamanda bootstrap özel indirme sitesindeki çevrimiçi derleyicide de çalışıyor!
— chris
1
Yukarıdakilerin çalıştığından emin değilim. Eğer birisi tanımlarsa @media (min-width: @screen-sm-min)(yani bu stili sm kesme noktasına ve tüm yüksek kesme noktalarına uygularsa; yani sm, md, lg), yukarıdaki geçersiz kılmalar bu varsayımı bozacaktır, çünkü tanım artık md? @ Screen-xs'i 1px'e ve @ screen-sm'i 1px'e de ayarladım (@ screen-md'nin 1px olmasına ek olarak); bu şekilde, tüm xs, sm ve md stilleri, kaynak sıralaması önceliğiyle kendilerini geçersiz kılarak uygulanır.
— Martin Suchanek
1
Xs için 1px, sm için 2px, md için 3px ve lg için 9999px kullanmak daha iyidir. Bu şekilde, "mobil modda" gezinme çubuklarınız ve modlarınız olmaz.
— 2called-chaos
1
çalışıyor, ancak tarayıcı yatay kaydırma çubuğu hala eksik
— Cichy
45

Bu, resmi Bootstrap 3 sürüm belgelerinde açıklanmıştır :

Duyarlı görünümleri devre dışı bırakma adımları

Duyarlı özellikleri devre dışı bırakmak için aşağıdaki adımları izleyin. Aşağıdaki değiştirilmiş şablonda iş başında görün.

  1. <meta>CSS belgelerinde belirtilen görünümü kaldırın (veya eklemeyin)
  2. Max-width: none! Önemli; ile tüm ızgara katmanları için .container üzerindeki maksimum genişliği kaldırın. ve genişlik gibi normal bir genişlik ayarlayın: 970px ;. Bunun varsayılan Bootstrap CSS'den sonra geldiğinden emin olun. Medya sorguları veya bazı selector-fu ile isteğe bağlı olarak önemli olanlardan kaçınabilirsiniz.
  3. Gezinti çubuklarını kullanıyorsanız, tüm gezinti çubuğunun daraltma ve genişleme davranışını geri alın (bu burada gösterilemeyecek kadar fazladır, bu nedenle örneğe bakın).
  4. Izgara düzenleri için, orta / büyük olanlara ek olarak veya onların yerine .col-xs- * sınıflarını kullanın. Endişelenmeyin, ekstra küçük cihaz ızgarası tüm çözünürlüklere ölçeklenir, bu yüzden oraya hazırsınız.

IE8 için hala Respond.js'ye ihtiyacınız olacak (çünkü medya sorgularımız hala orada ve alınması gerekiyor). Bu sadece Bootstrap'in "mobil sitesini" devre dışı bırakır.

GetBootstrap.com/examples/non-responsive/ adresindeki örneğe de bakın.

— lborgav
kaynak
5
Bu benim için işe yaramadı. Bazı öğeler, görüş bağlantı noktasının genişliğine yanıt verir.
— Ziyan Junaideen
@ZiyanJunaideen Muhtemelen bir şeyi kaçırdınız. Bir jsfiddle sağlayabilir misiniz?
— Adrien Be
1
Bu benim için çalıştı. Doğru cevap olarak işaretlenmesi gerektiğini düşünüyorum.
— Dave Stewart
20

Son zamanlarda önyükleme v3.1.1'inizi tepkisiz hale getirmenin ne kadar kolay olduğunu anladım. Bu, çökmemesi için gezinti çubuklarını içerir. Bunu herkes biliyor mu bilmiyorum ama paylaşmak isterim.

Yanıt Vermeyen Bir Bootsrap v3.1.1 için İki Adım

İlk olarak, non-responsive.css olarak adlandırılan bir css dosyası oluşturun. Bunu temalarınıza eklediğinizden emin olun veya bootstrap css dosyalarından hemen sonra bağlantı kurun.

İkinci olarak, bu kodu non-responsive.css dosyanıza yapıştırı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;
}

Hepsi bu ve keyfini çıkarın .. ^^

Kaynak: olmayan responsive.css gelen getbootstrap.com örneğin .

— JiNexus
kaynak
2
Woow çok güzel! Teşekkürler :)
— Ronald Araújo
2
Lütfen buraya kopyalayıp / yapıştırdığınızda kodunuzun kaynağına bağlantı verin.
— ba0708
11

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

  1. <meta>CSS belgelerinde belirtilen görüntü alanını atlayın
  2. Geçersiz Kıl widthüzerinde .container, tek bir genişliğe sahip her bir grid katmanı için örneğin width: 970px !important;emin bu varsayılan Bootstrap CSS sonra geldiğini olun. İsteğe bağlı !importantolarak medya sorguları veya bazı selector-fu'lardan kaçınabilirsiniz .
  3. Gezinti çubuklarını kullanıyorsanız, tüm gezinti çubuğunun daralan ve genişleyen davranışını kaldırın.
  4. Izgara düzenleri .col-xs-*için, orta / büyük olanlara ek olarak veya onların yerine sınıfları kullanın . Endişelenmeyin, ekstra küçük cihaz ızgarası tüm çözünürlüklere göre ölçeklenir.
— Sophy
kaynak
11

Bootstrap duyarlı özelliğini tamamen kaldırmam gerekiyordu, aşağıdaki kod parçacığı ile davranışı geçersiz kıldım:

.container {
    width: 960px !important;
}

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

Tam pasaj: https://gist.github.com/ivanminutillo/8557293

— Ivan Minutillo
kaynak
5

Yanıt vermeyen özelliklerle Bootstrap 3 CSS kullanarak bunu yapabilirsiniz.

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

— ɐsɹǝʌ ǝɔıʌ
kaynak
1
Güzel, ama çok kötü, tam bir önyükleme css setidir. Yalnızca duyarlı özellikleri devre dışı bırakmak için css'e sahip olmak güzel olurdu. "Nonresponsive.css" olarak adlandırdığımızı varsayalım. Bu şekilde, nonresponsive.css'yi dahil edersek, duyarlı reature devre dışı bırakılır. Bu css'yi kaldırırsanız, yanıt geri yüklenir.
— user1995781
1
Yalnızca başlıklara orijinal bootstrap.css ve yukarıdaki bağlantıda yayınlanan yanıt vermeyen bootstrap.css ekleyerek önerdiğiniz şeyi yapabilirsiniz. Açıkçası, istediğiniz gibi yeniden adlandırabilirsiniz. Satırı yorumlayın ve istediğiniz gibi çalışacaktır.
— ɐsɹǝʌ ǝɔıʌ
1
Evet, ama bu tüm özel önyükleme temamı geçersiz kılacak. Örneğin, bootswatch.com'dan bir tema kullanırsam , bu css tarafından geçersiz kılınır.
— user1995781
1
Elbette. Bootstrap yerine özel bir tema kullanıyorsanız, tüm özelleştirmelerinizi kaybedersiniz, ancak orijinal önyükleme CSS
— ɐsɹǝʌ ǝɔıʌ
0

Sabit boyutlu bir web sitesi istiyorsanız, bu oldukça basit olmalıdır:

// 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;
Snippet'i genişlet

.Container-Fluid kullanmıyorsanız, şunu da ekleyin:

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}
— Hrvoje Golcic
kaynak
-2

Www.goo.gl/2SIOJj adresine bakın, bu devam eden bir çalışmadır ancak size yardımcı olabilir.

Masaüstü mü yoksa uyumlu sürüm mü istediğimi tanımlamak için çerez kullanıyorum. Sayfanın altbilgisinde iki aralık bulabilirsiniz ve genel olarak ..js tıklamaları işleyen komut dosyasıdır.

        <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üm özel css'imi iki dosyaya böldüm, önyükleme navigasyonunu kullanmıyorum ama kendime ait, bu yüzden özel stillerimin çoğunluğu bu yüzden tüm sorununuzu çözmeyecek ama benim için çalışıyor

ve ayrıca ızgarayı geniş ekran sürümünü korumaya zorlayan non-responsive.css oluşturdum

Eğer mobil seçerseniz yüklerim / yankı yapardım 

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

masaüstünü seçmeniz durumunda yüklerim / yankılanırım

<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, önyükleme için geçersiz kılmalara sahip olandır, benim endişem yerleşim düzenidir, bu yüzden navigasyonu kendi yöntemimle hallettiğim için, bunun için css ve diğer bitler diğer css dosyalarımdadır.

lütfen benim için yalnızca mobil cihazlarda wotked gibi görünen görüntü alanını görmezden gelen bazı diğer çözümlerin aksine, kurulumumun masaüstü tarayıcılarda bile masaüstü gibi davrandığını unutmayın.

— Tomhre
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.