Bootstrap on Dapeng Zhang

让Bootstrap的Refresh Icon也spin起来

Thu, 03 Jul 2025 11:08:13 +0000

bootstrap下面有个glyphicon-refresh，但是不会自定动态spin[旋转]，下面提供下我的实例

.spin{
 -webkit-transform-origin: 50% 50%;
 transform-origin:50% 50%;
 -ms-transform-origin:50% 50%; /* IE 9 */
 -webkit-animation: spin .8s infinite linear;
 -moz-animation: spin .8s infinite linear;
 -o-animation: spin .8s infinite linear;
 animation: spin .8s infinite linear;
 }

 @-webkit-keyframes spin {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100% {
 -webkit-transform: rotate(359deg);
 transform: rotate(359deg);
 }
 }
 @keyframes spin {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100% {
 -webkit-transform: rotate(359deg);
 transform: rotate(359deg);
 }
 }

调用方式如下

<span class="glyphicon glyphicon-refresh loading spin"> </span>

Bootstrap固定表格宽度或者自适应内容的宽度

Wed, 02 Jul 2025 11:31:40 +0000

这个可以通过colgroup来控制单元格的宽度，如果只定义部分宽度，其他的单元格会自适应的调整。

实例代码如下

<thead>
 <colgroup>
 <col></col>
 <col></col>
 <col></col>
 <col></col>
 <col></col>
 <col width='20%'></col>
 <col></col>
 <col></col>
 </colgroup>
 <tr>
 <th>用户名称</th>
 <th>登录方式</th>
 <th>联系方式</th>
 <th>内容</th>
 <th>客户端</th>
 <th>备注</th>
 <th>最后记账时间</th>
 <th>操作</th>
 </tr>
</thead>

关于UI设计的几点意识

Tue, 17 Jun 2025 15:50:55 +0000

最近写前端，于是思考如何将前端写的更好，而且还能学到东西，于是可是了疯狂的搜索，结果发现了好多好玩的，新奇的东西

1，走着走着就发现了一个奇迹

起因是这样引起的，由于最近一直在用bootstrap，于是又去找他了，就找到了这个http://www.bootcss.com/ ，结果奇迹就一个一个的被我发现了，在这里我找到了”Bootstrap相关开源项目推荐“，你才怎么着，我跑到了这里http://www.w3cplus.com/ ，结果我好奇的看了里面一篇文章，结果奇迹有一个一个的出现了。

2，一切的代码实现都可以这样的简单

http://www.bootcss.com/p/bootstrap-form-builder/
Bootstrap表单构造器
http://www.bootcss.com/customize.html
Bootstrap定制
http://www.bootcss.com/lesscss.html
LESS：LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。
http://www.boottheme.com/
BootTheme
http://www.plugolabs.com/twitter-bootstrap-button-generator/
Twitter Bootstrap Button Generator
http://bootboxjs.com/
Bootstrap弹出框
终于知道了我使用bootstrap的话，后面的结果会有多么的简单，方便

3，这里不妨推荐另外一个框架FlatUI，适合我的审美观

4，写代码给自己一定的时间去探索，没有探索过是创新不出来的

结合bootstrap自定义table列表

Tue, 17 Jun 2025 15:50:38 +0000

使用bootstrap这个方便的web UI框架，方便了自己，少些了很多的代码，至少兼容性方面，我觉的我就不用操心了，呵呵。

看看我自定义的table列表

css代码:

table.smoth{width:100%}
table.smoth thead tr.caption td.item{background-color: #E4E4E4;border:1px solid #ccc}
table.smoth tbody tr.list td{border:1px solid #ccc}
table.smoth tbody tr.list:nth-child(odd) td{background-color: #fff}
table.smoth tbody tr.list:nth-child(even) td{background-color: #F2F2F2}

html代码：

<div class="table">
	<table class='smoth' >
		<thead>
			<tr class='caption'>
				<td class='item'>电视剧名称</td>
				<td class='item'>上线日期</td>
				<td class='item'>ITV状态</td>
				<td class='item'>导演</td>
				<td class='item'>编剧</td>
				<td class='item'>主演</td>
			</tr>
		</thead>
		<tbody>
			<?php for($i = 0; $i < 10; $i++):?>
			<tr class='list'>
				<td>咱俩的事</td>
				<td>2013-01-13</td>
				<td>是</td>
				<td>David Zhang</td>
				<td>David</td>
				<td>Zhang</td>
			</tr>
			<?php endfor;?>
		</tbody>
	</table>
</div>

加入了一点php代码，实则是一个简单的循环

图片展示