码迷,mamicode.com
首页 > 其他好文 > 详细

使用BootStrap进行开发

时间:2015-06-02 17:34:56      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

使用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的引用。

 

 

新建项目

技术分享

技术分享

 

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

技术分享

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

并对bower任务运行。

技术分享

 

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

技术分享

 

技术分享

 

 

怎么用BootStrap进行开发

 

 

一些模板的使用。

 

 

Grids

技术分享

技术分享

 

 

 

Jumbotron

技术分享

 

 

技术分享

 

Buttons

 

 

技术分享

 

技术分享

 

Badges

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

 

技术分享

 

Alerts

 

技术分享

技术分享

 

 

Navbars and Menus

 

 

 

 

 

Additional Elements

 

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

 

More Themes

技术分享s

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

 

JavaScript

 

 

http://getbootstrap.com/javascript/.

 

 

 

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

 

使用BootStrap进行开发

标签:

原文地址:http://www.cnblogs.com/heavyhe/p/4546757.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!