Что такое начальная загрузка?
Bootstrap-это фронтальная структура для быстрой разработки веб-приложений и веб-сайтов. Bootstrap основан на HTML, CSS и JavaScript.
история
Bootstrap был разработан Марком Отто из Twitter и Джейкобом Торнтоном. Bootstrap - это продукт с открытым исходным кодом, выпущенный на Github в августе 2011 года.
Эта статья посвящена введению нулевого ввода Bootstrap (2). Конкретные детали следующие:
Веб -сайты, которые часто просматривают информацию во время процесса:
http://www.w3school.com.cn/ Это веб -сайт, созданный Alliance W3C для распространения стандарта W3C. На веб -стороне есть много технологий, и вы можете рассматривать его как энциклопедию веб -технологий.
http://v3.bootcss.com/ Излишне говорить, официальный документ Bootstrap3
http://www.runoob.com/ на самом деле похоже на W3School, но это немного сложнее, чем W3School. Большая часть контента переводится с оригинального веб -сайта W3C English и официальных английских документов оригинальной начальной загрузки, но я чувствую, что его качество перевода выше (потому что первые два веб -сайта также были переведены на него прямо), и некоторые случаи легче понять.
Без лишних слов, давайте начнем:
(1) четко достичь целей
Как показано на рисунке ниже, это простой веб -сайт, который мы хотим реализовать. Макет прост, и нет ослепительного эффекта. Тем не менее, необходимо реализовать функцию: прочитать соответствующую информацию из файла JSON (вы можете проверить вышеуказанный веб -сайт на наличие знаний о JSON) и отобразить ее на веб -сайте.
Содержимое файла JSON:
{"Class 001": {"xiao wang": {"пол": "мужчина", "возраст": "18", "интерес": «футбол», «родной город»: «Шанхай»}, «Сяо Ли»: {«Пол»: «Мужчина», «Возраст»: «20», «Интерес»: «Баскетбол», «homettown»: «Beiing»: «Beiing», «Beiing», «et», «erejing», «egehing»: «erehing»: «erejing»: «Beiing»: «erejing»: «erejing»: «erejing». 002": {"Xiao Cai": {"Gender": "Female","Age": "19","Interest": "Dance","Hometown": "Gaoxiong"}},"Class 003": {"Xiao Ma": {"Gender": "Male","Age": "18","Interest": "Reading","Hometown": "Taibei"}}, "Class 005": {"xiao Zhang": {"пол": "мужчина", "возраст": "20", "интерес": "бег", "родной город": "guangzhou"}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}Прямо сейчас:
макет:
Существует три основных блока: левая сторона первой строки - это список классов, правая сторона первой строки - список имен, а вторая строка - соответствующая информация одноклассников.
Функция:
1. Нажмите на класс в списке классов, чтобы обновить, какие ученики в классе динамически находятся в списке классов, и могут выбрать класс.
2. Нажмите на одноклассника в списке одноклассников и динамически отобразите информацию одноклассника во второй строке. Информация только одного одноклассника может отображаться за раз.
(2) Методы, необходимые для анализа
макет:
Bootstrap: используется для реализации этой простой двухрядной макета, а также проверки столбцов классов и прокрутки (некоторые легко реализовать непосредственно с начальной загрузкой, в то время как другие не могут. Как узнать? Перейдите на три вышеуказанные веб-сайты, чтобы найти и проверить)
Функция:
Используйте JavaScript и Ajax для достижения сбора данных и динамического взаимодействия (в локальном методе обновления).
(3) Анализ технического отбора
1. Реализация макета.
Посмотрев документацию (http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html), я обнаружил, что начальная загрузка выложена с использованием растровой системы. Установив определенные атрибуты класса для Div, я могу достичь желаемого эффекта макета. И вы можете установить различные эффекты на мобильные телефоны, планшеты и настольные компьютеры. Атрибуты класса тегов HTML и какие теги HTML могут быть найдены на W3School.
Стоит отметить, что атрибуты класса элемента могут иметь несколько атрибутов класса.
Например: <div rol = "group" aria-label = "..." id = "btn-group-vertical-class">
Используйте интервалы «пространства» между различными атрибутами, поверьте мне, это позволит вам легко написать сценарии JavaScript и настраивать CSS.
2. Реализуйте вертикальное расположение чисел классов и множественных выборов.
Проверьте http://www.runoob.com/bootstrap/bootstrap-button-groups.html, чтобы узнать, как настроить группы вертикальных кнопок. То есть установите класс Div, где группа кнопок расположена для BTN-Group-Vertical, так что он становится контейнером для хранения группы кнопок.
Проверьте http://www.runoob.com/bootstrap/bootstrap-button-plugin.html и узнайте, как сделать проверку группы кнопок. Реализация выполняется путем добавления атрибута данных toggle = "кнопки" в Div атрибута класса в группу BTN.
3. Реализуйте углы кнопок, которые будут переосмысливаются из округленных углов на прямые углы, добавьте полосы прокрутки в группу кнопок и добавьте ограничения на текст, отображаемый на кнопке, чтобы она не превышала кнопку. Избыточная часть отображается как «...», и когда мышь перемещается и останавливается на кнопке, отображается весь текст:
Небольшая часть (закругленные углы становятся прямыми углами, мыши, зависшие для отображения текста) необходимо установить непосредственно в тег HTML.
Большинство реализаций написаны с помощью CSS:
<Style Type = "text/css">#btn-group-vertical-classes {overflow-y: auto; overflow-x: auto; высота: 150px;}#btn-group-vertical-class-точки скрытый; граница-радий: 0px;} </style><style> Часть кода помещается в голову, то есть между <Head> и </head>.
Общий метод состоит в том, чтобы сначала использовать селектор CSS, чтобы выбрать тег для установки CSS, а затем установить соответствующий стиль в кудрявых скоб.
Так называемый селектор CSS представляет собой «#BTN-Group-Ventical Classes» и «Кнопка» в приведенном выше коде, то есть строке кода на кудрявых скобках. Существует несколько методов использования селектора CSS, и вы можете найти соответствующие методы через веб -сайт W3School.
Поскольку листы в стиле CSS имеют три метода загрузки (CSS -файл; тег <Head>, атрибут стиля в элементе HTML, а эффективный приоритетный порядок: «Стиль на элементе»> «Элемент стиля в заголовке файлов»> «Файл внешнего стиля», мы также ссылаемся на CSS, так что это включает в себя проблемы, но и теки, но не в номере, но имете, но ими, но ими, но имете, но ими, но ими, но ими. Настройка кнопки погранично-радиуса в вышеупомянутом <Syle> не работает).
<1> Напишите атрибут стиля непосредственно в теге элемента. Это самое предпочтительное, так что это определенно сработает.
<2> Измените файл Bootstrap CSS, с которым вы связываете, раз и навсегда, и добавьте новые элементы в будущем, не переписывая атрибут стиля один за другим. Это требует, чтобы вы загружали файл CSS вместо того, чтобы ссылаться на ссылку.
Поскольку наша страница очень маленькая, я взял метод один.
4. Используйте Ajax для достижения сбора данных, взаимодействия и динамической загрузки.
Спросите меня, как использовать Ajax? Ищите на Байду или спросите людей, которые знают технологии фронт-энда.
Самая основная вещь в Ajax - это то, что его можно частично обновить, не обновляя всю страницу. Здесь мы должны сначала проверить соответствующие документы по технологии AJAX (приведенные выше три веб -сайта, а также различные Baidu). Поскольку вы хотите получить данные из файла JSON, вы ссылаетесь на руководство AJAX http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp в jQuery (поскольку Bootstrap's JS основан на jQuery, и все методы JQuery - это работа, и эта точка знания также была найдена, когда я искал информацию). Функция Getjson была выбрана. Кроме того, см. Http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html Выберите каждую функцию в качестве метода анализа.
В реализации кода он в основном включает в себя обход (для заявления), суждение (if), операции по элементам HTML, добавление детских элементов, изменение значений атрибутов и т. Д.
Что касается того, как написать конкретную страницу, скучно написать ее подробно, поэтому я просто вставил код.
Некоторые моменты, на которые обращает внимание при запуске демонстрации: Chrome, кажется, ограничивает прямое чтение содержимого файла локально, поэтому вам необходимо разместить весь проект в папке HTDOCS Apache. Затем беги. Что касается того, как установить Apache, мой предыдущий блог имеет очень подробное введение. Как его использовать, пожалуйста, Байду.
<! 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; Высота: 150px;}#btn-group-vertical-classmates {overflow-y: auto; Overflow-X: Auto; Высота: 150px;} кнопка {text-overflow: ellipsis; переполнение: скрыто; граница-радиус: 0px;} </style> </head> <body> <div> <br> </br> <div id = "div1-class-class-class-class-class-class-class-class- group-> <> <div rol =" aria-label = "..." id = "btn-class-class-class- group- groups? show-> </div> <div id = "btn-group-vertical-classmates" rol = "group" aria-label = "..."> <!-где одноклассники показывают-> <button type = "button" style = "border-radius: 0px;"> Нажмите класс, чтобы показать классовый. id = "context_div"> <p> Нажмите Classmate, чтобы показать детали. src = "js/bootstrap.min.js"> </script> <script> $ (document) .ready (function () {$. getJson ("resource/classmates.json", function (result) {$. Каждый (результат, функция (i, field) {var tmp_button = $ ('buttonge = "buttonge style =" redice-radius: "” "” "" t-tygle = ”" ”" ”” "" tygpx ”" 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)); $ ("#btn-group-vertical-class-точки"). empty (); var chensist_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 choven_list) {if (choven_list [choven_list_x] == i) {$. Каждый (поле, функция (j, field2) {var tmp_button = $ ('<button Type = "style" style = "border-radius: 0px;" choven_state = 0> </button> '). Text (j); tmp_button.attr ("title", j); $ ("#btn-group-vertical-classmates"). Приложение (tmp_button);});}}}); $ (". Btn.btn-default.btn-classmate") selected_classmate = $ (this) .text (); var classmate_context_item; $ ("#context_div"). empty (); $. Каждый (результат, функция (i, field) {$. Каждый (поле, функция (j, field2) {if (j == selected_classmate) {$. Field2, function (k, k, field3) {class_clasmate) {$. + field3; var tmp_p = $ ('<p> </p>'). Text (classmate_context_item); $ ("#context_div"). Append (tmp_p);});});});});});});});}) </script> </body> </html>