Bootstrap+Timeliner+Github+JQUERY创建个人简历（二）-专业技能表

Bootstrap+Timeliner+Github+JQUERY创建个人简历（二）---专业技能表

源码可见:https://github.com/gmszone/RESUME/tree/master/Web

最后效果如下图所示

也就是哪下所示

专业技能

开发

语言: C/C++ Python Javascript
语言: Java C51 Lisp Erlang
框架: Django Pomelo Bootstrap
框架: jQuery jQuery Mobile
框架: Cocos2d-X Rails
Editor: Emacs Vim Coda
Editor: Sublime Text Notepad++
IDE: Eclipse Android Studio
IDE: Aptana Dreamweaver

IDE: Visual Studio QT Creator

WEB集

http://api.phodal.com
http://blog.phodal.com
http://www.phodal.com
http://socket.phodal.com
http://www.fjrongyu.com
http://www.sxsfjsh.com
http://www.mokcy.cn

http://www.hongzhishushe.com

skills

DB: MySQL/MariaDB MongoDB
DB: SQLite
OS: GNU/Linux(Centos,openSUSE)
OS: Windows Mac OS X
Design: Photoshop/GIMP InkscapeTexWorks

office: Microsoft Office LibreOffice

嵌入式

芯片: Atmega C51 STM32
芯片: Freescale K60/XS128
芯片: MSP430
IDE: IAR Keil Arduino
Others: Proteus Multisim
EOS: uC/OS II openWRT Linux

others: OpenCV RaspberryPi Phodal 2013Bootstrap label
如官网所介绍

Add any of the below mentioned modifier classes to change the appearance of a label.

Default Primary Success Info Warning Danger

&lt;span class="label label-default"&gt;Default&lt;/span&gt;&lt;span class="label label-primary"&gt;Primary&lt;/span&gt;&lt;span class="label label-success"&gt;Success&lt;/span&gt;&lt;span class="label label-info"&gt;Info&lt;/span&gt;&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;

可以有上面的几种颜色可以选择，那么加上这几种颜色，以及list-group来做列表，我们就可以做到类似上面的效果

源码如下所示

  &lt;div class="container " id="section-4"&gt;  &lt;br /&gt;   &lt;h2&gt;专业技能&lt;/h2&gt;    &lt;div class="row"&gt;        &lt;div class="col-lg-3"&gt;        &lt;h4&gt;开发&lt;/h4&gt;    &lt;ul class="list-group"&gt;        &lt;li class="list-group-item"&gt;语言:             &lt;span class="label label-primary"&gt;C/C&#43;&#43;&lt;/span&gt;        &lt;span class="label label-success"&gt;Python&lt;/span&gt;        &lt;span class="label label-primary"&gt;Javascript&lt;/span&gt;        &lt;/li&gt;       &lt;li class="list-group-item"&gt;语言:            &lt;span class="label label-primary"&gt;Java&lt;/span&gt;        &lt;span class="label label-info"&gt;C51&lt;/span&gt;        &lt;span class="label label-success"&gt;Lisp&lt;/span&gt;        &lt;span class="label label-danger"&gt;Erlang&lt;/span&gt;         &lt;/li&gt;        &lt;li class="list-group-item"&gt;框架:             &lt;span class="label label-info"&gt;Django&lt;/span&gt;        &lt;span class="label label-success"&gt;Pomelo&lt;/span&gt;        &lt;span class="label label-primary"&gt;Bootstrap&lt;/span&gt;        &lt;/li&gt;       &lt;li class="list-group-item"&gt;框架:            &lt;span class="label label-primary"&gt;jQuery&lt;/span&gt;        &lt;span class="label label-info"&gt;jQuery Mobile&lt;/span&gt;         &lt;/li&gt;        &lt;li class="list-group-item"&gt;框架:        &lt;span class="label label-success"&gt;Cocos2d-X&lt;/span&gt;        &lt;span class="label label-danger"&gt;Rails&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;Editor:        &lt;span class="label label-success"&gt;Emacs&lt;/span&gt;        &lt;span class="label label-danger"&gt;Vim&lt;/span&gt;        &lt;span class="label label-info"&gt;Coda&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;Editor:        &lt;span class="label label-info"&gt;Sublime Text&lt;/span&gt;        &lt;span class="label label-danger"&gt;Notepad&#43;&#43;&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;IDE:        &lt;span class="label label-primary"&gt;Eclipse&lt;/span&gt;        &lt;span class="label label-success"&gt;Android Studio&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;IDE:        &lt;span class="label label-info"&gt;Aptana&lt;/span&gt;        &lt;span class="label label-danger"&gt;Dreamweaver&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;IDE:        &lt;span class="label label-primary"&gt;Visual Studio&lt;/span&gt;        &lt;span class="label label-suceess"&gt;QT Creator&lt;/span&gt;        &lt;/li&gt;        &lt;/ul&gt;        &lt;/div&gt;        &lt;div class="col-lg-3"&gt;        &lt;h4&gt;WEB集&lt;/h4&gt;    &lt;ul class="list-group"&gt;       &lt;ul class="list-group"&gt;        &lt;li class="list-group-item"&gt;&lt;a hre="http://api.phodal.com"&gt;http://api.phodal.com&lt;/li&gt;        &lt;li class="list-group-item"&gt;&lt;a hre="http://blog.phodal.com"&gt;http://blog.phodal.com&lt;/li&gt;        &lt;li class="list-group-item"&gt;&lt;a hre="http://www.phodal.com"&gt;http://www.phodal.com&lt;/li&gt;        &lt;li class="list-group-item"&gt;&lt;a hre="http://socket.phodal.com"&gt;http://socket.phodal.com&lt;/li&gt;        &lt;li class="list-group-item"&gt;&lt;a hre="http://www.fjrongyu.com"&gt;http://www.fjrongyu.com&lt;/li&gt;               &lt;li class="list-group-item"&gt;&lt;a hre="http://www.sxsfjsh.com"&gt;http://www.sxsfjsh.com&lt;/li&gt;        &lt;li class="list-group-item"&gt;&lt;a hre="http://www.mokcy.cn"&gt;http://www.mokcy.cn&lt;/li&gt;        &lt;li class="list-group-item"&gt;&lt;a hre="http://www.hongzhishushe.com"&gt;http://www.hongzhishushe.com&lt;/a&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;        &lt;div class="col-lg-3"&gt;        &lt;h4&gt;skills&lt;/h4&gt;    &lt;ul class="list-group"&gt;    &lt;ul class="list-group"&gt;        &lt;li class="list-group-item"&gt;DB:             &lt;span class="label label-primary"&gt;MySQL/MariaDB&lt;/span&gt;        &lt;span class="label label-success"&gt;MongoDB&lt;/span&gt;    &lt;/li&gt;        &lt;li class="list-group-item"&gt;DB:             &lt;span class="label label-primary"&gt;SQLite&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;OS:             &lt;span class="label label-info"&gt;GNU/Linux(Centos,openSUSE)&lt;/span&gt;    &lt;/li&gt;        &lt;li class="list-group-item"&gt;OS:             &lt;span class="label label-success"&gt;Windows&lt;/span&gt;        &lt;span class="label label-primary"&gt;Mac OS X&lt;/span&gt;        &lt;/li&gt;       &lt;li class="list-group-item"&gt;Design:            &lt;span class="label label-primary"&gt;Photoshop/GIMP&lt;/span&gt;        &lt;span class="label label-info"&gt;Inkscape&lt;/span&gt;        &lt;span class="label lable-success"&gt;TexWorks&lt;/span&gt;         &lt;/li&gt;        &lt;li class="list-group-item"&gt;office:        &lt;span class="label label-success"&gt;Microsoft Office&lt;/span&gt;        &lt;span class="label label-danger"&gt;LibreOffice&lt;/span&gt;        &lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;        &lt;div class="col-lg-3"&gt;        &lt;h4&gt;嵌入式&lt;/h4&gt;    &lt;ul class="list-group"&gt;        &lt;li class="list-group-item"&gt;芯片:        &lt;span class="label label-success"&gt;Atmega &lt;/span&gt;        &lt;span class="label label-info"&gt;C51&lt;/span&gt;        &lt;span class="label label-danger"&gt;STM32&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;芯片:        &lt;span class="label label-primary"&gt;Freescale K60/XS128&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;芯片:        &lt;span class="label label-default"&gt;MSP430&lt;/span&gt;        &lt;/li&gt;                &lt;li class="list-group-item"&gt;IDE:        &lt;span class="label label-warning"&gt;IAR&lt;/span&gt;        &lt;span class="label label-info"&gt;Keil&lt;/span&gt;        &lt;span class="label label-primary"&gt;Arduino&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;Others:        &lt;span class="label label-success"&gt;Proteus&lt;/span&gt;        &lt;span class="label label-default"&gt;Multisim&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;EOS:        &lt;span class="label label-primary"&gt;uC/OS II&lt;/span&gt;        &lt;span class="label label-default"&gt;openWRT&lt;/span&gt;        &lt;span class="label label-info"&gt;Linux&lt;/span&gt;        &lt;/li&gt;        &lt;li class="list-group-item"&gt;others:        &lt;span class="label label-warning"&gt;OpenCV&lt;/span&gt;        &lt;span class="label label-success"&gt;RaspberryPi&lt;/span&gt;        &lt;/li&gt;                               &lt;/ul&gt;    &lt;/div&gt; &lt;/div&gt;        &lt;/div&gt;

Bootstrap+Timeliner+Github+JQUERY创

专业技能

热点推荐