分享六个基于Bootstrap的实用开发教程和模板演示

柔情只为你懂 2022-08-26 04:54 34阅读 0赞

[![975527c6-abb3-49ee-b2a3-024789d5ec60.jpg][]][975527c6-abb3-49ee-b2a3-024789d5ec60.jpg 1]

关于[Bootstrap][]，相信大家一定不陌生，它已经成为现在主流产业的一个重要工具，[Bootstrap][]提供了优雅的[HTML][]和[CSS][]规范，它基于[jQuery][]框架开发的，它在[jQuery][]框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分[jQuery插件][jQuery 1]。今天，我们带来6款[Bootstrap][]实现的几款小应用，希望可以对你们有所帮助！

## [移动为先的Bootstrap3 ][Bootstrap3]    ##

[![813f72cc-8051-4d26-a737-fab221c9f562.jpg][]][Bootstrap3]

## [在线演示][Link 1]    ##

[Bootstrap][]3已经发布好几周了， 现在该是我们看看[Bootstrap][]有什么新鲜内容的时候了。首先，最重要的一个改变就是支持响应式网站设计，原来的响应式模块已经去掉了。 现在从内核，[Bootstrap3][Bootstrap]就支持响应式设计，不仅仅如此，更深入的在于，整合了Mobile First的设计思想，即移动为先，这个概念最初由Luke wrobleski在他的博客提出。在这篇文章中，我们将分享一些BT3的新内容，希望大家喜欢！

## [使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验 ][Bootstrap3_Ladda UI_]    ##

[![f3fa0e04-39f9-45c0-87a5-839f4741c55c.jpg][]][Bootstrap3_Ladda UI_]

## [在线演示1][1]     [ 在线演示2][_2]     [在线演示3][3]    ##

大家在开发基于web的网站或者web应用中，常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果，类似的UI设计也非常多，比如，当点击一个按钮后，在它的旁边显示一个 “加载中” 文字，或者是添加一个“旋转GIF”动画效果图。

## [基于bootstrap的纯CSS多级菜单 - BootM ][bootstrap_CSS_ - BootM]    ##

[![f981e2ae-11a7-479d-a14c-42a719dcc39b.jpg][]][bootstrap_CSS_ - BootM]

## [在线演示][Link 2]    ##

BootM是基于bootstrap开发的一款多级菜单实现。其主要特性包括：无JS,基于bootstrap,响应式设计,无层次限制,基于文本的图标。

# [Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶（底）弹跳效果 ][Bootstrap3_jQuery_iOS_Android_]    #

[![e0555afe-b1c4-419c-a15b-febd1fcaf995.jpg][]][Bootstrap3_jQuery_iOS_Android_]

## [在线演示][Link 3]    ##

如果大家使用[iOS][]或者[android][]相关移动平台的话，对于页面滑动到最底端后的弹跳效果肯定不会陌生，在这篇教程中，我们将使用最新版的[Bootstrap3][Bootstrap]和[jQuery][]来生成一个类似移动设备app的web页面效果，支持各种设备的响应式展示。

## [Bootstrap富文本编辑器bootstrap-wysiwyg的使用 ][Bootstrap_bootstrap-wysiwyg_]    ##

[![c2d470de-f09a-46c8-bbf2-c005b9ee7112.jpg][]][Bootstrap_bootstrap-wysiwyg_]

## [在线演示][Link 4]    ##

使用其实很简单的，倒入bootstrap相关CSS，JS，jQuery，还有bootstrap-wysiwyg的JS。

## [Bootstrap3的一个landing page（着落页模板）][Bootstrap3_landing page]    ##

[![5589b366-5e28-4943-beee-32080b8399ca.jpg][]][5589b366-5e28-4943-beee-32080b8399ca.jpg 1]

## [在线演示][5589b366-5e28-4943-beee-32080b8399ca.jpg 1]    ##

非常适合你做产品推广或者app推广，支持响应式，并且可以自行扩展开发！

> 如果大家喜欢，请留言，我们将每周定期给大家推荐一些不错的Bootstrap3模板！

原文来自：[分享六个基于Bootstrap的实用开发教程和模板演示][Bootstrap 1]

[975527c6-abb3-49ee-b2a3-024789d5ec60.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/975527c6-abb3-49ee-b2a3-024789d5ec60.jpg
[975527c6-abb3-49ee-b2a3-024789d5ec60.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/975527c6-abb3-49ee-b2a3-024789d5ec60.jpg
[Bootstrap]: http://www.gbtags.com/gb/tag/1091.htm
[HTML]: http://www.gbtags.com/gb/tag/1001.htm
[CSS]: http://www.gbtags.com/gb/tag/1002.htm
[jQuery]: http://www.gbtags.com/gb/tag/1003.htm
[jQuery 1]: http://www.gbtags.com/gb/tag/1006.htm
[Bootstrap3]: http://www.gbtags.com/gb/share/2023.htm
[813f72cc-8051-4d26-a737-fab221c9f562.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/813f72cc-8051-4d26-a737-fab221c9f562.jpg
[Link 1]: http://www.gbtags.com/gb/demoviewer/2023/04552c07-6119-4c29-9657-44edad153675/index.html.htm
[Bootstrap3_Ladda UI_]: http://www.gbtags.com/gb/share/2909.htm
[f3fa0e04-39f9-45c0-87a5-839f4741c55c.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/f3fa0e04-39f9-45c0-87a5-839f4741c55c.jpg
[1]: http://www.gbtags.com/gb/demoviewer/2909/44b0c6e7-0395-4825-bff4-5914e6153ee0/index.html.htm
[_2]: http://www.gbtags.com/gb/demoviewer/2909/44b0c6e7-0395-4825-bff4-5914e6153ee0/index2.html.htm
[3]: http://www.gbtags.com/gb/demoviewer/2909/44b0c6e7-0395-4825-bff4-5914e6153ee0/index3.html.htm
[bootstrap_CSS_ - BootM]: http://www.gbtags.com/gb/share/2101.htm
[f981e2ae-11a7-479d-a14c-42a719dcc39b.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/f981e2ae-11a7-479d-a14c-42a719dcc39b.jpg
[Link 2]: http://www.gbtags.com/gb/demoviewer/2101/245f40e7-2d25-4346-ac05-88d96b032fc7/index.html.htm
[Bootstrap3_jQuery_iOS_Android_]: http://www.gbtags.com/gb/share/2276.htm
[e0555afe-b1c4-419c-a15b-febd1fcaf995.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/e0555afe-b1c4-419c-a15b-febd1fcaf995.jpg
[Link 3]: http://www.gbtags.com/gb/demoviewer/2276/d90c526a-1311-4a8e-9b2c-cbb5bf0400a7/index.html.htm
[iOS]: http://www.gbtags.com/gb/tag/1023.htm
[android]: http://www.gbtags.com/gb/tag/1065.htm
[Bootstrap_bootstrap-wysiwyg_]: http://www.gbtags.com/gb/share/2428.htm
[c2d470de-f09a-46c8-bbf2-c005b9ee7112.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/c2d470de-f09a-46c8-bbf2-c005b9ee7112.jpg
[Link 4]: http://www.gbtags.com/gb/demoviewer/2428/63cdf784-8e59-46ed-af1e-1c991e91a145/gbtags.html.htm
[Bootstrap3_landing page]: http://www.gbtags.com/gb/share/2697.htm
[5589b366-5e28-4943-beee-32080b8399ca.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/5589b366-5e28-4943-beee-32080b8399ca.jpg
[5589b366-5e28-4943-beee-32080b8399ca.jpg 1]: http://www.gbtags.com/gb/demoviewer/2697/96e00e30-fbac-4a91-8141-ce8c7a32b27c/index.html.htm
[Bootstrap 1]: http://www.gbtags.com/gb/share/3034.htm