Это краткая инструкция о том, как верстать макеты, чтобы их было максимально легко использовать с Yii 1.X фреймворком.

1.) Вёрстка форм.

Если очень нужно, то в Yii можно каждую форму описать вручную, но в большинстве случаев используется генератор HTML форм.

Генератор выдаёт примерно такой код:

<form>
    <div class="row">
        <label for="text1" class="required">Text 1 <span class="required">*</span></label>
        <input type="text" id="text1"  />
    </div>
    <div class="row">
        <label for="text2" class="error">Text 2</label>
        <input type="text" id="text2" class="error" />
        <div class="errorMessage">Current Password cannot be blank.</div>
    </div>
    <div class="row buttons">
        <input type="submit" value="Submit" />
    </div>
</form>

Первое на что хотелось бы обратить внимание, что форма состоит из набора .row контейнеров. В Yii эти контейнеры вертикально разделяют блоки с полями. В css фреймворке Twitter Bootstrap, данный тег используется для горизонтального разбиения ячеек, поэтому чтобы использовать Yii совместно с Bootstrap, нужно переопределить класс .row, если он находится внутри формы.

Обратите внимание, что добавление своих классов к контейнерам class="row" и class="row buttons" недопустимо.

В случае, если поле заполнена неверно, то к нему добавляется класс .error, также класс .error добавляется к ярлыку (label) поля.

Если не нужно выводить текст ошибки у каждого поля отдельно, то можно вывести все ошибки списком:

<div class="errorSummary"><p>Please fix the following input errors:</p>
    <ul>
        <li>Text 1 cannot be blank.</li>
        <li>Text 2 cannot be blank.</li>
    </ul>
</div>

2.) Вёрстка меню

Все меню должны быть вида

<ul>
    <li><a href="#">Один</a></li>
    <li class="active"><a href="#">Два</a></li>
</ul>

Обратите внимание, что .active является классом элемента списка, а не ссылки.

3. Вёрстка таблиц

Добавлять свои классы к tr нельзя

К td можно добавлять только статические классы, которые будут присутствовать у всех строк таблицы.

4. Вёрстка пейджера

selected класс нужно добавлять к li элементу

Неактивные ссылки "вперёд/назад" всегда присутствуют в вёрстке, но если их показывать не нужно, то к li добавляется класс hidden

---

Статья не завершена.

16.12.2013