ट्विटर बूटस्ट्रैप 3 में उत्तरदायी सुविधाओं को कैसे हटाया जाए?

Question 1

चूंकि बूटस्ट्रैप 3 में उत्तरदायी और मानक स्टाइलशीट के लिए अलग-अलग फाइलें नहीं हैं। तो मैं उत्तरदायी सुविधाओं को आसानी से कैसे निकाल सकता हूं?

Question 2

गैर-डेस्कटॉप शैलियों को निष्क्रिय करने के लिए आपको बस चर की 4 पंक्तियों को बदलना होगा। चर में स्क्रीन चौड़ाई ब्रेकप्वाइंट सेट करें। इस तरह से फ़ाइल:

// मीडिया क्वेरीज़ ब्रेकप्वाइंट
// ------------------------------------------------ -

// अतिरिक्त छोटी स्क्रीन / फोन
// नोट: v3.0.1 के रूप में @ स्क्रीन-एक्स और @ स्क्रीन-फोन को डिप्रेस्ड
@ स्क्रीन-एक्सएस: 1 पीएक्स;
@ स्क्रीन-एक्स-मिनट: @ स्क्रीन-एक्स;
@ स्क्रीन-फोन: @ स्क्रीन-एक्स-मिनट;

// छोटी स्क्रीन / टैबलेट
// नोट: v3.0.1 के रूप में @ स्क्रीन-एसएम और @ स्क्रीन-टैबलेट को डिप्रेस्ड किया गया
@ स्क्रीन-एसम: 2 पीएक्स;
@ स्क्रीन-स्म-मिन: @ स्क्रीन-एसएम;
@ स्क्रीन-टैबलेट: @ स्क्रीन-एसएम-मिनट;

// मध्यम स्क्रीन / डेस्कटॉप
// नोट: v3.0.1 के रूप में @ स्क्रीन-md और @ स्क्रीन-डेस्कटॉप को दर्शाया गया
@ स्क्रीन-एमडी: 3 पीएक्स;
@ स्क्रीन-एमडी-मिनट: @ स्क्रीन-एमडी;
@ स्क्रीन-डेस्कटॉप: @ स्क्रीन-एमडी-मिनट;

// बड़ी स्क्रीन / विस्तृत डेस्कटॉप
// नोट: v3.0.1 के रूप में @ स्क्रीन- lg और @ स्क्रीन- lg- डेस्कटॉप को दर्शाया गया
@ स्क्रीन- lg: 9999px;
@ स्क्रीन- lg-min: @ स्क्रीन- lg;
@ स्क्रीन- lg- डेस्कटॉप: @ स्क्रीन- lg-min;

यह डेस्कटॉप शैली मीडिया क्वेरी पर न्यूनतम-चौड़ाई सेट करता है ताकि यह सभी स्क्रीन चौड़ाई पर लागू हो। सुधार के लिए 2calledchaos को धन्यवाद! कुछ आधार शैलियों को मोबाइल शैलियों में परिभाषित किया गया है, इसलिए हमें उन्हें शामिल करना सुनिश्चित करने की आवश्यकता है।

संपादित करें: क्रिस नोट कि आप इन चर को बूटस्ट्रैप साइट पर ऑनलाइन कम संकलक में सेट कर सकते हैं

Question 3

यह आधिकारिक बूटस्ट्रैप 3 रिलीज डॉक्स में समझाया गया है :

उत्तरदायी विचारों को निष्क्रिय करने के लिए कदम

उत्तरदायी सुविधाओं को अक्षम करने के लिए, इन चरणों का पालन करें। नीचे संशोधित मोड में इसे कार्रवाई में देखें।

<meta>सीएसएस डॉक्स में बताए गए व्यूपोर्ट को निकालें (या अभी न जोड़ें)

अधिकतम चौड़ाई वाले सभी ग्रिड स्तरों के लिए .container पर अधिकतम-चौड़ाई निकालें: कोई भी महत्वपूर्ण नहीं; और चौड़ाई की तरह एक नियमित चौड़ाई सेट करें: 970px ;; सुनिश्चित करें कि यह डिफ़ॉल्ट बूटस्ट्रैप सीएसएस के बाद आता है। आप मीडिया के प्रश्नों या कुछ चयनकर्ता-फू के साथ महत्वपूर्ण रूप से महत्वपूर्ण रूप से बच सकते हैं।

यदि नावबार का उपयोग कर रहे हैं, तो सभी नावबार ढहने और व्यवहार को विस्तारित करने में (यह यहाँ दिखाने के लिए बहुत अधिक है, इसलिए उदाहरण को देखें)।

ग्रिड लेआउट के लिए, .col-xs- * कक्षाओं का उपयोग मध्यम / बड़े लोगों के स्थान पर या इसके अलावा करें। चिंता न करें, अतिरिक्त छोटे डिवाइस ग्रिड सभी रिज़ॉल्यूशन तक बढ़ाते हैं, इसलिए आप वहां सेट होते हैं।

IE8 के लिए आपको अभी भी Respond.js की आवश्यकता होगी (क्योंकि हमारे मीडिया के प्रश्न अभी भी हैं और इसे उठाए जाने की आवश्यकता है)। यह सिर्फ बूटस्ट्रैप की "मोबाइल साइट" को निष्क्रिय करता है।

GetBootstrap.com/examples/non-responsive/ पर उदाहरण भी देखें

Question 4

मैं अभी हाल ही में यह पता लगाता हूं कि आपके बूटस्ट्रैप v3.1.1 को गैर-उत्तरदायी बनाना कितना आसान है। इसमें नावबार शामिल नहीं हैं। मुझे नहीं पता कि हर कोई यह जानता है लेकिन मैं इसे साझा करना चाहूंगा।

गैर-उत्तरदायी बूटस्ट्रैप v3.1.1 के दो चरण

सबसे पहले, एक गैर-उत्तरदायी के रूप में एक सीएसएस फ़ाइल नाम बनाएँ। बूटस्ट्रैप 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;
}

यह सब है और आनंद लें .. ^ ^

स्रोत: getbootstrap.com पर गैर-उत्तरदायी । उदाहरण से ।

Question 5

स्रोत से: http://getbootstrap.com/getting-started/#disable-responsive

<meta>सीएसएस डॉक्स में उल्लिखित व्यूपोर्ट को छोड़ दें
ओवरराइड widthपर .containerएक भी चौड़ाई के साथ प्रत्येक ग्रिड श्रेणी के लिए, उदाहरण के लिए width: 970px !important;यकीन है कि यह डिफ़ॉल्ट बूटस्ट्रैप सीएसएस के बाद आता है रहो। आप वैकल्पिक रूप से !importantमीडिया प्रश्नों या कुछ चयनकर्ता-फू से बच सकते हैं ।
यदि नेवबार का उपयोग कर रहे हैं, तो सभी नौबार को ढहने और व्यवहार को विस्तार देने से हटा दें।
ग्रिड लेआउट के .col-xs-*लिए, मध्यम / बड़े लोगों के अलावा, या के स्थान पर कक्षाओं का उपयोग करें । चिंता मत करो, सभी प्रस्तावों के लिए अतिरिक्त छोटे डिवाइस ग्रिड तराजू।

Question 6

मुझे बूटस्ट्रैप उत्तरदायी सुविधा को पूरी तरह से हटाने की आवश्यकता थी, मैंने निम्नलिखित स्निपेट के साथ व्यवहार को ओवरराइड करना समाप्त कर दिया:

.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

आप गैर-उत्तरदायी सुविधाओं के साथ बूटस्ट्रैप 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 को देखें यह प्रगति पर काम है लेकिन यह आपकी मदद कर सकता है।

अगर मैं डेस्कटॉप या उत्तरदायी संस्करण चाहता हूं, तो मैं यह परिभाषित करने के लिए कुकी का उपयोग करता हूं। पृष्ठ के पाद लेख में आप दो स्पैन और सामान्य रूप से पा सकते हैं। जेएस क्लिक को संभालने के लिए स्क्रिप्ट है।

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

मैंने अपनी सभी कस्टम सीएसएस को दो फाइलों में विभाजित कर दिया है, मैं बूटस्ट्रैप नेविगेशन का उपयोग नहीं करता हूं, लेकिन मेरा अपना ऐसा है जो मेरी कस्टम शैलियों का बहुमत है, इसलिए यह आपकी संपूर्ण समस्या को हल नहीं करेगा लेकिन यह मेरे लिए काम करता है

और मैंने गैर-प्रतिक्रियाशील भी बनाया। जो बड़े स्क्रीन संस्करण को बनाए रखने के लिए ग्रिड को मजबूर करता है

यदि आप मोबाइल का चयन करते हैं तो मैं लोड / ईको करूंगा

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

गैर-उत्तरदायी। एससीएस वह है जो बूटस्ट्रैप के लिए ओवरराइड करता है मेरी चिंता लेआउट है, इसलिए वहां बहुत कुछ नहीं है, यह देखते हुए कि मैं अपने तरीके से नेविगेशन को संभालता हूं इसलिए इसके लिए सीएसएस और अन्य बिट्स मेरे अन्य सीएसएस फाइलों में हैं

कृपया ध्यान दें कि मेरा सेटअप डेस्कटॉप ब्राउज़र पर भी डेस्कटॉप के रूप में व्यवहार करता है, कुछ अन्य समाधानों के विपरीत, जो मैंने देखा है कि केवल उस व्यूपोर्ट को अनदेखा कर देगा जो लगता है कि मेरे लिए केवल मोबाइल डिवाइस पर wotked है