Latest web development tutorials

JQuery Мобильный сетки

JQuery Mobile Layout сетки

JQuery Mobile обеспечивает разбивку макета CSS на основе. Тем не менее, на мобильных устройствах, с учетом ширины экрана телефона узкая, как правило, мы не рекомендуем использовать дезагрегированном макета столбца.

Но иногда вы хотите меньше элементов (например, кнопок или вкладок навигации) расположены бок о бок друг с другом, например, как в таблице. В этом случае рекомендуется использовать макет суб-колонки.

Сетка колонн имеют одинаковую ширину (всего 100%), без границ, фон, края или дополнения.

Есть четыре сетки макета доступны:

класс сетки ряд Ширина столбца переписка примеров
Пользовательский интерфейс сетки-соло 1 100% Пользовательский интерфейс блок-а пробовать
Пользовательский интерфейс сетки-а 2 50% / 50% Пользовательский интерфейс блок-а | б пробовать
Пользовательский интерфейс сетки-б 3 33% / 33% / 33% Пользовательский интерфейс блок-а | B | C пробовать
Пользовательский интерфейс сетки-с 4 25% / 25% / 25% / 25% Пользовательский интерфейс блок-а | B | C | D пробовать
Пользовательский интерфейс сетки-d 5 20% / 20% / 20% / 20% / 20% Пользовательский интерфейс блок-а | B | C | D | е пробовать

лампа В контейнерах столбцов, подэлементы имеют класс как пользовательский интерфейс-блок-а | B | C | D | е в зависимости от количества столбцов. Плавающий боковой ряд бок.

Примеры 1: класс Ui-сетки-A (две раскладки), необходимо указать Ui-блок-а и пользовательский интерфейс-блок-б из двух субэлементов.

Примеры 2: класс UI-сетки-б (три макета), вы должны добавить пользовательский интерфейс блок-а, ui- блок-б и щ-блок-с из трех суб-элементов.

Пользовательские сетки

С помощью CSS, вы можете настроить блоки столбцов:

примеров

<Style>
.ui-блок-а, .ui-блок-б, .ui-блок-с {
фонового цвета: светло-серый;
границы: 1px сплошного черного цвета;
высота: 100px;
шрифта: жирный;
выравнивания текста: центр;
обивка: 30px;
}
</ Style>

Попробуйте »

Кроме того, можно настроить с помощью встроенных блоков стилей: 

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

Многоканальный

В колонке, вы также можете иметь несколько строк.

Примечание: Пользовательский интерфейс блок-а-класса всегда создать новую строку:

примеров

<Div класс = "Пользовательский интерфейс сетки-б">
<Класс Div = "Пользовательский интерфейс-блок а-"> <SPAN> некоторый текст </ SPAN> </ DIV>
<Div класс = "Пользовательский интерфейс блок-б"> <SPAN> некоторый текст </ SPAN> </ DIV>
<Div класс = "Пользовательский интерфейс блок-с"> <SPAN> некоторый текст </ SPAN> </ DIV>
<Класс Div = "Пользовательский интерфейс-блок а-"> <SPAN> некоторый текст </ SPAN> </ DIV>
<Div класс = "Пользовательский интерфейс блок-б"> <SPAN> некоторый текст </ SPAN> </ DIV>
<Класс Div = "Пользовательский интерфейс-блок а-"> <SPAN> некоторый текст </ SPAN> </ DIV>
</ Div>

Попробуйте »

Отзывчивый Сетка

В маленьком экране, слишком много не рекомендуется в стороне строки с помощью боковой кнопки (текст сокращен).

Мы создаем отзывчивый сетку для использования в контейнере Ui-отзывчивым категории:

примеров

<DIV класс = "Пользовательский интерфейс сетки -b UI-отзывчивым">

Попробуйте »