Bootstrap - фреймворк от Twitter для создания веб-приложений. Позволяет создавать шаблон дизайна, который масштабируется на разных устройствах и разрешениях экрана, очень прост в использовании. Подробности здесь и здесь(официальный сайт).Информация на русском языке здесь и здесь.
Но Bootstrap это html разметка, и для облегчения работы с ней на ASP.NET MVC есть хорошие инструменты, например fluentbootstrap.
Пример использования ниже.
Чистый bootstrap:
Но Bootstrap это html разметка, и для облегчения работы с ней на ASP.NET MVC есть хорошие инструменты, например fluentbootstrap.
Пример использования ниже.
Чистый bootstrap:
<nav class="navbar-static-top navbar-default navbar" id="navbar" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">FluentBootstrap</a> <button class="collapsed navbar-toggle" data-target="#navbar-collapse" data-toggle="collapse" type="button"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <div class="navbar-left navbar-nav nav"> <li><a href="/">Introduction</a></li> <li><a href="/Installation">Installation</a></li> <li><a href="/Usage">Usage</a></li> <li><a href="/Development">Development</a></li> </div> </div> </div> </nav>
С использованием FluentBootstrap того же рузультат можно добиться следующим образом:
@using (var navbar = Html.Bootstrap().Navbar("FluentBootstrap") .SetPosition(NavbarPosition.StaticTop).Begin()) { @navbar.NavbarLink("Introduction", "/") @navbar.NavbarLink("Installation", "/Installation") @navbar.NavbarLink("Usage", "/Usage") @navbar.NavbarLink("Development", "/Development") }
Комментариев нет :
Отправить комментарий
Примечание. Отправлять комментарии могут только участники этого блога.