Home > Web Front-end > HTML Tutorial > Bootstrap 小技巧以及相关资源整理_html/css_WEB-ITnose

Bootstrap 小技巧以及相关资源整理_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:31:41
Original
975 people have browsed it

1, Bootstrap Bundle (http://bootstrapbundle.com/): 提供了15中不同的MVC  Bootstrap模板。【扩展和更新】中搜索“Bootstrap Bundle” 下载安装。新建项目的时候就可以直接选择模板了。

 

2,Bootswatch (http://bootswatch.com/): 提供了一些不同色调的bootstraps css文件,可以直接下载所需主题的css文件覆盖项目中的css:  

 

3,Bootstrap Snippets(http://bootsnipp.com/): 可以直接在vs中插入bootstraps代码片段而不需要从官方文档Copy。【扩展和更新】中搜索“bootstrap”即可找到。

 

 安装完成后重启vs, view页面中 右键-插入代码片段【Ctrl+K,Ctrl+X】,我们就可以选择bootstrap组件了:

 

4,Web Essentials 2015(http://vswebessentials.com/) : Web Essentials 帮助检查我们写的class属性是否有错误,如果有误则会提醒我们错误,如下:

 

Web Essential还可以实时把对页面内容的改变反馈到vs源代码中(参考:http://www.vswebessentials.com/features/browserlink):

Web Essential还可以帮助调试css ,js,其官网上也都有详细的介绍以及示例。

 

5,Bootsnipp(http://bootsnipp.com/) 提供一些美化过或者是封装好的一些功能模块,我们可以在其网站中搜索需要的功能模块。下面是他们提供的一种3D Button按钮:

 

参考bootsnipp中的"Show Dropdown Hover & Caret Up",把示例js和css加入到现有项目中,实现了鼠标经过显示下拉菜单的效果:

 

6,SideWaffle Template Pack (http://www.sidewaffle.com):提供了一些VS项目功能的模板如:chrome插件项目、CKEditor等。【扩展和更新】中搜索:sidewaffle ,下载安装。(下载后打开方式选择Visual Studio Version Selector进行安装)

项目中【添加】可以选择SideWaffle预设Template:

 

 

 

 

 网址:

http://getbootstrap.com/

http://glyphicons.com/

http://fontawesome.bootstrapcheatsheets.com/

http://www.sidewaffle.com/

http://vswebessentials.com/

http://lesscss.org/

SPA: single-page applications

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template