Bootstrap后台管理模板集合

2016-06-22 categories:资料 tags:bootstrap author:快乐成长

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。是目前最受欢迎的前端框架之一。下面为大家推荐17个免费的Bootstrap后台管理界面模板。

1. Admin Lite

AdminLTE – 是一个完全响应式管理模板。基于Bootstrap3的框架。高度可定制的，易于使用。支持很多的屏幕分辨率适合从小型移动设备到大型台式机。

参考地址： https://www.almsaeedstudio.com/themes/AdminLTE/index2.html

体验了，一下感觉很好！！！

https://github.com/almasaeed2010/AdminLTE

2. Dashboard Sidebar

这是一个管理后台模板，拥有控制面板或仪表板。这个模板有一个可折叠的工具栏菜单，并且有可以作为一个数据网格的表格。

参考地址：http://www.bootstrapzero.com/bootstrap-template/dashboard-sidebar

没太看懂！

3. DevOOPS

DevOOPS是一个自适应免费管理仪表板主题，可以用在你的web项目中。

参考下载地址：https://github.com/devoopsme/devoops/archive/master.zip

体验一下，很好，比较轻量级，很好很好！

4. Blocks

Blocks 是一个轻量级的管理仪表板模板，源于 Cyfe 。 Blocks实质上是一个单页模板，所有你需要的，配置都并排放在一个页面中。

参考地址：http://www.bootstrapzero.com/bootstrap-template/blocks

5. DashGum

DashGum 一个很棒15页的Bootstrap管理主题或仪表板。它拥有图表，表格，很多面板，日历，通知，待办列表等功能。

… 阅读全文

Bootstrap3栅格系统背后的精妙魔法

2016-03-11 categories:资料 tags:bootstrap author:快乐成长

本文主要讲解了Bootstrap3.0的栅格布局系统实现原理，以及使用过程中应该注意的问题。

像CSS栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，除非你有了比较烂的设计或者一些比较复杂的东西，

当你无法找出spacing, margin, padding等这些补白全都乱的原因，那就真的很苦逼了，尤其是在某些动态改变和变化的UI上。

在关于bootstrap的栅格系统工作原理上我见过很多人都对它比较困扰、懊恼，每次都需要我解释很多遍后别人才能理解，

所以我乐意用快速和可视化的方式来解释为什么bootstrap栅格系统能玩得动，没必要解释很多。让我们一起找出Bootstrap是如何利用巧妙的技巧实现栅格系统的

HTML正确的基本结构：

<div class="container">
    <div class="row">
      <div class="col-xs-12"></div>
    </div>
</div>

Container

Container这个容器class为.container类有2个目的

1、在响应式宽度上提供宽度约束。响应式尺寸的改变其实改变的是container，行(rows)和列(columns)都是基于百分比的所以它们不需要做任何改变；

2、提供padding以至于不内容不直为紧贴于浏览器边缘，两边都是15px，下图中粉色的就是了，稍后解释更多；

在一个container中永远不需要再嵌一个container，记住永远不要。

你将会看到为什么

Row

行(Row)Class为.row的容器

row为col提供了空间，理想上一行上分了12 col，当所有col都向左浮时row也就扮演了容器角色，另外当浮动有问题时row也不会重叠

Rows 的两侧都拥有独特的负15px margin值,如下图中蓝色部分. 被当作为row的div被约束在container内边界与粉色区域重叠，但没超过。这负的15px margin值把row的推出了container的15px padding，并与之重叠，本质上讲就是负出去。为什么这么做呢？原因得看列(col)的工作原理，下面我们会看到

永远不要在container外用row, row在container外面使用是无效的

Column

列(col)现在有15px的padding了，如下图中黄颜色部分。Container的正padding值造成了15px的留空，row用负margin值反的延伸回去，

所以现在col的padding值与container的padding重叠了

… 阅读全文

Bootstrap栅格系统

2016-03-10 categories:资料 tags:bootstrap author:快乐成长

从接触 Bootstrap 已经有很长时间了，给人的感觉是快速，简单，易上手，其中栅格系统是一个亮点：

一直感觉像 CSS 栅格系统之类的东西拿过来用就好了，不用深究背后的原理。直到有一天你发现简单的套用在稍复杂的页面上出现问题，间隔啊，内外边距啊，哪都不对劲儿。

当然会有这样的过程，然后随着知识的积累，可以去读一些 Bootstrap 的源码，结合文档会发现一些不是很理解的地方：

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

CONTAINER

Container 有两个作用：

在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化，container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比，所以他们的值不需要变化。
提供一个水平方向的 padding，使其内部的内容不会接触到浏览器的边界，大小为15px，就是图片中粉红色的部分，作用会在下面说。

… 阅读全文

12个最好的 WordPress Bootstrap 插件

2014-10-15 categories:资料 tags:bootstrap, wordpress author:快乐成长

来源： http://www.open-open.com/news/view/1254cca

Twitter Bootstrap是最被经常使用的前端框架之一，由Twitter使用HTML, CSS 和 JavaScript语言开发。在这篇文章中，我们已经收集了12个可在WordPress网站中使用的最好 WordPress Bootstrap 插件。

Best WordPress Bootstrap Plugins

Bootstrap Shortcodes

This Bootstrap Shortcodes plugin will embed different Twitter based Bootstrap components on the website and the entire implementation of components onto the website is

… 阅读全文

一步步教你如何用Bootstrap构建WordPress主题

2014-05-08 categories:wordpress tags:bootstrap, php, wordpress author:sch

在前面的文章Bootstrap & Jetstrap-快速构建你的网站中，我们已经介绍了什么是Bootstrap，以及Bootstrap的简单教程及相应的可视化工具，在本教程中，我们将学习如何用Bootstrap制作我们自己的响应式的WordPress主题。Bootstrap是一个响应式的框架，用来创建web网站和应用，用它创建一个响应式的WordPress主题将是一个伟大的起点。

我们将要构建的主题是基于一个基本营销网站的例子，你可以在Bootstrap 示例页面找到。对于本示例，我们将为其页面及功能创建出一系统模板：

· 可定制的首页设计

· 关于我们

· 联系我们

· 带评论的章节

· 一个组件化的侧边栏

开始

在我们开始前还有一点事情需要你去做：

· 安装WordPress

· 下载并解压缩 Bootstrap

· 安装主题测试驱动插件*

* 如果你想在一个线上的网站上创建一个主题并且不想在你开发的过程中让人们看到新主题，你正好需这个插件。

一旦你准备好这些事情，打开你带有WordPress所有文件的目录并导航至wp-content > themes。

在你导航至那个文件夹后，创建一个叫”wpbootstrap”的新文件夹，在文件夹里面粘贴bootstrap文件夹。… 阅读全文

打造基于Bootstrap的WordPress主题

2014-05-01 categories:wordpress tags:bootstrap, php, wordpress author:sch

WordPress是基于PHP的常用个人信息发布平台，很多个人网站都基于此打造。关于WordPress：http://wordpress.org/

Bootstrap是Twitter发布的前端开发框架，让web开发更迅速、简单。关于Bootstrap：http://getbootstrap.com/

动机

最早接触WordPress是在2010年，使用WordPress搭建了自己的个人网站，非常方便。WordPress自带的主题很不错，加上可以在线下载很多的精美主题，所以个性化不是什么问题。但是每个人都希望拥有独一无二的东西，所以自己跟着我爱水煮鱼（ http://blog.wpjam.com/）的教程，做了一套简单的主题。工作后感觉时间过的很快，也逐渐淡出了人人网，因此自己的网站就肩负起记录生活的重任。虽然是做后台开发工作，但也对前端的一些东西还是比较感兴趣。随着移动互联网的兴起，响应式布局（Responsive Design）开始流行。在很多前段UI框架中，Bootstrap发展很快，除了支持响应式设计，还提供了很多组建，让前台开发更加方便。喜欢 Bootstrap的简洁，并且需要解决之前主题的一些问题，因此决定重新开发一套基于Bootstrap的WordPress主题。

WordPress主题框架

WordPress主题都存放在”/wp-content/themes/”文件夹中，每个主题拥有自己的文件夹。一个最简单的WP主题，至少包括：index.php, style.css两个文件。一般的网页设计，从上到下一般分为header，body，footer三个部分，因此可以单独的建立 header.php, footer.php两个文件，不同的页面通过<?php get_header(); ?>及<?php get_footer(); ?>来组装成一个完整页面，达到共用的目的。先不用管这两个文件的内容，我们先写一个简单的index.php页面。

index.php:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello, World!</h1>

</body>

</html>

OK, 最基本的index.php完成了，但是目前和WordPress及Bootstrap一毛钱关系都没有，不过你可以应用这个主题，虽然只能显示”Hello, World!”。接下来我们就要用到WordPress及Bootstrap提供的各种强大功能。

导航栏是一个网站最基本的内容，因此我们首先打造导航栏。WordPress展示内容可以通过Post及Page，一般导航栏中就是各个Page的链接。WordPress部署好后，会建立一个Sample Page，我们可以使用<?php wp_list_pages(); ?>来输出各个页面的链接。我们把index.php中的<body>标签中内容分为header,main,footer三个部分，并且加上输出导航栏的代码，新的index.php变化为：… 阅读全文

8个必看的Bootstrap的WordPress框架

2014-04-12 categories:wordpress tags:bootstrap, php, wordpress author:sch

Boostrap越来越流行，主题开发者们开始尝试使用它来开发wordpress主题。这也使得bootstrap的wordpress框架用起来更加便利。这些starter kit或者框架提供了一些基础代码和资源使得开发bootstrap wordpress主题更加容 …

　　Boostrap越来越流行，主题开发者们开始尝试使用它来开发wordpress主题。这也使得bootstrap的wordpress框架用起来更加便利。这些starter kit或者框架提供了一些基础代码和资源使得开发bootstrap wordpress主题更加容易。你可以更快的使用这些框架进行开发，而不用先开发一个bootstrap主题，再把它变成转成wordpress主题。这些你也可以做到，但需要更多的时间，特别是当你不熟悉转化过程的时候。

　　如果你想更快的开发bootstrap wordpress主题，试试下面这些框架：

1 BoilerStrap

　　Boilerstrap是一个WordPress的twenty twelve模板，其中已经包括了Boostrap。这减少了将bootstrap引入到WordPress的时间。唯一的缺点是其默认的CSS是twenty twelve的。所以，如果你想使用像twenty thirteen子主题等UI设计的话，你可能需要做一些额外工作。

2 WP-Bootstrap

　　WP-bootstrap是一个在Bootstrap 2基础上建立的免费WordPress主题。目前已经有基于它的像页面模板以及Shortcodes、主页走马等很酷的东西。值得下载试一下。

3 Roots

　 Roots最吸引人的地方是它清理了很多wordpress相关的东西，这样你可以花更多的时间来写代码而不是处理WordPress的设置。这个 bootstrap的WordPress框架基于HTML5 boilerplate，且包括bootstrap。当然你也可以移除bootstrap用其他CSS框架代替。

4 Skematik

　 Skematik是一个强大的WP主题，它是一个名符其实的bootstrap wordpress框架，正如在它的关于部分中所陈述的：”Skematik是为开发者而生的”。Skematik是被开发用来扩展框架本身已经集成的许多bootstrap Shortcodes。唯一的缺点是它不免费，这也是为什么现在没给出它链接的原因。

5 Bootstrap 3 WordPress主题框架

… 阅读全文

12款最佳的Bootstrap设计工具

2014-04-07 categories:wordpress tags:bootstrap, php, wordpress author:sch

bootstrap是很好的一套html相关工具，在网络上收集相关资料，供工作中参考。

摘要：设计师总会渴望有一些新奇有趣的设计工具来提高工作效率。本文我们将分享12款最佳的Bootstrap设计工具，帮助你做出特别清爽同时又专业美观的页面。

设计师总会渴望有一些新奇有趣的设计工具来提高工作效率，而Bootstrap就是您的不二选择。2013年Bootstrap得到了广泛普及，它是开发者较为常用的框架之一，本文我们将分享12款最佳的Bootstrap设计工具，帮助你做出特别清爽同时又专业美观的页面。

12. Bootstrap Designer

Bootstrap Designer是一款在线运行工具，无需下载和安装。使用该工具你可以创建出令人惊叹的HTML5模板。

11. Get Kickstrap

如果你正在寻找与Bootsrap相匹配的Web技术，那你可以试试这款Get Kickstrap。该工具非常先进，无需任何后台即可运行数据库来驱动Web应用程序。

10. Bootply

通过Bootply可以非常轻松地基于Bootstrap来进行设计、开发原型、扩展和测试等。Bootply可与其他流行的Bootstrap插件、微框架和库进行整合。

9. Bootstrap Button Generator

通过Bootstrap Button Generator，你只需输入你想指定给新按钮的样式的CSS类，并简单调整图标的颜色，即可获得新的图标，然后复制代码，粘贴在任意你想要的地方即可。

8. Easel

这款工具可在你的浏览器中运行，具有高保真的特性，帮助开发者和设计师提供真实的Web元素。

7. Layoutit

Layoutit是一个在线工具，它可以简单而又快速搭建Bootstrap响应式布局，操作基本是使用拖动方式来完成，很简单，而元素都是基于Bootstrap框架集成的，所以这工具很适合Web设计师和前端开发人员使用，快捷方便。

6. Bootswatch

该工具开源，极易安装。

5. Boottheme

这是一款在线主题生成器，拖拽式的设计、所见即所得。… 阅读全文

从0开始学编程(10) 用例子学习bootstrap的布局

2014-03-11 categories:0基础编程 tags:bootstrap author:sch

前面介绍了bootstrap的相关情况，本文介绍一个具体的实用bootstrap的例子，同时用视频把例子详细记录下来，供参考。

1. 下载Bootstrap2.3.2版本

我们为了利用bootstrap的一个布局工具，经过测试这个工具目前仅仅支持bootstrap的2.x版本，因此我们采用了bootstrap的2.x版本进行说明，然后大家可以根据bootstrap的2.x到3.x的升级说明进行升级，也可以不升级。

图中两个区域需要注意，一个是我们访问的网址，另外一个是我们选择了2.x版本供我们下载。

注意这个网址不是 bootstrap的官方网址， … 阅读全文

Bootstrap 简介

2014-02-22 categories:资料 tags:bootstrap author:sch

1. 关于Bootstrap

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。基于HTML，CSS，JAVASCRIPT的简洁灵活的流行前端框架及交互组件集。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

中文网站如下：

http://www.bootcss.com/

里面有很多相关资源，可以参考

下面是另外一个中文的相关网站也可以参考

http://cnbootstrap.com/

2. Bootstrap特点

Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等

Javascript插件编辑

Bootstrap自带了jQuery插件，这些插件为Bootstrap中的组件赋予了”生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。

3. 可视化布局

下面的网址是一个bootstrap的web方式可视化布局工具，可以正在这里布局完成后下载布局好的html代码等等，对不熟悉html的是个很好的帮助。

http://www.bootcss.com/p/layoutit/

上图是个布局的例子

布局完成后可以下载相关代码如下

在这个对话框中可以选择自适应宽度或者固定宽度。然后下载相关html代码就可以了。这里仅仅是html的布局代码，若是作为网站的代码使用还要html其他代码等。

4. 可视化的表单编辑

http://www.bootcss.com/p/bootstrap-form-builder/

如上图是制作的一个可视化表单编辑，大大方便我们相关的开发工作。

最后选择生产代码，如下图：

更多内容参考上面的网站吧。… 阅读全文