it-swarm.asia

كيفية إزالة الميزات المستجيبة في Twitter Bootstrap 3؟

منذ Bootstrap 3 ، لم تعد هناك ملفات منفصلة لأوراق الأنماط سريعة الاستجابة والقياسية. فكيف يمكنني بسهولة إزالة الميزات استجابة؟

83
kanarifugl

لإلغاء تنشيط الأنماط خلاف سطح المكتب ، عليك فقط تغيير 4 سطور من التعليمات البرمجية في ملف variables.less. قم بتعيين نقاط توقف عرض الشاشة في ملف variables.less مثل هذا:

 // نقاط توقف استعلامات الوسائط 
 // --------------------------------- ----------------- 
 
 // شاشة/هاتف صغير جدًا [. _.] // ملاحظة: تم إهمالها @ screen-xs و @ شاشة الهاتف اعتبارًا من الإصدار 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؛ 
 
 // متوسط ​​الشاشة/سطح المكتب 
 // ملاحظة: تم إهمال @ شاشة - md و @ شاشة سطح مكتب اعتبارًا من الإصدار 3.0.0 
 @ screen-md: 3px ؛ 
 @ screen- md-min: @ screen-md؛ 
 @ screen-desktop: @ screen-md-min؛ 
 
 // شاشة كبيرة/سطح مكتب واسع 
 // ملاحظة: تم إهمال @ screen-lg و @ screen-lg-desktop اعتبارًا من الإصدار 3.0.1 
 @ screen-lg: 9999 بكسل ؛ 
 @ screen-lg-min: @ screen-lg ؛ 
 @ screen-lg-desktop: @ screen-lg-min ؛ 

يؤدي ذلك إلى تعيين العرض الأدنى على استعلام وسائط نمط سطح المكتب أقل بحيث ينطبق على جميع شاشات العرض. بفضل 2calledchaos للتحسين! يتم تعريف بعض الأنماط الأساسية في أنماط المحمول ، لذلك نحن بحاجة إلى التأكد من تضمينها.

تحرير: يلاحظ كريس أنه يمكنك تعيين هذه المتغيرات في برنامج التحويل البرمجي الأقل عبر الإنترنت على موقع bootstrap

103
Jay Douglass

هذا موضح في مستندات إصدار Bootstrap 3 الرسمية :

خطوات لتعطيل طرق العرض المستجيبة

لتعطيل الميزات سريعة الاستجابة ، اتبع هذه الخطوات. نرى ذلك في العمل في القالب المعدل أدناه.

  1. أزل (أو لا تضيف فقط) منفذ العرض <meta> المذكور في مستندات CSS
  2. إزالة الحد الأقصى للعرض على. حاوية لجميع طبقات الشبكة مع أقصى عرض: لا شيء مهم ؛ وتعيين عرض منتظم مثل العرض: 970px ؛. تأكد من أن هذا يأتي بعد Bootstrap CSS الافتراضي. يمكنك اختياريا تجنب! المهم مع استفسارات وسائل الإعلام أو بعض محدد فو.
  3. إذا كنت تستخدم شريط التنقل ، فقم بالتراجع عن سلوك شريط التنقل الهابط والتوسعي (هذا كثير جدًا لعرضه هنا ، لذلك أطلع على المثال).
  4. لتخطيطات الشبكة ، استخدم الطبقات .col-xs- * بالإضافة إلى أو بدلاً من الطبقات المتوسطة/الكبيرة. لا داعي للقلق ، فإن شبكة الأجهزة الصغيرة للغاية تتسع لجميع القرارات ، لذلك أنت مضبوط هناك.

ستظل بحاجة إلى Respond.js لـ IE8 (نظرًا لأن استعلامات الوسائط لدينا لا تزال موجودة وتحتاج إلى استلامها). هذا فقط تعطيل "موقع المحمول" من Bootstrap.

انظر أيضًا المثال على GetBootstrap.com/examples/non-responsive/

45
lborgav

أنا مجرد معرفة ذلك في الآونة الأخيرة على مدى سهولة لجعل bootstrap v3.1.1 الخاص بك غير مستجيب. وهذا يشمل navbars لعدم collpase. لا أعرف ما إذا كان الجميع يعرفون هذا ولكنني أود مشاركته.

خطوتين إلى بوتاسراب v3.1.1 غير مستجيبة

أولاً ، قم بإنشاء اسم ملف css باسم non-responsive.css. تأكد من إلحاقها بالسمات الخاصة بك أو الارتباط مباشرة بعد ملفات bootstrap css.

ثانيًا ، قم بلصق هذا الرمز إلى عنوان 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 .

20
JiNexus

كنت بحاجة لإزالة ميزة استجابة 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

11
Ivan Minutillo

مصدر من: http://getbootstrap.com/getting-started/#disable-responsive

  1. حذف منفذ العرض <meta> المذكور في مستندات CSS
  2. تجاوز width على .container لكل طبقة شبكة بعرض واحد ، على سبيل المثال width: 970px !important; تأكد من أن ذلك يأتي بعد Bootstrap CSS الافتراضي. يمكنك اختياريًا تجنب !important باستخدام استعلامات الوسائط أو بعض محددات fu.
  3. إذا كنت تستخدم أشرطة التنقل ، فقم بإزالة كل سلوك شريط التنقل وتوسيعه.
  4. لتخطيطات الشبكة ، استخدم فئات .col-xs-* بالإضافة إلى أو بدلاً من الطبقات المتوسطة/الكبيرة. لا تقلق ، فإن شبكة الجهاز الصغيرة للغاية تتناسب مع جميع القرارات.
11
Sophy

يمكنك القيام بذلك باستخدام Bootstrap 3 CSS مع ميزات غير مستجيبة

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

5
equisde

إذا كنت تريد موقع ويب بحجم ثابت ، فيجب أن يكون هذا بسيطًا إلى حد ما:

// 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;
}
0
Hrvoje Golcic