|
| 1 | + |
| 2 | +<!DOCTYPE html> |
| 3 | + |
| 4 | +<html lang="ru"> |
| 5 | + |
| 6 | +<head> |
| 7 | + <meta charset="utf-8" /> |
| 8 | + <meta name="format-detection" content="telephone=no" /> |
| 9 | + <meta name="msapplication-tap-highlight" content="no" /> |
| 10 | + <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> |
| 11 | + <link rel="stylesheet" type="text/css" href="../../../../css/read.css" /> |
| 12 | + <title>Coder Book menu</title> |
| 13 | + <script type="text/javascript" src="../../../../higtline/scripts/shCore.js"></script> |
| 14 | + <script type="text/javascript" src="../../../../higtline/scripts/shBrushCSharp.js"></script> |
| 15 | + <link type="text/css" rel="stylesheet" href="../../../../higtline/styles/shCoreDefault.css"/> |
| 16 | + <script type="text/javascript">SyntaxHighlighter.all();</script> |
| 17 | + <script src="../../../../js/Hyphenator.js" type="text/javascript"></script> |
| 18 | +</head> |
| 19 | + |
| 20 | +<body id="pageBody" class="hyphenate"> |
| 21 | + |
| 22 | +<!-- progress bar --> |
| 23 | +<script src="../../../../js/progressBar.js" type="text/javascript"></script> |
| 24 | +<div class="Reading-progress" id="progressBarType1"><span id="Progress-bar-top" class="bar-top" style="display: block !important;"></span></div> |
| 25 | +<div class="Reading-progress" id="progressBarType2"><span id="Progress-bar-bottom" class="bar-bottom"></span></div> |
| 26 | +<div class="Reading-progress" id="progressBarType3"><span id="Progress-bar-left" class="bar-left"></span></div> |
| 27 | +<div class="Reading-progress" id="progressBarType4"><span id="Progress-bar-right" class="bar-right"></span></div> |
| 28 | +<!-- progress bar --> |
| 29 | + |
| 30 | + <div id="lesonPage"> |
| 31 | + |
| 32 | + <div id="lessMenu"> |
| 33 | + <a id="exitLess" href="list.html" ontouchstart="return true;"><img src="../../../../img/menu/ex.png" /></a> |
| 34 | + <div id="aaLess" ontouchstart="return true;" onclick="OpenSettMenu();"><img src="../../../../img/menu/aa.png" /></div> |
| 35 | + <div id="aaLess" ontouchstart="return true;" onclick="OpenSettMenu();"><img src="../../../../img/menu/aa.png" /></div> |
| 36 | + <div id="subMenuInLess" style="display: none;"> |
| 37 | + <a href="../../../../menu/setfontsize-ru.html" ontouchstart="return true;" id="pastMenuInLess">Размер текста</a> |
| 38 | + <a href="../../../../menu/setcolor-ru.html" ontouchstart="return true;" id="pastMenuInLess">Цветовая темы</a> |
| 39 | + <a href="../../../../menu/setProgressBar-ru.html" ontouchstart="return true;" id="pastMenuInLess" style="border: none;">Прогресс бар</a> |
| 40 | + </div> |
| 41 | + <!-- <div id="aaLess" ontouchstart="return true;" onclick="OpenSettMenu();"><img src="../../../../img/menu/aa.png" /></div> |
| 42 | + <div id="subMenuInLess" style="display: none;"> |
| 43 | + <a href="../../../../menu/setfontsize-ru.html" ontouchstart="return true;" id="pastMenuInLess">Размер текста</a> |
| 44 | + <a href="../../../../menu/setcolor-ru.html" ontouchstart="return true;" id="pastMenuInLess">Цветовая темы</a> |
| 45 | + <a href="../../../../menu/setProgressBar-ru.html" ontouchstart="return true;" id="pastMenuInLess" style="border: none;">Прогресс бар</a> |
| 46 | + </div> --> |
| 47 | + <div id="aaLess" ontouchstart="return true;"> |
| 48 | + <div class="bmEdit" onclick="dellBm();" id="bma1" ontouchstart="return true;" style="display: none;"><img src="../../../../img/menu/bmlessa.png" /></div> |
| 49 | + <div class="bmEdit" onclick="setzBm();" id="bm1" ontouchstart="return true;" style="display: block;"><img src="../../../../img/menu/bmless.png" /></div> |
| 50 | + </div> |
| 51 | + </div> |
| 52 | + |
| 53 | + <hr /> |
| 54 | + |
| 55 | + <!-- ПОЧАТОК --> |
| 56 | + |
| 57 | + <h1 id="title"> |
| 58 | + О Bootstrap |
| 59 | + </h1> |
| 60 | + |
| 61 | + <p>Bootstrap (также известен как Twitter Bootstrap) — это свободный набор инструментов для создания сайтов и веб-приложений.</p> |
| 62 | + <p>Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.</p> |
| 63 | + <p>Bootstrap использует современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.</p> |
| 64 | + |
| 65 | + <p><b>Внимание:</b></p> |
| 66 | + <p>Данный курс предполагает знание HTML и CSS. Если вы еще не знакомы с HTML и CSS, пожалуйста, перейдите к соответствующим разделам приложения.</p> |
| 67 | + |
| 68 | + <h1 id="title"> |
| 69 | + История |
| 70 | + </h1> |
| 71 | + |
| 72 | + <p>Bootstrap был разработан Марком Отто и Якобом Торнтоном — сотрудниками Твиттера.</p> |
| 73 | + <p>Этот фреймворк начал разрабатываться как внутренняя библиотека компании Twitter под названием Twitter Blueprint.</p> |
| 74 | + <p>После нескольких месяцев разработки он был открыт под названием Bootstrap 19 августа 2011 года.</p> |
| 75 | + <p>Основными нововведениями второй версии, появившейся 31 января 2012 года, стали 12-колоночная сетка и поддержка адаптивности.</p> |
| 76 | + <p>Третья версия выпущена 19 августа 2013 года.</p> |
| 77 | + <p>В ней адаптивность получила дальнейшее развитие, был осуществлён переход к концепции mobile first, оптимизации прежде всего под мобильные устройства.</p> |
| 78 | + <p>Дизайн по умолчанию стал плоским.</p> |
| 79 | + <p>Работа над четвёртой версией начата 29 октября 2014 года.</p> |
| 80 | + <p>Альфа версия вышла 19 августа 2015 года.</p> |
| 81 | + |
| 82 | + <h1 id="title"> |
| 83 | + Почему стоит использовать Bootstrap |
| 84 | + </h1> |
| 85 | + |
| 86 | + <p>- <b>Переносимость методов.</b></p> |
| 87 | + <p>Начиная с Bootstrap 3 фреймворк состоит из переносимых стилей размещенных в одной библиотеке вместо множества отдельных файлов.</p> |
| 88 | + <p>- <b>Поддержка браузеров.</b></p> |
| 89 | + <p>Сайты созданные при помощи Bootstrap корректно работаю на всех популярных браузерах, таких как Safari, Firefox, Opera, Chrome и даже Internet Explorer.</p> |
| 90 | + <p>- <b>Легко начать.</b></p> |
| 91 | + <p>Любой человек, у которого есть начальные знания по HTML и CSS может начать использовать Bootstrap без предварительного чтения толстых учебников.</p> |
| 92 | + <p>Так же, на официальном сайте Bootstrap, выложена подробная документация по использованию фреймворка.</p> |
| 93 | + <p>- <b>Адаптивный дизайн.</b></p> |
| 94 | + <p>Сайты сделанные при помощи Bootstrap, благодаря поддержке в CSS адаптивного дизайна, одинаково хорошо выглядят и на персональных компьютерах, и на планшетах, и на смартфонах.</p> |
| 95 | + <p>- Обеспечение понятных и однообразных решений компоновки интерфейса.</p> |
| 96 | + <p>- Фреймворк содержит красивые и функциональные встроенные компоненты, которые легко настраиваются.</p> |
| 97 | + |
| 98 | + <h1 id="title"> |
| 99 | + Что входит в пакет Bootstrap |
| 100 | + </h1> |
| 101 | + |
| 102 | + <p><b>Основа сайта:</b> Bootstrap предоставляет базовую структуру сайта с такими включенными элементами, как сетка (Grid), стили компоновки и фон.</p> |
| 103 | + <p><b>CSS:</b> Bootstrap поставляется с глобальными настройками CSS, основными HTML атрибутами и вставленными расширяемыми классами.</p> |
| 104 | + <p><b>JavaScript плагины:</b> Bootstrap содержит больше десятка специальных jQuery плагинов. Вы можете легко использовать сразу все или только поодиночке.</p> |
| 105 | + <p><b>Компоненты:</b> Bootstrap содержит пригодные для многократного использования сборки компонентов содержащие в себе иконки, выпадающие списки, навигацию, предупреждения, всплывающие окна и многое другое.</p> |
| 106 | + <p><b>Настройка:</b> Вы можете настроить компоненты, переменные LESS и jQuery плагины под свои непосредственные нужды.</p> |
| 107 | + |
| 108 | + <script src="../../../../js/progressBarSetIni.js" type="text/javascript"></script> |
| 109 | + |
| 110 | + <div id="lessMenu" style="margin: 30px 0 0 0;"> |
| 111 | + <hr /> |
| 112 | + <a href="02.html"><div id="aaLess" ontouchstart="return true;"><img src="../../../../img/menu/ne.png" /></div></a> |
| 113 | + </div> |
| 114 | + |
| 115 | + </div> |
| 116 | + |
| 117 | + <script type="text/javascript" src="../../../../cordova.js"></script> |
| 118 | + <script type="text/javascript" src="../../../../js/global.js"></script> |
| 119 | + <script type="text/javascript"> |
| 120 | + changeColor(); |
| 121 | + if (localStorage.getItem("fSize") < 1) { fSize = 16; localStorage.setItem("fSize", 16); } else { fSize = localStorage.getItem("fSize"); } |
| 122 | + document.getElementById("pageBody").style.fontSize = fSize + "px"; |
| 123 | + |
| 124 | + // goBackMenu |
| 125 | + document.addEventListener("backbutton", goBackMenu, false); |
| 126 | + function goBackMenu() |
| 127 | + { |
| 128 | + window.location.href = 'list.html'; |
| 129 | + } |
| 130 | + |
| 131 | + function changeColor() |
| 132 | + { |
| 133 | + if (localStorage.getItem("colorSheme") <= 1) |
| 134 | + { |
| 135 | + document.getElementById("pageBody").style.backgroundColor = localStorage.getItem("#f0f0f0"); |
| 136 | + } |
| 137 | + |
| 138 | + if (localStorage.getItem("colorSheme") == 2) |
| 139 | + { |
| 140 | + document.getElementById("pageBody").style.backgroundColor = localStorage.getItem("#212121"); |
| 141 | + document.getElementById("pageBody").style.color = localStorage.getItem("#efefef"); |
| 142 | + } |
| 143 | + |
| 144 | + if (localStorage.getItem("colorSheme") == 3) |
| 145 | + { |
| 146 | + document.getElementById("pageBody").style.backgroundColor = localStorage.getItem("#efe4d0"); |
| 147 | + } |
| 148 | + } |
| 149 | + |
| 150 | + // bm |
| 151 | + if (localStorage.getItem("arrs") != null) |
| 152 | + { |
| 153 | + var arrs = JSON.parse(localStorage.getItem("arrs")); |
| 154 | + } |
| 155 | + else |
| 156 | + { |
| 157 | + var arrs = []; |
| 158 | + } |
| 159 | + |
| 160 | + var names = ["../acharter/ru/bootstrap/book/01.html", "О Bootstrap", "bm1"]; |
| 161 | + |
| 162 | + function setzBm() { arrs.push(names); localStorage.setItem("arrs", JSON.stringify(arrs)); localStorage.setItem("bm1", 1); RefBms(); } |
| 163 | + |
| 164 | + window.onload = function() { RefBms(); } |
| 165 | + |
| 166 | + function RefBms() |
| 167 | + { |
| 168 | + if (localStorage.getItem("bm1") == 1) { document.getElementById("bma1").style.display = "block"; document.getElementById("bm1").style.display = "none"; } else { document.getElementById("bma1").style.display = "none"; document.getElementById("bm1").style.display = "block"; } |
| 169 | + } |
| 170 | + |
| 171 | + function dellBm() { for (var i = 0; i < arrs.length; i++) { if (arrs[i].indexOf("О Bootstrap") == 1) { arrs.splice(i, 1); localStorage.setItem("bm1", 0); RefBms(); localStorage.setItem("arrs", JSON.stringify(arrs)); } } } |
| 172 | + |
| 173 | + // sub menu |
| 174 | + var serTimeToClose = 1000; |
| 175 | + |
| 176 | + function OpenSettMenu() |
| 177 | + { |
| 178 | + document.getElementById("subMenuInLess").style.display = "block"; |
| 179 | + timeToEvAct(); |
| 180 | + serTimeToClose = 1; |
| 181 | + } |
| 182 | + |
| 183 | + function timeToEvAct() |
| 184 | + { |
| 185 | + setTimeout(function() { serTimeToClose = 0 }, 100); |
| 186 | + } |
| 187 | + |
| 188 | + window.addEventListener('click', function(e){ |
| 189 | + |
| 190 | + if (serTimeToClose <= 0) |
| 191 | + { |
| 192 | + if (document.getElementById('subMenuInLess').contains(e.target)) |
| 193 | + { |
| 194 | + // |
| 195 | + } |
| 196 | + else |
| 197 | + { |
| 198 | + document.getElementById("subMenuInLess").style.display = "none"; |
| 199 | + } |
| 200 | + } |
| 201 | + }); |
| 202 | + |
| 203 | + </script> |
| 204 | + |
| 205 | +</body> |
| 206 | +</html> |
0 commit comments