Bootstrap+Timeliner+Github+JQUERY创建程序员的简历（二）---专业技能表

最新推荐文章于 2024-06-28 07:00:00 发布

原创最新推荐文章于 2024-06-28 07:00:00 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#专业技能 #python #erlang #android #eclipse

过程分享专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一个使用Bootstrap构建的专业技能展示页面实例，通过不同颜色的标签展示了多种编程语言、框架及工具等技能，并提供了完整的HTML代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码可见: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

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 2013

Bootstrap label

如官网所介绍

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

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

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

源码如下所示

  <div class="container " id="section-4">
	  <br />

	   <h2>专业技能</h2>
	    <div class="row">
        <div class="col-lg-3">
        <h4>开发</h4>
		    <ul class="list-group">
		        <li class="list-group-item">语言: 	    
			        <span class="label label-primary">C/C++</span>
			        <span class="label label-success">Python</span>
			        <span class="label label-primary">Javascript</span>
		        </li>
		       <li class="list-group-item">语言:    
			        <span class="label label-primary">Java</span>
			        <span class="label label-info">C51</span>
			        <span class="label label-success">Lisp</span>
			        <span class="label label-danger">Erlang</span>
		         </li>

		        <li class="list-group-item">框架: 	    
			        <span class="label label-info">Django</span>
			        <span class="label label-success">Pomelo</span>
			        <span class="label label-primary">Bootstrap</span>
		        </li>
		       <li class="list-group-item">框架:    
			        <span class="label label-primary">jQuery</span>
			        <span class="label label-info">jQuery Mobile</span>
		         </li>
		        <li class="list-group-item">框架:
		        	<span class="label label-success">Cocos2d-X</span>
		        	<span class="label label-danger">Rails</span>
		        </li>
		        <li class="list-group-item">Editor:
		        	<span class="label label-success">Emacs</span>
		        	<span class="label label-danger">Vim</span>
		        	<span class="label label-info">Coda</span>
		        </li>
		        <li class="list-group-item">Editor:
		        	<span class="label label-info">Sublime Text</span>
		        	<span class="label label-danger">Notepad++</span>
		        </li>
		        <li class="list-group-item">IDE:
		        	<span class="label label-primary">Eclipse</span>
		        	<span class="label label-success">Android Studio</span>
		        </li>
		        <li class="list-group-item">IDE:
		        	<span class="label label-info">Aptana</span>
		        	<span class="label label-danger">Dreamweaver</span>
		        </li>
		        <li class="list-group-item">IDE:
		        	<span class="label label-primary">Visual Studio</span>
		        	<span class="label label-suceess">QT Creator</span>
		        </li>
		        </ul>	
		        </div>

        <div class="col-lg-3">
        <h4>WEB集</h4>
	    <ul class="list-group">
       <ul class="list-group">
		        <li class="list-group-item"><a hre="http://api.phodal.com">http://api.phodal.com</li>
		        <li class="list-group-item"><a hre="http://blog.phodal.com">http://blog.phodal.com</li>
		        <li class="list-group-item"><a hre="http://www.phodal.com">http://www.phodal.com</li>
		        <li class="list-group-item"><a hre="http://socket.phodal.com">http://socket.phodal.com</li>
		        <li class="list-group-item"><a hre="http://www.fjrongyu.com">http://www.fjrongyu.com</li>		       
		        <li class="list-group-item"><a hre="http://www.sxsfjsh.com">http://www.sxsfjsh.com</li>
		        <li class="list-group-item"><a hre="http://www.mokcy.cn">http://www.mokcy.cn</li>
		        <li class="list-group-item"><a hre="http://www.hongzhishushe.com">http://www.hongzhishushe.com</a></li>
		        </ul>
		    </div>

        <div class="col-lg-3">
        <h4>skills</h4>
	    <ul class="list-group">
		    <ul class="list-group">
		        <li class="list-group-item">DB: 	    
			        <span class="label label-primary">MySQL/MariaDB</span>
			        <span class="label label-success">MongoDB</span>
			    </li>
		        <li class="list-group-item">DB: 	    
			        <span class="label label-primary">SQLite</span>
		        </li>

		        <li class="list-group-item">OS: 	    
			        <span class="label label-info">GNU/Linux(Centos,openSUSE)</span>
			    </li>
		        <li class="list-group-item">OS: 	    
			        <span class="label label-success">Windows</span>
			        <span class="label label-primary">Mac OS X</span>
		        </li>
		       <li class="list-group-item">Design:    
			        <span class="label label-primary">Photoshop/GIMP</span>
			        <span class="label label-info">Inkscape</span>
			        <span class="label lable-success">TexWorks</span>
		         </li>
		        <li class="list-group-item">office:
		        	<span class="label label-success">Microsoft Office</span>
		        	<span class="label label-danger">LibreOffice</span>
		        </li>
		        </ul>
		    </div>

        <div class="col-lg-3">
        <h4>嵌入式</h4>
	    <ul class="list-group">
		        <li class="list-group-item">芯片:
		        	<span class="label label-success">Atmega </span>
		        	<span class="label label-info">C51</span>
		        	<span class="label label-danger">STM32</span>
		        </li>
		        <li class="list-group-item">芯片:
		        	<span class="label label-primary">Freescale K60/XS128</span>
		        </li>
		        <li class="list-group-item">芯片:
		        	<span class="label label-default">MSP430</span>
		        </li>			        
		        <li class="list-group-item">IDE:
		        	<span class="label label-warning">IAR</span>
		        	<span class="label label-info">Keil</span>
		        	<span class="label label-primary">Arduino</span>
		        </li>	

		        <li class="list-group-item">Others:
		        	<span class="label label-success">Proteus</span>
		        	<span class="label label-default">Multisim</span>
		        </li>	
		        <li class="list-group-item">EOS:
		        	<span class="label label-primary">uC/OS II</span>
		        	<span class="label label-default">openWRT</span>
		        	<span class="label label-info">Linux</span>
		        </li>			
		        <li class="list-group-item">others:
		        	<span class="label label-warning">OpenCV</span>
		        	<span class="label label-success">RaspberryPi</span>
		        </li>			                		       
		        </ul>
		    </div>
		 </div>

        </div>