вторник, 18 сентября 2012 г.

Быстрое подключение Twitter Bootstrap

Twitter Bootstrap - довольно широко используемый и удобный CSS-фреймворк (ссылка на сайт). Поэтому напишу как быстро его подключить к своему проекту.

1. Скачиваем архив по адресу bootstrap.zip


2. Распаковываем в директорию проекта - получится папка bootstrap с подпапками css, jpg, script

3. Добавляем в мастер-страницу или просто на страницу, где нужно использовать Bootstrap следующие строки:


 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  <script src="js/bootstrap.min.js"></script>


Либо для отладки можно использовать версии файлов без min:


  <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
  <script src="js/bootstrap.js"></script>


4. Все готово! Можно пользоваться.


Небольшой пример кода с классами bootstrap:



...
  <p>
    <h2 runat="server">
      <asp:Label Text="РСохранение данных по квартире:" runat="server" /></h2>
  </p>
  <div>
    <div class="row-fluid">
      <asp:Label ID="Label1" Text="Стоимость:" runat="server" AssociatedControlID="tbPrice"/>
      <asp:TextBox ID="tbPrice" runat="server"></asp:TextBox>
    </div>
    <div class="row-fluid">
      <asp:Label Text="Данные по квартире: " runat="server" AssociatedControlID="tbDescr" />
      <asp:TextBox TextMode="MultiLine" Rows="3" ID="tbDescr" runat="server"></asp:TextBox>
    </div>
  </div>
  <hr />
  <asp:Button runat="server" Text="Сохранить квартиру" CssClass="btn btn-success" />
...


Выведет два поля с зеленой кнопкой:


Удачи в изучении!

Комментариев нет:

Отправить комментарий