Что такое начальная загрузка?
Bootstrap-это фронтальная структура для быстрой разработки веб-приложений и веб-сайтов. Bootstrap основан на HTML, CSS и JavaScript.
Макет формы разделен на два типа: автоматический макет и индивидуальный макет:
Автоматический макет -автоматически использовать различные растра начальной загрузки на основе длины массива в элементе конфигурации второго уровня в элементе конфигурации. Автоматический макет может быть достигнут путем установки Autolayout true.
Автоматический макет - это определение сетки, используемой в соответствии с AutoLayout. Установив AutoLayout: '1,2,1,2,2,4', это означает, что первые и вторые столбцы занимают 3 сетки, а третий столбец - 6 сетей.
Автоматический код макета заключается в следующем (https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-auto-layout.html):
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Автоматический макет </title> <link rel = "stylessheet" href = "../ css/bootstrap.css"> <script src = "../ jquery.js" src = "../ lib/bootstrap.js"> </script> <!-Инструменты-> <script src = "../ scripts/global.js"> </script> <!-плагин-> <script src = "../ scripts/plugin.js"> </script> </head> <body> <div> <div> <div> <briples> abot Layout </label> </div> <div> <form action = "#" id = "formContainer"> </form> </div> <div> <babel> Введение </label> </div> <div> <babel> Введение </label> </div> <div> <h3> так называемый автоматический склад: для автоматического использования. Например: количество элементов в массиве составляет 2, а затем используйте 2, 4, 2, 4 макет </h3> <p> Полагаться на стили растра начальной загрузки и поддерживает только 12-сегментные форматы. Если вы настраиваете 5 элементов, он не поддерживается </p> </div> </div> <script> $ (function () {var eles = [[{ele: {type: 'text', name: 'username', заголовок: 'username:', требуется: true}}, {ele: {type: 'radio', name: 's Ex ', title:' Gender: ', элементы: [{text:' male ', значение: 1}, {text:' nable ', value: 2}]}},], [{ele: {type:' fackbox ', Название: «Завод», заголовок: «Использование Платформа: ', элементы: [{text:' app ', value:' app '}, {text:' web ', value:' web '}]}}, {ele: {type:' select ', name:' province ', title:' province: ', withnull: true, элементы: [{text:' guangdong ', value:' gd ', { : 'Hn'}]}}], [{ele: {type: 'text', name: 'displayname', title: 'display name:'}}, {ele: {type: 'dateTime', name: 'fromedate', title: 'valive период: '}}, {ele: {type:' datetime ', имя:' todate ', title:' ~ '}}]]; // Элементы скрытой формы в основном используются для редактирования, фон можно отличить от Var hides = [{id:' guide '}; var bsform = new bsform (eles: eles: hides, hides, hides, hides, hides, hides, hides, hides, hides, hides'}; }). Render ('formContainer');}); </script> </body> </html>Заводные визуализации:
Вы можете видеть, что первые и 2 элемента в моем файле конфигурации оснащены двумя столбцами, а третий элемент настроен с 3 столбцами, поэтому используется первые и вторые элементы сгенерированной формы-группы: 2,4. Третий элемент используется: 1,3 из границы раздела, дисплей UI очень неприятно, поэтому Autolayout: True, как правило, используется в специальных сценариях, и когда каждый элемент равен.
Пользовательский код макета (https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-fix-layout.html):
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Пользовательский макет </title> <link rel = "stylesship" href = "../ css/bootstrap.css"> Custom Site Style-> <link relshiet "href =" ../ <! src = "../ lib/jquery.js"> </script> <script src = "../ lib/bootstrap.js"> </script> <!-Методы инструментов-> <script src = "../ scripts/global.js"> </script> <!-плагин-> <script src = "../ scripts/plugin.js"> </script> </head> <body> <div> <div> <babel> Пользовательский макет </label> </div> <div> <form action = "#" id = "formContainer"> </form> </div> <div> <babel> venction </label> </div> <div> <babel>, label, label, label, label> <div> <div> <div> <label> <div> <label> <dip> <div> <label> <div> <brabel, что я label> <div> <brabel, label - это label, что. Настройка макета </h3> <p> Если вы настраиваете Autolayout: 1,2 1,2 Растер будет отображаться </p> <p> Если вы настроите Autolayout: 1,2,2,4, первый элемент будет расположен с использованием 1,2, а второй будет расположен с использованием 2,4. Если нет 2,4 Система автоматически ищет 1,2 </p> </div> <Script> $ (function () {var eles = [[{ele: {type: 'text', имя: «Имя пользователя», заголовок: «Имя пользователя», заголовок: «Имя пользователя», заголовок: «Имя пользователя: 'обязательно: true}}, {ele: {ty PE: 'Radio', имя: 'sex', заголовок: 'Gender:', элементы: [{text: 'male', значение: 1}, {text: 'nector', value: 2}]}}, {ele: {type: 'checkbox', Название: «Завод», заголовок: «Использование Платформа: ', элементы: [{text:' app ', value:' app '}, {text:' web ', value:' web '}]}}, {ele: {type:' select ', name:' provi nce ', название:' провинция: ', withnull: true, элементы: [{text:' guangdong ', value:' gd '}, {text:' hunan ', value:' hn '}]}} ], [{ele: {type: 'text', name: 'displayname', title: 'display name:'}}, {ele: {type: 'dateTime', имя: 'fromedate', название: 'Период проверки:'}}, {ele: {type: 'dateTime', name: 'toDate', tilt: '~'}}}}}} '}}}; используется для редактирования.Рендеринги следующие:
Примечание. Если на странице есть 4 столбца, но настроенный AutoLayout недостаточен, следующая часть будет использовать предыдущий макет, то есть первый столбец используется в качестве столбца конфигурации по умолчанию.
Выше приведено полное описание макета «Практическая серия Smart Form Smart Form» (IV). Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!