Леська и людоед - Светлана Лаврова Леська и людоед - Светлана Лаврова
Развод. Трофей для командора (СИ) - Мелина Боярова Развод. Трофей для командора (СИ) - Мелина Боярова
Не выбирай меня! (СИ) - Холлей Ниизла Не выбирай меня! (СИ) - Холлей Ниизла
Причины религиозных сомнений - Александр Введенский Причины религиозных сомнений - Александр Введенский
Демон тринадцатого месяца (СИ) - Cofe Демон тринадцатого месяца (СИ) - Cofe
Оживи покойника - (Алексрома) Ромаданов Оживи покойника - (Алексрома) Ромаданов
Здоровье сердца и сосудов - Антон Родионов Здоровье сердца и сосудов - Антон Родионов
Категории
Меню
Самые читаемые
Рассвет русского царства. Книга 2 - Тимофей Грехов
Прикид - Кассандра Брук
Теги
Автор Неизвестен Агата Кристи Айзек Азимов Антон Чехов БСЭ БСЭ Барбара Картленд Вокруг Света Газета Завтра Газета Илья Мельников Кир Булычев Коллектив авторов Лев Толстой Максим Горький Марина Серова Роберт Шекли Роджер Желязны Рэй Брэдбери Сборник Стивен Кинг неизвестен Автор
Показать все теги
💎Читать книги // БЕСПЛАТНО // 📱Online » Компьютеры и Интернет » Прочая околокомпьтерная литература » Bootstrap: Быстрое создание современных сайтов - Тимур Машнин

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

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

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 2 3 4 5
Перейти на страницу:

Как создать меню навигации с кнопками?

Вопрос 29

Как создать вертикальное меню навигации с кнопками?

Вопрос 30

Что такое bootstrap navbar?

Вопрос 31

Как создать NavBar в bootstrap?

Вопрос 32

Что такое bootstrap breadcrumb?

Вопрос 33

Какой класс используется для базовой нумерации страниц?

Вопрос 34

Как настраивать ссылки нумерации страниц?

Вопрос 35

Что такое bootstrap метки?

Вопрос 36

Что такое bootstrap бейджики?

Вопрос 37

Что такое Bootstrap Jumbotron?

Вопрос 38

Что такое Bootstrap page header?

Вопрос 39

Как создать миниатюры thumbnails, используя Bootstrap?

Вопрос 40

Как настроить миниатюры, используя Bootstrap?

Вопрос 41

Что такое bootstrap alerts?

Вопрос 42

Как создать bootstrap alert?

Вопрос 43

Как создать Bootstrap Dismissal Alert?

Вопрос 44

Как создать прогресс-бар, используя Bootstrap?

Вопрос 45

Как создать альтернативный индикатор, используя bootstrap?

Вопрос 46

Как создать прогресс-бар в полоску, используя bootstrap?

Вопрос 47

Как создать анимированный прогресс-бар, используя bootstrap?

Вопрос 48

Как создать набор индикаторов, используя bootstrap?

Вопрос 49

Что такое bootstrap медиа-объекты?

Вопрос 50

Что является целью. media класса в bootstrap?

Вопрос 51

Что является целью. media-list класса в bootstrap?

Вопрос 52

Что такое bootstrap panels?

Вопрос 53

Как создать bootstrap панель с заголовком?

Вопрос 54

Как создать bootstrap панель с подвалом?

Вопрос 55

Какие контекстные классы доступны для оформления панелей?

Вопрос 56

Можете ли вы поместить таблицу в bootstrap панели?

Вопрос 57

Можете ли вы поместить listgroup внутри bootstrap панели?

Вопрос 58

Что такое bootstrap well?

Вопрос 59

Что такое Scrollspy плагин?

Вопрос 60

Что такое affix плагин?

Быстрая адаптация сайта для мобильных устройств с помощью Bootstrap

Возьмем в качестве примера простой шаблон с фиксированной шириной, с меню, боковой панелью, контентом и подвалом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN» "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml: lang=«en» lang=«en»>

<head>

<title> </title>

<meta http-equiv=«content-type» content=«application/xhtml+xml; charset=UTF-8» />

<meta name=«author» content=«» />

<meta name=«description» content=«» />

<meta name=«robots» content=«index, follow» />

<link rel=«stylesheet» type=«text/css» media=«screen» href="/file/theme/css/screen. css» />

</head>

<body>

<! – header – >

<div id=«header-wrap»> <div id=«header»>

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

<h1 id=«logo-text»> <a href=«#» title=«»> </a> </h1>

<p id=«slogan»> </p>

<div id=«nav»>

<ul>

<li> <a href=«»> Home </a> </li>

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

<ul style=«height: auto; overflow: auto»>

<li> <a href=«#»> Page1—1 </a> </li>

</ul>

</li>

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

<ul style=«height: auto; overflow: auto»>

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

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

</ul>

</li>

</ul>

</div>

<div id=«google-search»>

<script>

(function () {

var cx = «»;

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

gcse. type = ’text/javascript’;

gcse.async = true;

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

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

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

s.parentNode.insertBefore (gcse, s);

}) ();

</script>

<gcse: search> </gcse: search>

</div>

</div>

</div>

<! – content-outer – >

<div id=«content-wrap» class=«clear»>

<div id=«content»>

<div style=«width:1150px; height:15px; background: url(/file/theme/images/top.png);»>

</div>

<div id=«main»>

</div>

<! – sidebar – >

<div id=«sidebar» style=«width:250px;»>

<div class=«sidemenu»>

<ul>

<li> <a href=«»> Home </a> </li>

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

<ul style=«height: auto; overflow: auto»>

<li> <a href=«#»> Page1—1 </a> </li>

</ul>

</li>

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

<ul style=«height: auto; overflow: auto»>

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

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

</ul>

</li>

</ul>

</div>

<! – /sidebar – > </div>

</div>

<! – /content-out – >

</div>

<! – footer-outer – >

<div id=«footer-outer» class=«clear»>

<div id=«footer-wrap»>

<div style=«margin-left:500px; float: left»>

<p> <strong> <a href=«#top»> Top </a> </strong> </p>

<p style=«margin-left:-100px;»>

&copy; 2015 <strong> </strong>

<strong style=«margin-left:20px;"> E-mail: </strong>

</p>

</div>

</div>

<! – /footer-outer – >

</div>

</body>

</html>

Заменим DOCTYPE на <!DOCTYPE html>.

Атрибут lang в теге html и атрибут charset тега meta уже имеются.

В начало тега <head> добавим:

<! – Latest compiled and minified CSS – >

<link rel=«stylesheet» href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<! – jQuery library – >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<! – Latest compiled JavaScript – >

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

В тег <head> добавим:

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

Обернем заголовок в класс. container и, используя Bootstrap Grid System и Bootstrap Navigation Bar, разместим меню, логотип и форму поиска в шапке.

<div class=«container header»>

<div class=«row»>

<nav class=«navbar navbar-inverse»>

<div class=«container-fluid»>

<div class=«navbar-header»>

<button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=«#myNavbar»>

<span class=«icon-bar»> </span>

<span class=«icon-bar»> </span>

<span class=«icon-bar»> </span>

</button>

</div>

<div class=«collapse navbar-collapse» id=«myNavbar»>

<ul class=«nav navbar-nav»>

<li> <a href="/"> Home </a> </li>

<li class=«dropdown»>

<a class=«dropdown-toggle» data-toggle=«dropdown» href=«#»> Page1 <span class=«caret»> </span> </a>

<ul class=«dropdown-menu inverse-dropdown»>

<li> <a href=«#»> Page1—1 </a> </li>

</ul>

</li>

<li class=«dropdown»>

<a class=«dropdown-toggle» data-toggle=«dropdown» href=«#»> Page2 <span class=«caret»> </span> </a>

<ul class=«dropdown-menu inverse-dropdown»>

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

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

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

<li> <a href=«#»> Page2—4 </a> </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.

1 2 3 4 5
Перейти на страницу:
На этой странице вы можете бесплатно скачать Bootstrap: Быстрое создание современных сайтов - Тимур Машнин торрент бесплатно.
Пожаловаться на ошибку
Похожие материалы
Как сделать сайт удобным. Юзабилити по методу Стива Круга - Стив Круг
Как сделать сайт удобным. Юзабилити по методу Стива Круга - Стив Круг
07.07.2024 - 06:00
Основы программирования на JavaScript - Марк Кан
Основы программирования на JavaScript - Марк Кан
05.07.2024 - 06:00
1.Внутреннее устройство Windows (гл. 1-4) - Марк Руссинович
1.Внутреннее устройство Windows (гл. 1-4) - Марк Руссинович
22.12.2023 - 12:13
Идеальный программист. Как стать профессионалом разработки ПО - Роберт Мартин
Идеальный программист. Как стать профессионалом разработки ПО - Роберт Мартин
04.02.2024 - 07:00
Цифровой журнал «Компьютерра» № 184 - Коллектив Авторов
Цифровой журнал «Компьютерра» № 184 - Коллектив Авторов
18.06.2024 - 22:00
Цифровой журнал «Компьютерра» № 69 - Коллектив Авторов
Цифровой журнал «Компьютерра» № 69 - Коллектив Авторов
22.12.2023 - 15:53
Комментарии
Открыть боковую панель
Комментарии
Топ месяца
Черная невеста - Валерия Вербинина
Черная невеста - Валерия Вербинина
Про колокол Бим - Николай Агафонов
Про колокол Бим - Николай Агафонов
Тест Бромгекфельца - Наталья Егорова
Тест Бромгекфельца - Наталья Егорова

Copyright @ chitaem-online.com 2024 - 2026. Все права защищены.


Почта для связи: readebookcom@gmail.com

  • Правообладателям
  • Политика конфиденциальности