Twitter Bootstrap - довольно широко используемый и удобный CSS-фреймворк (ссылка на сайт). Поэтому напишу как быстро его подключить к своему проекту.
1. Скачиваем архив по адресу bootstrap.zip
2. Распаковываем в директорию проекта - получится папка bootstrap с подпапками css, jpg, script
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
...
<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" />
Выведет два поля с зеленой кнопкой:
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" />
...
Выведет два поля с зеленой кнопкой:
Удачи в изучении!
Комментариев нет:
Отправить комментарий