使用BootStrap进行开发

使用BootStrap进行开发

使用BootStrap进行开发

开始(环境)

  1. 新建ASP.NET5 Empty、Web API或WebSite的项目。Bootstrap会自动加进项目中。

    如果没有加入,可在bower.js中的依赖项中加入bootstrap的内容。

  2. 使用以下工具进行安装

    Bower:

    bower install bootstrap

    NPM:

    npm install bootstrap

    NuGet:

    install-package bootstrap

  1. 在html页面中,加入对BootStrap的css和js的引用。

新建项目

使用BootStrap进行开发

使用BootStrap进行开发

在wwwroot中自动添加对bootstrap的支持。

使用BootStrap进行开发

如果wwwroot中没有,则可以在bower.js中,添加对bootstrap的支持。

并对bower任务运行。

使用BootStrap进行开发

具体开发时,在_layout.cshtml页面中添加对bootstrap的css和js的引用。

使用BootStrap进行开发

使用BootStrap进行开发

怎么用BootStrap进行开发

一些模板的使用。

Grids

使用BootStrap进行开发

使用BootStrap进行开发

Jumbotron

使用BootStrap进行开发

使用BootStrap进行开发

Buttons

使用BootStrap进行开发

使用BootStrap进行开发

Badges

<span class="badge">27</span>

使用BootStrap进行开发

Alerts

使用BootStrap进行开发

使用BootStrap进行开发

Navbars and Menus

Additional Elements

http://getbootstrap.com/examples/theme/

More Themes

使用BootStrap进行开发s

http://getbootstrap.com/examples/dashboard/.

JavaScript

http://getbootstrap.com/javascript/.

需要在实际开发中,针对需求选择使用什么样的模板。