Что такое начальная загрузка?
Bootstrap-это фронтальная структура для быстрой разработки веб-приложений и веб-сайтов. Bootstrap основан на HTML, CSS и JavaScript.
история
Bootstrap был разработан Марком Отто из Twitter и Джейкобом Торнтоном. Bootstrap - это продукт с открытым исходным кодом, выпущенный на Github в августе 2011 года.
Написав эту статью, я хочу написать следующее содержимое этой статьи:
1. Основываясь на моем понимании начальной загрузки, я сделаю небольшое резюме.
2. Я буду украшать и оптимизировать пользовательский интерфейс и код для примеров обучения начальной загрузке (2) с нуля, в основном, чтобы рассказать о том, как я сделал эффект, который хотел.
3. Лучше научить людей, как ловить рыбу, чем учить людей, как ловить рыбу. Используйте свои собственные примеры (потому что вы также новичок, и то, что вы пишете, может быть более подходящим для начинающих), и говорите о ловушках, с которыми сталкиваются в процессе написания кода и точкам, на которые необходимо обратить внимание.
Без лишних слов, давайте начнем:
1. Небольшая резюме начальной загрузки
Основываясь на описании официальной документации Bootstrap (http://v3.bootcss.com/), Bootstrap разделен на три больших блока: стиль CSS, компоненты и подключаемый модуль JavaScript.
Прежде всего, ясно, что Bootstrap - это структура, что означает, что если другие делают колеса, вы можете использовать их напрямую, чтобы не создавать колеса самостоятельно. Таким образом, нам нужно уточнить два момента: какие колеса это колеса и как их использовать.
1. Стиль CSS: в основном представляет глобальный стиль растровой системы и начальной загрузки. Реализовано путем установки значения класса.
1.1 Система сетки:
Это позволяет нам легко реализовать макет HTML -страниц (http://v3.bootcss.com/css/#grid).
Я думаю, что система сетки очень важна. Поскольку макет HTML -страниц является важной и громоздкой задачей (вы можете взглянуть на введение в макет в W3School http://www.w3school.com.cn/html/html_layout.asp, посмотрите на код в примере, и вы будете понимать), и совместимость различных брейусов и департаментов, которые необходимы для того, чтобы это было настолько навязчиво.
Растровая система значительно упростила это. Откройте приведенное выше подключение к системе сетки, и вы обнаружите, что вам нужно только назначить соответствующее значение атрибуту класса элемента HTML в соответствии с эффектом, который вы хотите достичь, и вы также можете установить различные эффекты на устройства разных размеров экрана.
1.2 Bootstrap Global Style:
Вот как Bootstrap красиво используется HTML -элементы (например, Div, Button, P, Table, IMG и т. Д.). Присваивая соответствующее значение атрибуту класса элемента HTML, вы можете получить желаемый эффект.
Давайте приведем самый простой пример:
Как показано на приведенном выше рисунке, Bootstrap позволяет изменить значение класса элемента кнопки, чтобы изменить размер кнопки без необходимости изменений изменения файла CSS или встроить значение стиля элемента.
2. Компонент: Я думаю, что компонент-это начальная загрузка, которая объединяет некоторые элементы (HTML-элементы и код JavaScript) в компоненты и предоставляет много очень красивых и практических икон. Эти компоненты в основном используются в разработке HTML. Реализовано путем установки значения класса. (http://v3.bootcss.com/components/)
Давайте приведем самый простой пример:
Как показано на рисунке выше, когда нам нужно реализовать функцию навигации. Найдите соответствующие компоненты в Boostrap и назначьте соответствующие значения класса, UL и LI в соответствии с вашими собственными потребностями.
3. Плагин JavaScript: я думаю, что плагин Javascript от Bootstrap-это «колесо», которое инкапсулирует общие функции веб-взаимодействия. Вам нужно только установить атрибут класса и атрибут данных для реализации обычно используемых функций веб -взаимодействия без необходимости писать много кода JavaScript самостоятельно.
Прежде всего, давайте поговорим о маленьком эпизоде. Новички могут ошибочно подумать, что «JavaScript» и «Java» имеют глубокую связь и могут даже подумать, что JavaScript - вариант Java. На самом деле, это не так. JavaScript - это язык сценариев, разработанный Netscape для Интернета. На самом деле, его имя - «Livescript». Позже Netscape достиг сотрудничества с Sun (то есть компании, которая изобрела Java, которая позже была приобретена Oracle). В то время язык Java был на своем пике и был очень известен. Чтобы ездить на поездке, он изменил свое название на JavaScript. Настолько, что некоторые люди шутили: разница между «Java» и «JavaScript» совпадает с разницей между «Lei Feng» и «Tower Lei Feng».
Вернувшись к теме, мы знаем, что JavaScript существует для предоставления возможностей взаимодействия веб -страниц. Следовательно, богатые подключаемые джавазипт на Bootsript могут сделать вам удобно реализовать обычно используемые функции веб-взаимодействия без необходимости сосредоточиться на «создании колес».
Как показано на рисунке выше, с использованием плагина Bootstrap's Carousel (http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html, официальный документ начальной загрузки не переводится в китайский язык, но существует очень подробный китайский перевод на Runoob, и вы можете модифицировать код в Интернете, чтобы представить эффект наблюдения, который является ими, который является ими, который является ими, который является ими, который является ими. Вы можете легко реализовать функцию каруселя с изображением, которую сейчас использует многие веб -сайты. Здесь вам нужно только назначить соответствующие значения класса и изображения SRC в соответствии с учебником по вышеуказанной ссылке, и вам даже не нужно устанавливать значение данных.
2. Украсить и оптимизировать пользовательский интерфейс и код для примеров обучения начальной загрузке (2) с нуля
На следующем рисунке показаны эффекты, достигнутые в предыдущем уроке:
Мы видим, что есть следующие недостатки, которые необходимо исправить:
(1) Нажмите на конкретного одноклассника и отобразите их информацию, и она не выбрана. (Когда вы нажимаете в начале, вы будете в выбранном состоянии, но это просто эффект кнопки. Если вы нажмете пустое пространство, выбранное состояние исчезнет)
(2) Цвета однообразные и не очень красивые.
(3) макет необходимо отрегулировать. Информационное поле - это место, где нам нужна информация и должна быть максимально большей. Лучше всего скрыть ненужную коробку, когда она отображается.
(4) Для кода код JavaScript в начальной загрузке (2) с нуля записан на странице HTML, а есть дублирующие сегменты кода. Дублирующие сегменты кода должны быть записаны в функции, которые могут уменьшить размер кода. При изменении кода я могу просто изменить соответствующую функцию непосредственно, не искавая по одному месту за раз. Код JavaScript может быть записан в файлы JS, чтобы отделить HTML -страницы и код JavaScript.
Технический отбор (склонно говоря, он состоит в том, чтобы подумать о том, как использовать то, что уже находится в рамках начальной загрузки для достижения желаемого эффекта):
1. Сначала отрегулируйте макет, отрегулируйте информационное поле и поле класса вместе и отобразите поле класса сверху.
Очевидно, что нам нужно только разместить Div, где находится информационное поле, и Div Компания класса в той же строке в DIV, и изменить значение атрибута класса «COL-MD», связанное с системой сетки для ее достижения. Например, если мы хотим, чтобы они отображали соотношение 2: 1, то атрибут класса информационного окна должен иметь COL-MD-8, в то время как окно класса должна быть COL-MD-4.
Стоит отметить, что фронт-конце никогда не может быть одноэтапной разработкой. Часто первоначальный код - это не идеальный результат, который мы хотим, и необходимо осторожно отрегулировать. В качестве примера, каждый должен научиться искать самостоятельно, попытаться вносить постоянные корректировки (последующие корректировки не будут объяснены в конкретном процессе):
После того, как мы изменим код, представленное эффект выглядит следующим образом:
Очевидно, что на каждой строке выше отображается только один класс, что является пустой тратой места. Две части ниже не выровнены.
Удалите «btn-group-vertical» в атрибуте класса компонента Div, а также добавьте Col-MD-6 в атрибут класса TMP_Button в коде JS. Кроме того, наблюдается, что после установки первая строка имеет странное отступ по сравнению со второй строкой:
Нет никаких сомнений в том, что такого рода изменения внешнего вида и макета связаны с CSS. В настоящее время мы можем взглянуть на конкретные CSS элемента.
Возьмите Chrome в качестве примера:
Щелкните правой кнопкой мыши этот элемент и выберите осмотреть, что означает просмотр. Вы найдете соответствующий код в поле справа. Благодаря сравнению мы обнаружили, что это проблема левого края. Это свойство является по умолчанию в платформе начальной загрузки и наследуется от верхнего элемента. Некоторые из них -1px, а некоторые -0px. Нам просто нужно изменить его на то же самое, например, все изменены на 0PX:
В TMP_BUTTON в коде JS измените атрибут стиля и добавьте «Margin-Left: 0px;». Некоторые люди думают, что шрифт не очень хорош, чтобы смотреть в центр, поэтому они могут добавить текстовое соглашение: слева и установить текст на кнопку, чтобы начать слева.
Исправленные эффекты:
2. Добавьте кнопку сгиба, чтобы пользователи могли скрыть/открыть поле класса через эту кнопку. Нажимая однокласснику, чтобы отобразить подробную информацию, он автоматически скрывает ее, чтобы сохранить много места для отображения информации.
Чтобы добавить кнопку сгиба, вы можете обратиться к http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html.
Кроме того, мы можем добавить симпатичный значок в кнопку складывания, и его можно легко достичь, ссылаясь на учебник http://v3.bootcss.com/components/#glyphicons.
Нажав на одноклассника, чтобы отобразить подробную информацию, она будет автоматически скрыта. Вам необходимо изменить событие Click of Class Mate, то есть соответствующий код JS.
Мы проверили использование плагина складывания начальной загрузки http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html (это лучше, официальная часть еще не была переведена) и обнаружила следующее контент:
Оказывается, что Clapse и в значениях в классе атрибут управляют функциями скрытых и отображения. Затем нам нужно только изменить соответствующий атрибут класса элемента HTML, чтобы выполнить операцию «Show/Hide» в коде Click Click Click js. Поэтому добавьте следующее операцию в функцию Click of Colbort Classate:
$ ("#collapseOne"). attr ("class", "коллапс панели-коллапса");
3. Исправлена ошибка, которая «нажмите на конкретных учеников и отображает их информацию, и нет выбранного состояния».
Проверяя документ, http://www.runoob.com/bootstrap/bootstrap-button-plugin.html мы устанавливаем свойство кнопки «Кнопка» на кнопку «Кнопка», которая может автоматически отображать выбранное состояние.
Поэтому мы добавляем кнопку атрибута data-toggle = "к кнопке одноклассника.
В это время возникла еще одна проблема. Я думаю, когда я нажимаю на других одноклассников в следующий раз, исходный клик все еще был в активном состоянии. Что я должен делать?
Проверяя http://www.runoob.com/bootstrap/bootstrap-buttons.html, выбранное состояние появится, когда класс назначение кнопки будет активным. То есть приведенная выше настройка, то есть Bootstrap делает что-то вроде этого: когда нажимается кнопка Data-toggle = ””, активность автоматически добавляется в класс, а выбранное состояние присутствует. Когда нажимает снова, активность автоматически удаляется из класса, и представлено невыбранное состояние.
Другими словами, нам просто нужно сделать эту операцию сами. Например, при нажатии одноклассника я могу удалить все активные кнопки одноклассников из атрибута класса. После завершения нажатия только нажатая кнопка, которую я нажал, находится в активном состоянии.
Поэтому вам нужно только добавить такие операторы в функцию Click of Classate кнопку:
Кода -копия выглядит следующим образом:
$ (". Btn-Classmate"). attr ("class", "btn btn-default btn-classmate btn-info");
Эффект заключается в следующем:
4. Украсить внешний вид кнопки
Найдите раздел кнопки CSS в начальной загрузке:
http://www.runoob.com/bootstrap/bootstrap-buttons.html
Следуя учебному пособию, чтобы изменить его, я просто изменил цвет кнопки здесь, и вы можете изменить его самостоятельно в соответствии с вашими потребностями. Эффект заключается в следующем:
5. Разделение HTML -страниц и кода JavaScript
На самом деле, он разделен на два шага:
Шаг 1: Поместите код JavaScript в файл JS и свяжите его в файле HTML.
Шаг 2: Записать кодовые блоки с помощью JavaScript или очистить функции в функцию и напрямую вызовите функцию.
Поскольку оба шага относительно просты, любой, кто выучил язык программирования, должен сделать это. Я не буду расширяться и написать.
Стоит отметить, что при связывании файлов JS обратите внимание на заказ.
Например, файл JS в начальной загрузке основан на JQUERY и использует множество функций jQuery, поэтому файл JQUERY JS должен объявить ссылку перед файлом JS в начальной загрузке.
Точно так же наш файл JS основан на начальной загрузке, поэтому он должен быть после начальной загрузки, в противном случае код не будет работать.
Наконец, давайте опубликуем соответствующий код:
getClassmate.html:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-complaintable" content = "ie = edge"> <meta name = "viewport" content = "width = device-width, piromy-scale = 1"> <TemptAss> <Teplycle> </title> <Teplycle> <TeplyClAss! -> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim и respond.js для IE8 поддержки элементов HTML5 и медиа-запросов-> <!-WANGN src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js">вы type = "text/css">#btn-group-vertical-classes {overflow-y: auto; Overflow-X: Auto; Высота: 100px;}#btn-group-vertical-classmates {overflow-y: auto; Overflow-X: Auto; Высота: 500px;} кнопка {text-overflow: ellipsis; overflow: hidden; border-radius: 0px;}#context_div {overflow-y: auto; Overflow-X: Auto; Высота: 500px;} </style> </head> <body> <div> <div> <div> <h4 style = "text-align: right;"> <a id = "collapse_a" data-toggle = "collapse" data-parent = "#accordion" href = "#collapseone"> <pran aria-denden = "true"> </spone </h4> </div> <div id = "collapseone"> <div id = "div1-class-class-class-class-class-class-class-class"> <!-где показывают классы-> </div> </div> </div> </div> <br> id = "btn-group-vertical-classmates" rol = "group" aria-label = "..."> <!-где одноклассники показывают-> <button Type = "button" style = "border-radius: 0px;"> Нажмите класс, чтобы показать Classmate. Подробная информация. src = "js/bootstrap.min.js"> </script> <script src = "js/script_getclassmate.js"> </script> </body> </html>script_getclassmate.js:
$ (document) .ready (function () {$. getJson ("resource/classmates.json", function (result) {$. Каждый (результат, функция (i, field) {var tmp_button = $ ('<button Type = "Button style =" Border-Radius: 0px; Text-align: Left; MARGIN: 0PX "DATA-TGL =" Кнопка "Кнопка" Кнопка "Кнопка" choven_state = 0> </button> '). Text (i); tmp_button.attr ("title", i); $ ("#btn-group-vertical-class"). Приложение (tmp_button);}); $ (". Btn.btn-default.btn-class"). wick () {var tmp_chosen = number ($ (this) .attr ("choven_state"))^1; $ (this) .attr ("choven_state", string (tmp_chosen)); showcla ssmates (result); $ (". Btn.btn-default.btn-classmate"). Click (function () {$ (". Btn-classmate"). attr ("class", "btn btn-default btn-classmate btn-info "); $ ("#collapseone "). attr (" class "," collapse collapse "); var selected_classmate = $ (this) .text (); showclassmatedetail (результат, selected_classmate);});});});}); ShowClassmates (result) {$ ("#btn-group-vertical-class-точки"). empty (); var choven_list = new Array (); $ (". Btn.btn-default.btn-class"). Filter (function () {dudeflag = false; if ($ (this) .attr ("choven_state") == "1") {judgeflag = true; choven_list.push ($ (this) .text (); choven_list_x; for (choven_list_x in in choven_list) {if (choven_list [choven_list_x] == i) {$. Каждый (поле, функция (j, field2) {var tmp_button = $ (кнопка <кнопка = "кнопка" style = "border-radius: 0px;" toggle = " choven_state = 0> </button> '). Text (j); tmp_button.attr ("title", j); $ ("#btn-group-vertical-classmates"). Append (tmp_button);});}}});} функция ShowClassMatedEtail (result_classmate)}});}; classmate_context_item; $ ("#context_div"). empty (); $. Каждый (результат, функция (i, field) {$. Каждый (поле, функция (j, field2) {if (j == selected_classmate) {$. Каждый (field2, function (k, field3) {// alert (k); // alert (field3); Field3; var tmp_p = $ ('<p> </p>'). Text (classmate_context_item); $ ("#context_div"). Append (tmp_p);});}});});});});});});});});});});};});});Сотрудники классов.json:
{"Class 001": {"Xiao Wang": {«Пол»: «Мужчина», «Возраст»: «18», «Интерес»: «Футбол», «родной город»: «Шанхай», «Китайский»: «78», «Математика»: «90», «Английский»: «66», «Физика»: «81», «Химика «69», «География»: «92»}, «Сяо Ли»: {«Пол»: «Мужчина», «Возраст»: «20», «Интерес»: «Баскетбол», «Дородовой город»: «Пекин», «Китайский»: «98», «Математика»: «77», «Английский»: «97», «Физик»: «72»: «77»: «77»: «77»: «77»: «77»: «77»: «77». "88", "География": "81"}}, "Класс 002": {"xiao Cai": {"Пол": "Женщина", "Возраст": "19", "Интерес": "Dance", "HomeTown": "Gaoxiong", "Китайский": «93», «Математика»: «80», «Английский»: «92», «», «82»: «82»: «82»: «82»: «92»: «82»: «82»: «82»: «82»: «82»: «82»: «92»: «8.»: «82»: «93»: «80»: «80»: «80»: «80»: «80»: «8.»: «93»: «. «77», «История»: «89», «География»: «83»}}, «класс 003»: {«xiao ma»: {«пол»: «мужчина», «Возраст»: «18», «Интерес»: «Чтение», «Hometown»: «Taibei», «Китайский»: «91», «Математика»: «93»: «93»: «93»: «93»: «93»: «93»: «93»: «93»: «91»: «91»: «91»: «91»: «91»: «91»: «91»: «91»: «91»: «91»: «»: «96 "97","Chemistry": "100","History": "94","Geography": "92"}},"Class 005": {"Xiao Zhang": {"Gender": "Male","Age": "20","Interest": "Running","Hometown": "Guangzhou","Chinese": "67","Math": "70","English": «66», «Физика»: «80», «Химия»: 68, «История»: «79», «География»: «93»}}}Выше приведено учебное пособие по введению для Bootstrap Zero-Basic Введение (iii), представленное вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!