টুইটার বুটস্ট্র্যাপ 3 তে প্রতিক্রিয়াশীল বৈশিষ্ট্যগুলি কীভাবে সরিয়ে ফেলা যায়?

Question 1

বুটস্ট্র্যাপ 3 যেহেতু প্রতিক্রিয়াশীল এবং স্ট্যান্ডার্ড স্টাইলশিটের জন্য আলাদা আলাদা ফাইল নেই। তাহলে আমি কীভাবে সহজেই প্রতিক্রিয়াশীল বৈশিষ্ট্যগুলি সরিয়ে ফেলতে পারি?

Question 2

নন-ডেস্কটপ শৈলী নিষ্ক্রিয় করতে আপনাকে কেবল ভেরিয়েবল.বিহীন ফাইলটিতে 4 টি লাইন কোড পরিবর্তন করতে হবে। ভেরিয়েবল.বিহীন ফাইলে স্ক্রিনের প্রস্থের ব্রেকপয়েন্টগুলি সেট করুন:

// মিডিয়া অনুসন্ধান ব্রেকপয়েন্টস
// ------------------------------------------------ -

// অতিরিক্ত ছোট পর্দা / ফোন
// দ্রষ্টব্য: v3.0.1 হিসাবে @ স্ক্রিন-এক্স এবং @ স্ক্রিন-ফোন অবচয়
@ স্ক্রিন-এক্সএস: 1 পিএক্স;
@ স্ক্রিন-এক্সএস-মিনিট: @ স্ক্রিন-এক্স;
@ স্ক্রিন-ফোন: @ স্ক্রিন-এক্সএস-মিনিট;

// ছোট স্ক্রিন / ট্যাবলেট
// দ্রষ্টব্য: v3.0.1 হিসাবে অবধি @ স্ক্রিন-এসএম এবং @ স্ক্রিন-ট্যাবলেট
@ স্ক্রিন-এসএম: 2 পিএক্স;
@ স্ক্রিন-এসএম-মিনিট: @ স্ক্রিন-এসএম;
@ স্ক্রিন-ট্যাবলেট: @ স্ক্রিন-স্ম-মিনিট;

// মিডিয়াম স্ক্রিন / ডেস্কটপ
// দ্রষ্টব্য: v3.0.1 হিসাবে @ স্ক্রিন-এমডি এবং @ স্ক্রিন-ডেস্কটপকে অবচয় করা হয়েছে
@ স্ক্রিন-এমডি: 3 পিএক্স;
@ স্ক্রিন-এমডি-মিনিট: @ স্ক্রিন-এমডি;
@ স্ক্রিন-ডেস্কটপ: @ স্ক্রিন-এমডি-মিনিট;

// বড় স্ক্রিন / প্রশস্ত ডেস্কটপ
// দ্রষ্টব্য: v3.0.1 হিসাবে অবধি @ স্ক্রিন-এলজি এবং @ স্ক্রিন-এলজি-ডেস্কটপ
@ স্ক্রিন-এলজি: 9999px;
@ স্ক্রিন-এলজি-মিনিট: @ স্ক্রিন-এলজি;
@ স্ক্রিন-এলজি-ডেস্কটপ: @ স্ক্রিন-এলজি-মিনিট;

এটি ডেস্কটপ স্টাইলের মিডিয়া ক্যোয়ারীতে কমপক্ষে প্রস্থ নির্ধারণ করে যাতে এটি সমস্ত স্ক্রিনের প্রস্থে প্রযোজ্য। উন্নতির জন্য 2calledchaos ধন্যবাদ! কিছু বেস শৈলী মোবাইল শৈলীতে সংজ্ঞায়িত করা হয়, তাই আমাদের সেগুলি অন্তর্ভুক্ত করা নিশ্চিত হওয়া উচিত।

সম্পাদনা করুন: ক্রিস নোটস যে আপনি বুটস্ট্র্যাপ সাইটে অনলাইন কম সংকলক এই ভেরিয়েবল সেট করতে পারেন

Question 3

এটি অফিশিয়াল বুটস্ট্র্যাপ 3 রিলিজ ডক্সে ব্যাখ্যা করা হয়েছে :

প্রতিক্রিয়াশীল দর্শনগুলি অক্ষম করার পদক্ষেপ

প্রতিক্রিয়াশীল বৈশিষ্ট্যগুলি অক্ষম করতে, এই পদক্ষেপগুলি অনুসরণ করুন। এটি নীচে পরিবর্তিত টেম্পলেটটিতে ক্রিয়াতে দেখুন।

<meta>সিএসএস ডক্সে উল্লিখিত ভিউপোর্টটি সরান (বা কেবল যোগ করবেন না)

সর্বাধিক প্রস্থ সহ সমস্ত গ্রিড স্তরগুলির জন্য। কনটেনারে সর্বাধিক প্রস্থ সরিয়ে ফেলুন: কোনওটিই গুরুত্বপূর্ণ নয়; এবং প্রস্থের মতো একটি নিয়মিত প্রস্থ সেট করুন: 970px;। নিশ্চিত হয়ে নিন যে এটি ডিফল্ট বুটস্ট্র্যাপ সিএসএসের পরে আসে। আপনি মিডিয়া ক্যোয়ারী বা কিছু নির্বাচক-ফু দিয়ে importantচ্ছিকভাবে এড়াতে পারবেন।

যদি ন্যাবারগুলি ব্যবহার করা হয় তবে সমস্ত নাবারটি ভেঙে পড়া এবং প্রসারিত আচরণটি পূর্বাবস্থায় ফিরিয়ে আনুন (এটি এখানে দেখানো খুব বেশি, সুতরাং উদাহরণটি উঁকি দিন)।

গ্রিড লেআউটগুলির জন্য, মাঝারি / বড়দের পাশাপাশি বা তার জায়গায় .col-xs- * ক্লাস ব্যবহার করুন। চিন্তা করবেন না, অতিরিক্ত-ছোট ডিভাইস গ্রিড সমস্ত রেজোলিউশন পর্যন্ত স্কেল করে, সুতরাং আপনি সেখানে সেট হয়ে গেছেন।

আইই 8 এর জন্য আপনার এখনও রেসপন্ড.জেএস দরকার (যেহেতু আমাদের মিডিয়া প্রশ্নগুলি এখনও আছে এবং এটি বাছাই করা দরকার)। এটি কেবল বুটস্ট্র্যাপের "মোবাইল সাইট" অক্ষম করে।

GetBootstrap.com/example/non-responsive/ এও উদাহরণ দেখুন

Question 4

আপনার বুটস্ট্র্যাপ v3.1.1 অ-প্রতিক্রিয়াশীল হওয়া কতটা সহজ তা আমি ইদানীং এটি বের করেছি। এর মধ্যে নাবার্স কলপেজ না করা অন্তর্ভুক্ত। সবাই এটা জানেন কিনা জানি না তবে আমি এটি শেয়ার করতে চাই।

একটি প্রতিক্রিয়াবিহীন বুটস্রেপ v3.1.1 এর দুটি পদক্ষেপ

প্রথমে একটি CSS ফাইলের নাম এটি অ-প্রতিক্রিয়াশীল CSS হিসাবে তৈরি করুন। এটি আপনার থিমগুলিতে যুক্ত করা বা বুটস্ট্র্যাপ সিএসএস ফাইলের ঠিক পরে লিঙ্ক করা নিশ্চিত করুন।

দ্বিতীয়ত, আপনার অ-প্রতিক্রিয়াশীল 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 এ উদাহরণ থেকে অ-প্রতিক্রিয়াশীল । CSS

Question 5

উত্স থেকে: http://getbootstrap.com/getting-started/#disable- দায়িত্বজ্ঞানহীন

<meta>সিএসএস ডক্সে উল্লিখিত ভিউপোর্টটি ছাড়ুন
ওভাররাইড widthউপর .containerএকটি একক প্রস্থ সঙ্গে প্রতিটি গ্রিড স্তর জন্য, উদাহরণস্বরূপ width: 970px !important;নিশ্চিত করুন যে এই ডিফল্ট বুটস্ট্র্যাপ সিএসএস পরে আসে হতে। আপনি !importantমিডিয়া ক্যোয়ারী বা কিছু নির্বাচক-ফু দিয়ে optionচ্ছিকভাবে এড়াতে পারবেন ।
যদি নাবারগুলি ব্যবহার করা হয়, তবে সমস্ত নাবারটি ভেঙে পড়া এবং প্রসারিত আচরণ সরিয়ে দিন।
গ্রিড লেআউটগুলির .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 {
    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`

আমি আমার সমস্ত কাস্টম সিএসএসকে দুটি ফাইলে বিভক্ত করে শেষ করেছি আমি বুটস্ট্র্যাপ নেভিগেশন ব্যবহার করি না তবে আমার নিজের তাই এটি আমার কাস্টম শৈলীর বেশিরভাগ অংশ, সুতরাং এটি আপনার সম্পূর্ণ সমস্যার সমাধান করবে না তবে এটি আমার পক্ষে কাজ করে

এবং আমি অ-প্রতিক্রিয়াশীল 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" />

অ-প্রতিক্রিয়াশীল। CSS হ'ল বুটস্ট্র্যাপের জন্য ওভাররাইডগুলি রয়েছে আমার উদ্বেগের বিন্যাস তাই সেখানে খুব বেশি কিছু নেই, প্রদত্ত যে আমি নিজের উপায়ে নেভিগেশনটি পরিচালনা করি যাতে এর জন্য সিএসএস হয় এবং অন্য বিটগুলি আমার অন্যান্য সিএসএস ফাইলগুলিতে থাকে

দয়া করে মনে রাখবেন যে আমার সেটআপটি ডেস্কটপ ব্রাউজারগুলিতে ডেস্কটপের মতো আচরণ করে যা আমি দেখেছি এমন অন্যান্য সমাধানগুলির তুলনায় যা কেবলমাত্র আমার জন্য মোবাইল ডিভাইসে দেখেছিল বলে মনে হয় এমন ভিউপোর্টটিকে উপেক্ষা করবে