Как отключить адаптивную функцию Twitter Bootstrap

Последнее обновление: 27 мая 2019 11:35:02 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Вступление

Twitter Bootstrap по умолчанию отзывчивый. Он приспосабливается к различным размерам экрана. Но вы можете отключить эту функцию. Вот как вы можете это сделать. Мы начнем с простого адаптивного шаблона, созданного с помощью Bootstrap, а затем постепенно опустим функции, чтобы в итоге получить не отвечающий шаблон.

Код для стартового адаптивного шаблона выглядит следующим образом

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap responsive Template</title>
    <!-- Bootstrap -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    <div class="container">
    <h1>Bootstrap responsive Template</h1>
    <div class="row">
    <div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
    </div>
 <h1>Bootstrap responsive Template</h1>
<div class="row">
    <div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
    </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Шаг 1

Добавлен метатег области просмотра, чтобы обеспечить правильный рендеринг и масштабирование касанием. Это должно быть опущено в качестве первого шага.

<meta name="viewport" content="width=device-width, initial-scale=1">

Шаг 2

Добавьте новый стиль поверх глухого CSS класса container Bootstrap с одной шириной. Пример следует

width: 970px !important;

Шаг 3

Удалите все сворачивающиеся и расширяющиеся функции из панели навигации, если вы их используете. Из нашего стартового шаблона это показано ниже. которые должны быть удалены

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
   <del>  <!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">--></del>
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
  <del> <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">--></del>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
  <del> <!-- </div><!-- /.navbar-collapse --></del>
  </div><!-- /.container-fluid -->
</nav>

Шаг 4

Либо замените, либо добавьте col-xs- * для сеток. Итак, в нашем примере код для новой сетки будет выглядеть следующим образом

<div class="container">
    <h1>Bootstrap responsive Template</h1>
    <div class="row">
    <div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
    </div>
 <h1>Bootstrap responsive Template</h1>
<div class="row">
    <div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
    </div>
    </div>

Вы можете просмотреть окончательный вывод неотвечающего шаблона здесь .

Одно замечание: вам нужно сохранить файл Respond.js, который используется для IE8.

Предыдущая: Отзывчивый веб-дизайн с Twitter Bootstrap
Далее: Twitter Bootstrap Типографика учебник