programing

Twitter Bootstrap 3에서 반응 형 기능을 제거하는 방법은 무엇입니까?

nasanasas 2020. 9. 18. 08:17
반응형

Twitter 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에게 감사드립니다! 일부 기본 스타일은 모바일 스타일에 정의되어 있으므로 반드시 포함해야합니다.

편집 : chris는 부트 스트랩 사이트의 온라인 덜 컴파일러에서 이러한 변수를 설정할 수 있다고 말합니다.

이것은 공식 Bootstrap 3 릴리스 문서에 설명되어 있습니다 .

반응 형보기를 비활성화하는 단계

반응 형 기능을 비활성화하려면 다음 단계를 따르십시오. 아래 수정 된 템플릿에서 실제로 확인하십시오.

  1. <meta>CSS 문서에 언급 된 뷰포트를 제거 (또는 추가하지 마십시오)
  2. max-width를 가진 모든 그리드 계층에 대해 .container에서 max-width를 제거하십시오. none! important; 너비와 같은 일반 너비를 설정합니다 : 970px ;. 이것이 기본 부트 스트랩 CSS 뒤에 오는지 확인하십시오. 선택적으로 미디어 쿼리 또는 일부 선택기에서! important를 피할 수 있습니다.
  3. navbar를 사용하는 경우 모든 navbar 축소 및 확장 동작을 실행 취소합니다 (여기에 표시하기에는 너무 많으므로 예제를 살펴보십시오).
  4. 그리드 레이아웃의 경우 중간 / 대형 클래스에 추가하거나 대신 .col-xs- * 클래스를 사용하십시오. 초소형 장치 그리드가 모든 해상도로 확장되므로 걱정하지 마십시오.

IE8 용 Respond.js가 여전히 필요합니다 (미디어 쿼리가 여전히 존재하고 선택해야하기 때문입니다). 이것은 부트 스트랩의 "모바일 사이트"를 비활성화합니다.

GetBootstrap.com/examples/non-responsive/ 의 예제도 참조하십시오.

최근에 부트 스트랩 v3.1.1이 응답하지 않도록 만드는 것이 얼마나 쉬운 지 알아 냈습니다. 여기에는 접히지 않는 탐색 모음이 포함됩니다. 모두가 아는지는 모르겠지만 공유하고 싶습니다.

응답하지 않는 Bootsrap v3.1.1을위한 두 단계

먼저 non-responsive.css로 이름을 css 파일로 만듭니다. 테마에 추가하거나 부트 스트랩 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;
}

그게 다야 .. ^^

출처 : getbootstrap.com에 있는 예제의 non-responsive.css .

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

  1. <meta>CSS 문서에 언급 된 뷰포트 생략
  2. 재정 width상의를 .container하나의 폭이 각 격자 계층에 대한 예를 들어 width: 970px !important;확인이 기본 부트 스트랩 CSS 후 오는합니다. 선택적으로 !importantwith media query 또는 일부 selector-fu를 피할 수 있습니다 .
  3. navbar를 사용하는 경우 모든 navbar 축소 및 확장 동작을 제거합니다.
  4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

I needed to completely remove the Bootstrap responsive feature, i ended up overriding the behavior with the following snippet:

.container {
    width: 960px !important;
}

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

Full snippet: https://gist.github.com/ivanminutillo/8557293

You can do that by using the Bootstrap 3 CSS with non-responsive features

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

If you want a fixed size website this should be fairly simple:

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

Unless you are using .container-fluid, then also add:

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}

Look at www.goo.gl/2SIOJj it is a work in progress but it may help you.

I use cookie to define if i want desktop or responsive version. In the footer of the page you can find two spans and in general.js is the script to handle the clicks. 

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

i ended up splitting all my custom css into two files i don't use bootstrap navigation but my own so that is majority of my custom styles, so it will not resolve your entire problem but it works for me

and i also created non-responsive.css that forces the grid to maintain the large screen version

in case u select mobile i would load / echo 

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

in case you select desktop i would load /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" />

the non-responsive.css is the one that has overrides for bootstrap my concern is layout so there is not much in there, given that i handle the navigation in my own way so css for it and the other bits is in my other css files

please note that my setup does behave as desktop even on desktop browsers unlike some other solutions i have seen that will only ignore the viewport that seems to have wotked only on mobile devices for me

참고URL : https://stackoverflow.com/questions/17935601/how-to-remove-responsive-features-in-twitter-bootstrap-3

반응형

'programing' 카테고리의 다른 글

Webpack-webpack-dev-server : 명령을 찾을 수 없습니다.  (0) 2020.09.18
Ruby의 외부 프로세스 STDOUT에서 지속적으로 읽기  (0) 2020.09.18
pandas에서 문자열에 목록의 하위 문자열 중 하나가 포함되어 있는지 테스트하는 방법은 무엇입니까?  (0) 2020.09.18
새 JSON 데이터로 데이터 테이블 테이블을 수동으로 업데이트하는 방법  (0) 2020.09.18
내 Visual Studio 2017 팀 탐색기 패널에서 원격 분기 목록을 어떻게 새로 고칠 수 있습니까?  (0) 2020.09.18

'programing'의 다른글

  • 현재글Twitter Bootstrap 3에서 반응 형 기능을 제거하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바