Bootstrap 3以降、レスポンシブスタイルシートと標準スタイルシート用の個別のファイルはなくなりました。では、レスポンシブ機能を簡単に削除するにはどうすればよいですか?
Bootstrap 3以降、レスポンシブスタイルシートと標準スタイルシート用の個別のファイルはなくなりました。では、レスポンシブ機能を簡単に削除するにはどうすればよいですか?
回答:
デスクトップ以外のスタイルを非アクティブ化するには、variables.lessファイルの4行のコードを変更するだけです。次のように、variables.lessファイルに画面幅のブレークポイントを設定します。
//メディアクエリブレークポイント // ------------------------------------------------ - //極小画面/電話 //注:v3.0.1以降、非推奨の@ screen-xsおよび@ screen-phone @ screen-xs:1px; @ screen-xs-min:@ screen-xs; @ screen-phone:@ screen-xs-min; //小さな画面/タブレット //注:v3.0.1以降、非推奨の@ screen-smおよび@ screen-tablet @ screen-sm:2px; @ screen-sm-min:@ screen-sm; @ screen-tablet:@ screen-sm-min; //中画面/デスクトップ //注:v3.0.1以降、非推奨の@ screen-mdおよび@ screen-desktop @ screen-md:3px; @ screen-md-min:@ screen-md; @ screen-desktop:@ screen-md-min; //大画面/ワイドデスクトップ //注:v3.0.1以降、非推奨の@ screen-lgおよび@ screen-lg-desktop @ screen-lg:9999px; @ screen-lg-min:@ screen-lg; @ screen-lg-desktop:@ screen-lg-min;
これにより、デスクトップスタイルのメディアクエリの最小幅が低く設定され、すべての画面幅に適用されます。改善のための2calledchaosに感謝します!一部の基本スタイルはモバイルスタイルで定義されているため、必ず含める必要があります。
編集:クリスは、ブートストラップサイトのオンラインlessコンパイラでこれらの変数を設定できると述べています
@media (min-width: @screen-sm-min)
(つまり、このスタイルをsmブレークポイントとそれより上位のすべてのブレークポイント、つまりsm、md、lgに適用する)、定義がmdに適用されなくなるため、上記のオーバーライドはその仮定を破りますか?@ screen-xsを1pxに設定し、@ screen-smも1pxに設定しました(@ screen-mdが1pxであることに加えて)。このようにして、すべてのxs、sm、およびmdスタイルが適用され、ソースの順序の優先順位でオーバーライドされます。
これは、公式のBootstrap3リリースドキュメントで説明されています。
レスポンシブビューを無効にする手順
レスポンシブ機能を無効にするには、次の手順に従います。以下の変更されたテンプレートで実際の動作を確認してください。
<meta>
CSSドキュメントに記載されているビューポートを削除します(または追加しないでください)- max-widthのすべてのグリッド層の.containerのmax-widthを削除します。none!important; 幅のような通常の幅を設定します:970px;。これがデフォルトのブートストラップCSSの後に来ることを確認してください。オプションで、メディアクエリまたは一部のselector-fuで!importantを回避できます。
- ナビゲーションバーを使用している場合は、すべてのナビゲーションバーの折りたたみと展開の動作を元に戻します(これはここに表示するには多すぎるため、例を確認してください)。
- グリッドレイアウトの場合、中/大クラスに加えて、またはその代わりに.col-xs- *クラスを使用します。心配しないでください。非常に小さいデバイスグリッドはすべての解像度にスケールアップするので、そこに設定されます。
IE8には引き続きRespond.jsが必要です(メディアクエリがまだ存在し、取得する必要があるため)。これにより、Bootstrapの「モバイルサイト」が無効になります。
GetBootstrap.com/examples/non-response/の例も参照してください。
最近、ブートストラップv3.1.1を無応答にするのがいかに簡単かを理解しました。これには、崩壊しないようにするためのナビゲーションバーが含まれます。誰もがこれを知っているかどうかはわかりませんが、共有したいと思います。
応答しないBootsrapv3.1.1への2つのステップ
まず、cssファイル名をnon-response.cssとして作成します。ブートストラップcssファイルの直後にテーマまたはリンクに追加してください。
次に、このコードをnon-response.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;
}
それだけでお楽しみください.. ^^
ソース:http://getbootstrap.com/getting-started/#disable-responsive
<meta>
CSSドキュメントに記載されているビューポートを省略しますwidth
onを.container
単一の幅でオーバーライドしwidth: 970px !important;
ます。たとえば、これがデフォルトのBootstrapCSSの後に来ることを確認してください。オプションで、!important
withmediaクエリまたは一部のselector-fuを回避できます。.col-xs-*
の場合、中/大クラスに加えて、またはその代わりにクラスを使用します。非常に小さいデバイスグリッドはすべての解像度に対応しますので、ご安心ください。Bootstrapレスポンシブ機能を完全に削除する必要があり、次のスニペットで動作をオーバーライドすることになりました。
.container {
width: 960px !important;
}
@media (min-width: 1px) {
.container {
max-width: 940px;
}
.col-lg-1,
.col-lg-2,
[...]
レスポンシブ機能のないBootstrap3CSSを使用してこれを行うことができます
固定サイズのWebサイトが必要な場合、これはかなり単純なはずです。
// 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;
}
www.goo.gl/2SIOJjをご覧くださいこれは進行中の作業ですが、役立つ場合があります。
デスクトップバージョンとレスポンシブバージョンのどちらが必要かを定義するためにCookieを使用します。ページのフッターには2つのスパンがあり、general.jsはクリックを処理するためのスクリプトです。
<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を2つのファイルに分割しました。ブートストラップナビゲーションは使用していませんが、カスタムスタイルの大部分を使用しているので、問題全体を解決することはできませんが、機能します。
また、グリッドに大画面バージョンを維持するように強制するnon-response.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" />
デスクトップを選択した場合、/ 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-response.cssは、ブートストラップのオーバーライドがあるものです。私の懸念はレイアウトであるため、ナビゲーションを独自の方法で処理するため、cssと他のビットは他のcssファイルにあります。
私のセットアップは、私が見た他のいくつかのソリューションとは異なり、デスクトップブラウザでもデスクトップとして動作することに注意してください。これは、モバイルデバイスでのみ動作しているように見えるビューポートのみを無視します。