2015-08-13 15:37:50 javakeffer 阅读数 4592

最近使用bootstrap做前端网页开发,bootsreap自带的颜色不合适,需要使用新的主题颜色方案,在网上搜索后发现一个不错的网站,只需要使用一张图片,便可根据图片中的颜色生成套主题,并可以下载这套主题的css样式问题,替换bootStrap的css文件即可使用,很方便。

链接www.lavishbootstrap.com

2013-12-30 17:59:08 tyygming 阅读数 22

Bootstrap3是流行的CSS前端框架Bootstrap的最新版本。目前还没有太多的可用模板,如果大家需要自己构建的话,了解和掌握一些Bootstrap3基本入门工具和方法是你所必需的。

Bootstrap 3 themes builder #1: Bootstrap magic

在浏览器中编辑Bootstrap3主题的工具。它有相当广泛的定制选项,从字体到布局到颜色。可以实时预览结果,这样可以节省时间和成本。

Bootstrap 3 themes builder #2: LayoutIt

我之前已经介绍了这个软件在我的前一篇文章在2014年最好的boostrap设计工具。它是一个伟大的拖放设计工具,允许你建造你自己的主题,尽管软件可以做得更多,构造更快的主题。

Bootstrap 3 themes builder #3: Bootstrap start theme

 

阅读原文: http://www.gbtags.com/gb/share/2657.htm

2017-03-23 20:49:50 soindy 阅读数 716

整理自慕课笔记
面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。

基础面板

基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块。由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“panel-default”,另外在里面添加了一个“div.panel-body”来放置面板主体内容:

<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板,带有默认主题样式风格</div>
</div>

这里写图片描述

带有头和尾的面板

基础面板看上去太简单了,Bootstrap为了丰富面板的功能,特意为面板增加“面板头部”和“页面尾部”的效果:
* panel-heading:用来设置面板头部样式
* panel-footer:用来设置面板尾部样式

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者:大漠</div>
</div>

这里写图片描述

彩色面板

在基础面板一节中了解到,panel样式并没有对主题进行样式设置,而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外,还包括以下几种主题样式,构成了一个彩色面板:
* panel-primary:重点蓝
* panel-success:成功绿
* panel-info:信息蓝
* panel-warning:警告黄
* panel-danger:危险红
使用方法就很简单了,只需要在panel的类名基础上增加自己需要的类名:

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者:大漠</div>
</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>

这里写图片描述
从效果中不难发现,这几个样式只是改变了面板的背景色、文本和边框颜色

面板中嵌套表格

一般情况下可以把面板理解为一个区域,在使用面板的时候,都会在panel-body放置需要的内容,可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。首先来看嵌套表格的效果:

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
    <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
    </p>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th></th>
                <th>我的书</th>
                <th>发布时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>《图解CSS3》</td>
                <td>2014-07-10</td>
            </tr>
        </tbody>
    </table>
    </div>
    <div class="panel-footer">作者:大漠</div>
</div>

这里写图片描述
优化代码:
在实际应用运中,你或许希望表格和面板边缘不需要有任何的间距。但由于panel-body设置了一个padding:15px的值,为了实现这样的效果。我们在实际使用的时候需要把table提取到panel-body外面:

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <table class="table table-bordered">…</table>
    <div class="panel-footer">作者:大漠</div>
</div>

这里写图片描述
这样的效果是不是完美多了。大家可能会问,前面介绍表格的时候table-bordered明明有边框,按理说这里应该会出现边框重叠效果才对,怎么没有呢?其实原本是有边框重叠的,只不过在面板中对表格又做了一次优化。

面板中嵌套列表组

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
        <ul class="list-group">
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
        </ul>
    </div>
    <div class="panel-footer">作者:大漠</div>
</div>

这里写图片描述
优化代码:
和嵌套表格一样,如果你觉得这样有间距不好看,你完全可以把列表组提取出来:

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body"></div>
    <ul class="list-group">
        <li class="list-group-item">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
        <li class="list-group-item">我是列表项</li>
    </ul>
    <div class="panel-footer">作者:大漠</div>
</div>

这里写图片描述

2013-04-10 11:34:08 jjfat 阅读数 2190

日期:2013-3-31  来源:GBin1.com

免费的响应式bootstrap管理员后台界面主题 - Charisma

Charisma是一套全功能的,免费,会员质量的响应式HTML5管理员界面模板,基于"Bootstrap",拥有了9套不同的主题颜色内容,可以满足你的不同需要!

免费的响应式bootstrap管理员后台界面主题 - Charisma

免费的响应式bootstrap管理员后台界面主题 - Charisma

在线演示

主要特性:

  • 9套不同的主题
  • 完全响应式,针对了移动设备和触摸设备优化
  • 基于bootstrap,同时也支持jQuery UI
  • HTML5/CSS3验证通过,并且与HTML5兼容,支持IE8+
  • 带有注释的代码
  • 自定义产品介绍
  • 拥有1000多个图标
  • 支持网格系统
  • 支持图表,饼图,实时图,线图等等
  • 数据表格
  • 包含了不同的组件,排序,扩展等等
  • 支持ajax的菜单
  • 完整的支持fullcalendar
  • 文件管理界面,创建,查看,删除,更新等等
  • 自定义错误页面
  • 自定检测并转变URL等等

主要元素:

  • Autocomplete
  • Custom Tooltip
  • Popover
  • Star Rating
  • Toggle Switch
  • Tag Boxes
  • Rich Text Editor
  • Date Picker
  • Multiple File Upload
  • Slider
  • Dialog Box
  • Auto Growing Textarea
  • Ajax Loaders
  • Progress Bars
  • Alerts
  • Pop Notifications

相信如果你需要一个直接可以使用的管理员后台设计主题的话,基于"Bootstrap"的Charisma将会是你不错的选择!

via 极客标签

来源:免费的响应式bootstrap管理员后台界面主题 - Charisma

没有更多推荐了,返回首页