Что такое начальная загрузка?
Bootstrap-это фронтальная структура для быстрой разработки веб-приложений и веб-сайтов. Bootstrap основан на HTML, CSS и JavaScript.
история
Bootstrap был разработан Марком Отто из Twitter и Джейкобом Торнтоном. Bootstrap - это продукт с открытым исходным кодом, выпущенный на Github в августе 2011 года.
В последнее время у меня много свободного времени. Сегодня я представлю вам фронтальную структуру «стиля» - начальная загрузка.
1. Bootstrap Общая архитектура
Почему во вступлении я называю начальную загрузку в качестве фронтального стиля? Возможно, такое название не очень точное, но я думаю, что такое название может позволить некоторым новичкам понять и понять, какой начальная загрузка является быстрее. Я не люблю использовать некоторые высококачественные слова, чтобы углубить понимание определенных знаний, но вместо этого предпочитаю использовать некоторые простые для понимания слова для описания знаний. Хотя такое описание может быть немного неточным, я думаю, что это не имеет большого значения, потому что такие описания действительно могут позволить новичкам быстрее понимать это знание. Поскольку я был смущен, когда я изучал знания, некоторые официальные документы знаний были такими высокими. На самом деле, чтобы выразить это, это были лишь некоторые вещи из прошлого, а затем инкапсулировали, чтобы сделать разработку проще и быстрее. Так что здесь я делюсь, что платформа начальной загрузки такая же. Кроме того, контент -организация также предназначена для того, чтобы позволить начинающим лучше овладеть ее. Потому что, когда я впервые начал с ним входить в контакт, я также был новичком. Я думаю, что этот способ организации может помочь вам быстрее и лучше понять знания.
Для начальной загрузки мы должны сначала представить ее общую архитектуру - из чего именно он состоит. Я считаю, что вы можете быстро понять, что именно состоит из начальной загрузки, посмотрев на картинку ниже.
Из приведенной выше рисунка мы можем ясно видеть, что начальная загрузка в основном состоит из следующих частей:
12 Сетчатая система - для разделения экрана на 12 копий (столбцы).
Используйте строки для организации элементов (каждая строка включает в себя 12 столбцов), а затем поместите содержимое в столбце.
Смещение столбца управления COL-MD-Offset-*.
Основные компоненты макета - начальная загрузка предоставляет множество базовых компонентов макета. Такие как набор, код, формы, кнопки, формы и т. Д.
JQuery - Bootstrap все плагины JavaScript полагаются на jQuery. Если вы хотите использовать эти плагины JS, вы должны обратиться к библиотеке JQUERY. Это также причина, по которой нам нужно ссылаться на библиотеку jQuery в дополнение к ссылке на файл JS Bootstrap и файл CSS, оба из которых являются зависимостью.
Компоненты CSS - Bootstrap предварительно внедрил для нас множество компонентов CSS. Соберите коробку, группу кнопок, навигацию и т. Д. Другими словами, контент начальной загрузки помог нам определить много стилей CSS, и вы можете напрямую применить эти стили к таким элементам, как предыдущие раскрывающиеся коробки.
Плагин JavaScript-Bootstrap также реализует некоторые плагины JS для нас. Мы можем использовать плагины, предоставленные им, для выполнения некоторых общих функций, не требуя, чтобы мы переписывали код JS для достижения эффектов, таких как поля быстрого приглашения и модальные окна.
Отзывчивый дизайн - это концепция дизайна. Адаптация означает, что он автоматически настраивает страницу в соответствии с размером экрана, так что передняя страница может хорошо работать на экранах разных размеров.
Начальная загрузка состоит из вышеуказанных частей. Вышеуказанное дало краткое введение в каждый компонент, и следующее содержание - не что иное, как подробное введение в каждый компонент с помощью некоторых примеров.
2. 12 Сетчатая система
Bootstrap определяет систему 12 сетей для лучшего макета. Первое, что нужно определить,-это система макета для каждой фронтальной структуры. В начальной загрузке он использует строки и столбцы для создания макета страницы. Есть несколько принципов для его макета:
Строка должна быть включена в .container (фиксированная ширина) или .container-Fluid (100% ширина)
Каждая строка содержит 12 столбцов
Поместите содержание в каждом столбце
В растровой системе начальной загрузки браузеры разделены на 4 типа в соответствии с их шириной. Значения: Автоматический (100%), 750px, 970px и 1170px.
Соответствующие стили-это ультраумный (xs), маленький (SM), экран среднего размера (MD) и большой (LG)
Первоначально он реализован путем определения минимальной ширины через медиа -запрос. Поэтому веб -страницы, сделанные Bootstrap, совместимы с большими и маленькими!
В рамках начальной загрузки значение размер экрана было предопределено, а значение разграничения определяется с помощью медиа -запросов. Его определение следующее:
/* Ultra-small screen (mobile, less than 768px) *//* There is no code related to media query, because this is the default in Bootstrap (remember Bootstrap is mobile-first?) *//* Small screen (flat, greater than or equal to 768px) */@media (min-width: @screen-sm-min) { ... }/* Medium screen (desktop display, greater than or equal to 992px) */ @media (min-width: @screen-md-min) {...}/ *Большой экран (большой настольный дисплей, больше или равен 1200px) */ @media (min-width: @screen-lg-min) {...}Фактически, медиа -запросы также используются в разработке приложений Win8 для реализации адаптивных приложений. Так что, если вы слышите отзывную систему в будущем, не думайте, что она очень глубоко. Фактически, структура определяет для нас медиа -запросы. Если минимальная ширина, определенная в медиа -запросах, превышает минимальную ширину, определенную в медиа -запросах, таким образом, вы можете сократить размер элемента между различными экранами, чтобы адаптироваться к экрану. Тем не менее, концепция, предложенная Bootstrap, предпочтительна для мобильных устройств, поэтому страницы, разработанные Bootstrap, могут быть совместимы только с большим и небольшим несовместимым с маленьким.
3. Базовые компоненты макета
Основной компонент макета заключается в том, что платформа начальной загрузки определяет некоторые унифицированные стили для некоторых базовых меток макета. Например, таблица, кнопка, форма и т. Д. Давайте посмотрим на пример таблицы:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = Edge"> <meta name = "viewport" content "и width = device-width, piront-scale = 1"> <! Другой контент * должен * следовать за ними! -> <title> шаблон Bootstrap 101 </title> <!-потому что нет плагина JS для Bootstrap, нет ссылки на компонент jQuery-> <!-Bootstrap-> <Link rel = "styleSheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3> таблица стиля по умолчанию </h3> <Таблица> <paption> tate tate. Таблица-> <TheAd> <tr> <th> id </th> <Th> Имя </th> <Th> Фамилия </th> </tr> </theAd> <tbody> <tr> <th Scope = "row"> 1 </th> <td> tommy </td> <td> Scope = "row"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th Scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </tbody> <h3> таблица с границей </h3> <table> <beption> tate. T+Head, t представляет значение таблицы-> <TheAd> <tr> <th> id </th> <Th> имени </th> <Th> Fastement </th> </tr> </thead> <tbody> <tr> <th Scope = "row"> 1 </th> <td> tommy </td> <td> Scope = "row"> 2 </th> <Td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </tr> </tbody> <!- Для Ссылки на таблицу. http://v3.bootcss.com/css/#tables-->!!-- jquery (необходимо для плагинов Bootstrap's Javascript)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <!-включает в себя все плагины). необходимо -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Пример кода для кнопки и формы не будет размещен здесь. Вы можете использовать ссылку ниже, чтобы просмотреть эффект запуска и исходный код. Вы также можете загрузить все исходные коды этой темы через последний файл загрузки.
IV Компоненты CSS
Компоненты CSS похожи на базовые компоненты макета, то есть Bootstrap определяет некоторые существующие стили для некоторых тегов, и эффект этих стилей очень красив, так что каждой компании или разработчику не нужно писать другой стиль, тем самым ускоряя эффективность разработки. Давайте посмотрим на пример навигации здесь. Честно говоря, если вы слишком много используете эту вещь, вы, естественно, познакомитесь с этим.
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = Edge"> <meta name = "viewport" content "и width = device-width, piront-scale = 1"> <! Другой контент * должен * следовать за ними! --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"></head><body><h3>Navigation bar</h3><nav><div><!-- Brand and toggle get Сгруппируется для лучшего мобильного дисплея-> <div> <button Type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1" aria-expeded = "false"> <pran> навигация </span> </span> <pap> </span> </span> </span> </span> </span> </span> </span> href = "#"> home </a> </div> <!-Соберите ссылки на ов. href = "#"> about </a> </li> </ul> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#" data-toggle = "dropdown" role = "кнопка" aria-haspopup = "true" aria-expaded = "falsedown <proal> </haspopup =" true "aria-expated =" falsedown <proal> </haspopup = " href = "#"> action 1 </a> </li> <li> <a href = "#"> action 2 </a> </li> <li> <a href = "#"> Action 3 </a> </li> <li> <a href = "#"> Разделенное действие </a> </li> </li> </ul> </href> <! -> </div> <!-/.container-fluid-> </nav> <!-jquery (необходимо для плагинов Bootstrap's Javascript)-> <Script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <! необходимо -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Эффекты других компонентов следующие:
5. Плагин JavaScript
По умолчанию все плагины JS могут быть реализованы путем установки конкретного HTML -кода и соответствующих свойств без написания строки кода JavaScript. Суть его реализации заключается в том, что Bootstrap реализует соответствующий код JavaScript для этих свойств.
Давайте посмотрим на пример модального окна:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = Edge"> <meta name = "viewport" content "и width = device-width, piront-scale = 1"> <! Другой контент * должен * следовать за ними! -> <Title> шаблон Bootstrap 101 </title> <!-Bootstrap-> <link rel = "styleSheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <hody> <h3/css/bootstrap.min.css "> </head> <hody> <h3> modal window </h3> </h3> <! type = "кнопка" data-toggle = "modal" data-target = "#mymodal"> нажмите меня </button> <div id = "mymodal"> <div> <div> <div> <button-type = "button" data-dismiss = "modal" Aria-label = "Закрыть"> <span aria-hidden = "> × </span> </wtut Название </h4> </div> <div> <p> Тестовое тело… </p> </div> <div> <button type = "button" data-dismiss = "modal"> close </button> <button Type = "> Сохранить изменения </button> </div> <!-/.modal-content-> </div> <! jquery (необходимый для плагинов Javascript от Javascript)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <! src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Прочитав весь предыдущий контент, вы сразу же чувствуете, что начальная загрузка на самом деле является просто структурой стиля? С этим мы можем быстро и легко создавать веб -страницы. Кроме того, после прочтения предыдущего контента вы не будете запутаны, почему официальный документ начальной загрузки выглядит следующим образом:
Разве записи в навигационной панели официального документа Bootstrap документируют основные компоненты нашего введения выше?
6. Резюме
На данный момент все содержание этой статьи закончилось. Я надеюсь, что благодаря этой статье начинающие могут быстро понять и мастер -начальную загрузку. Кроме того, эта статья эквивалентна ключевым моментам начальной загрузки. Для более подробного контента вы можете обратиться к официальному китайскому веб -сайту Bootstrap. Но я не думаю, что больше не хочу этого. Лучше практиковать это напрямую, если у вас есть время. Веб -приложение VS2013 уже поддерживает платформу Bootstrap по умолчанию. Вы можете немедленно создать веб -приложение через VS2013, чтобы испытать приложение Bootstrap в рамках ASP.NET MVC, прежде чем читать его.