С увеличением числа мобильных пользователей традиционная архитектура веб -системы не совместима с обычным использованием многих мобильных терминалов. На работе я также обнаружил, что многим клиентам теперь необходимо использовать системы управления на мобильных терминалах, таких как мобильные телефоны и планшеты. Если соответствующая веб -страница ответа разработана отдельно для каждого терминала, это неизбежно увеличит стоимость проекта и давление на разработчиков. В настоящее время необходимо понять отзывчивый макет, который рожден для решения многопользованных проблем. На этот раз мы представляем легкий, открытый исходный код и бесплатный начальная загрузка.
Создать среду разработки
Во -первых, загрузите пакет исходного кода Boostrap на официальном веб -сайте: http://www.bootcss.com/. Для разработки простых проектов вам не нужно добавлять все CS, JS, шрифты и т. Д. В исходный код. Согласно потребностям вашего проекта, вы можете адаптировать необходимую среду.
Требуемые файлы следующие: jquery.min.js, bootstrap.min.js, bootstrap.css. Если вам нужно использовать некоторые стили шрифтов, вам также необходимо добавить файлы, связанные с шрифтами, как показано на рисунке ниже:
[Примечание] При загрузке JS вы должны сначала загрузить jquery.min.js, потому что в Bootstrap.min.js вы будете использовать методы, связанные с jQuery, то есть Boostrap.min.js, зависит от jQuery.min.js.
Тестировать среду сапоги
Напишите тестовый файл index.html. Содержание тестового файла следующим образом:
<! Doctype html> <html> <head> <title> Проверьте среду Boostrap </title> <link rel = "stylesseept" type = "text/css" href = "./ css/bootstrap.css"> <script type = "text/javascript" src = "./ js/jquery.min. type = "text/javascript" src = "./ JS/bootstrap.min.js"> </script> </head> <body> </body> </html>
Вышеуказанное - среда разработки сапог. Это очень просто!
То, что вы должны знать при использовании Boostrap, - это растровая система Boostrap. Именно из -за этой системы сети делает ее лучше совместимой с терминальными устройствами с различными разрешениями.
Официальный веб -сайт Special Grid System имеет четкое введение: http://v3.bootcss.com/css/. Найдутся следующая картина официального веб -сайта:
При использовании Boostrap мы в основном используем некоторые стили, которые были определены в нем. Это полезно для программы, которая не имеет возможности к искусству, быстро создавая довольно хорошую страницу.
Когда мы на самом деле используем начальную загрузку, мы часто проверяем некоторые справочные документы на официальном веб -сайте: http://v3.bootcss.com/css/#tables.
Я лично рекомендую вам напрямую скопировать соответствующий код на свою собственную веб -страницу в примерах официального веб -сайта, а затем вносить соответствующие изменения на основе этого. Таким образом, скорость разработки будет быстрее, а точность будет выше.
Продемонстрируйте некоторые стили буоры --- столовые стили.
<! Doctype html> <html> <head> <Title> Test Boostrap Environment </title> <link rel = "styleSheet" type = "text/css" href = "./ css/bootstrap.css"> <cript type = "text/javascript" src = ". type = "text/javascript" src = "./ JS/bootstrap.min.js"> </script> <body> <table> <tr> <td> тестовая форма </td> <td> тестовая форма </td> тестовая форма тестирования </td> тест </td> </td> test> Форма </td> <td> test </td> <td> test </td> </tr> <tr> <td> test </td> <td> test </td> <td> тест </td> <td> test </td> test> test </td> <td> test </td> <td> test> test> test> test> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> test> <tr> <td> тест </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> <tr> <td> test </td> <td> test </td> <td> test </td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <TD> тест </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> </table> </body> </html>
Результаты просмотра веб -страницы следующие:
Атрибуты в классе представлены:
1) Таблица плюс у этого уже есть стиль таблицы BootsRAP
2) Таблица указывает, что фон строки таблицы мыши остается ярким
3) Таблица с таблицей появляется в границах
4) столовые полосы на столовой полосах
[Примечание] Когда между каждым атрибутом смещаются несколько атрибутов.
2. Кнопка
<!-кнопка-> <a href = "#" rol = "button"> link </a> <button type = "propect"> кнопку </button> <input type = "button" value = "input"> <input type = "Отправить" значение = "Отправить"> <!-Стандартная кнопка-> идентифицировать кнопку " type = "button"> (предпочтения) Первичный </button> <!-Указывает успешное или позитивное действие-> <button Type = "button"> (успех) успех </button> <!-Контекстуальная кнопка для информационных сообщений о предупреждении-> <Кнопка типа = "Кнопка"> (Общая информация) Информация </button> <!-Указывает, что следует принять с помощью этого действия-> <futtin Type = "''> Warning) <! Потенциально негативное действие-> <button type = "button"> (опасность) опасность </button> <!-Deemphasize кнопку, сделав ее похожим на ссылку при поддержании поведения кнопки-> <Button Type = "Кнопка"> (ссылка) Link </button>
Результаты веб -страницы следующие:
Для многих других стилей и компонентов рекомендуется ссылаться на официальную справочную документацию.
Суммировать
Эта статья является руководством, которое кратко представляет, для чего предназначена и как ее использовать. Нет подробного списка всех компонентов и стилей, но ... читать!
Это очень волшебная статья, вы должны щелкнуть и взглянуть: учебник по обучению Bootstrap стоит поделиться и собирать
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Я надеюсь, что те, кто заинтересован в начальной загрузке, могут вручную проверить эффекты каждого стиля и как использовать каждый компонент самостоятельно, и по -настоящему чувствовать веселье, принесенное начальной загрузкой.