> 웹 프론트엔드 > HTML 튜토리얼 > Bootstrap 小技巧以及相关资源整理_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:31:41
원래의
974명이 탐색했습니다.

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

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿