Bootstrap: Быстрое создание современных сайтов. Тимур Машнин

Читать онлайн книгу.

Bootstrap: Быстрое создание современных сайтов - Тимур Машнин


Скачать книгу
</li>

      <li> <a href=«#»> Page2—5 </a> </li>

      </ul>

      </li>

      <li> <a href=«#»> Contacts </a> </li>

      </ul>

      </div>

      </div>

      </nav>

      </div>

      <a name=«top»> </a>

      <div class=«row»>

      <div class=«col-sm-6 text-center»>

      <h1> <a href="/"> </a> </h1>

      <p> </p>

      </div>

      <div class=«col-sm-4 pull-right»>

      <script>

      (function () {

      var cx = «»;

      var gcse = document.createElement (’script’);

      gcse. type = ’text/javascript’;

      gcse.async = true;

      gcse.src = (document.location.protocol == ’https:'? ’https:': ’http:») +

      '//cse.google.com/cse. js? cx=' + cx;

      var s = document.getElementsByTagName (’script’) [0];

      s.parentNode.insertBefore (gcse, s);

      }) ();

      </script>

      <gcse: searchbox-only> </gcse: searchbox-only>

      </div>

      <style>

      .gsc-search-button {

      display: none;

      }

      .gsib_a {

      height:40px;

      }

      .gsc-input-box {

      height: 40px;

      }

      </style>

      <div style=«height:15px; background: black;" class=«col-sm-12»>

      </div>

      </div>

      </div>

      Уберем боковую панель и свой файл CSS, вместо него добавим CSS стили:

      <style>

      body {

      font-size:18px;

      font-famile: Georgia;

      color: #000;

      margin: 0;

      padding: 0;

      background: gray;

      }

      .header {

      /* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+4,fdffff+7,fdffff+7,e1ffff+17,e6f8fd+28,c8eefb+47,bee4f8+68,b1d8f5+100 */

      background: #e1ffff; /* Old browsers */

      background: -moz-linear-gradient (top, #e1ffff 0%, #e1ffff 4%, #fdffff 7%, #fdffff 7%, #e1ffff 17%, #e6f8fd 28%, #c8eefb 47%, #bee4f8 68%, #b1d8f5 100%); /* FF3.6—15 */

      background: -webkit-linear-gradient (top, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* Chrome10—25,Safari5.1—6 */

      background: linear-gradient (to bottom, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

      filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=«#e1ffff’, endColorstr=«#b1d8f5», GradientType=0); /* IE6—9 */

      }

      .inverse-dropdown {

      background-color: black;

      }

      .inverse-dropdown li a {

      color: white;

      }

      .inverse-dropdown li a: hover {

      color: black;

      }

      .content {

      background: lightgrey;

      }

      .footer {

      /* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+86,207cca+93,7db9e8+100 */

      background: #1e5799; /* Old browsers */

      background: -moz-radial-gradient (center, ellipse cover, #1e5799 0%, #2989d8 86%, #207cca 93%, #7db9e8 100%); /* FF3.6—15 */

      background: -webkit-radial-gradient (center, ellipse cover, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* Chrome10—25,Safari5.1—6 */

      background: radial-gradient (ellipse at center, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

      filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=«#1e5799», endColorstr=«#7db9e8», GradientType=1); /* IE6—9 fallback on horizontal gradient */

      }

      .navigation {

      margin: 10px 20px; padding-bottom: 10px;

      width: 560px;

      }

      .navigation a: link,

      .navigation a: visited {

      float: left;

      display: block;

      margin: 10px 10px 0 0;

      padding: 5px 7px;

      text-transform: lowercase;

      text-decoration: none;

      font-weight: bold;

      color: #fff;

      background: #2C76A6;

      border-width: 1px;

      border-style: solid;

      border-color: #86BBDF #245F86 #245F86 #86BBDF;

      }

      .navigation a: hover {

      background: #FF3399;

      border-width: 1px;

      border-style: solid;

      border-color: #FF75BA #EA0075 #EA0075 #FF75BA;

      }

      </style>

      Таким образом, исключим из шаблона все фоновые изображения, которые могут создавать горизонтальную прокрутку, заменим фоновые изображения на CSS градиенты.

      Обернем контент и подвал в класс. container и используем Bootstrap Grid System.

      <! – content-outer – >

      <div class=«container content»>

      <div class=«row»>

      <div class=«col-sm-11 col-md-offset-1»>

      <span


Скачать книгу