Испоьлзование Bootstrap в ASP.NET MVC

Bootstrap - фреймворк от Twitter для создания веб-приложений. Позволяет создавать шаблон дизайна, который масштабируется на разных устройствах и разрешениях экрана, очень прост в использовании. Подробности здесь и здесь(официальный сайт).Информация на русском языке здесь и здесь

Но 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")
} 

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

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

Примечание. Отправлять комментарии могут только участники этого блога.