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

最新推荐文章于 2023-06-28 15:38:40 发布
最新推荐文章于 2023-06-28 15:38:40 发布
阅读量3.6k 收藏 1
点赞数 1
分类专栏： 过程分享 文章标签： 专业技能 python erlang android eclipse
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phodal/article/details/12888745
版权

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


Phodal
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网上零食商城(ssm+bootstrap+jquery+AngularJs+EasyUI)
11-05
前后端分离（含有权限管理，高德地图地位，ECharts图形展示等技术），利用angularjs实现图片上传，消息提示框等功能，可以用作web项目的框架来使用，帮助学习angularjs和bootstrap前段和SSM后台框架的程序员，可当作...
Web之CSS
tl2267190799的博客
02-28 674
前端的CSS使用
web前端之CSS样式书写方法
姜大大的博客
03-09 2233
前言
Web前端系列技术之CSS基础（从入门开始）①
小柴爱程序的博客
07-22 802
Java系列技术之CSS基础（从入门开始）
web基础篇-css
weixin_44803968的博客
06-28 656
【代码】web基础篇-css。
web前端学习笔记--css书写位置
weixin_46493903的博客
08-04 502
css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML的文件样式的计算机语言。 作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化 css规则：由两个主要的部分组成：选择器、以及一条或多条的声明 p{width：300px;font-size:14px;} 其中，p是选择器，{}里的是多条样式属性，每一条样式属性由属性名：属性值组成 书写位置： 根据书写位置的不同，可以分为内联式、内嵌式、外联式、导入式 内联式(行内式) 书写位置:在
twitter bootstrap 2.2.0框架包+中文说明文档
10-31
口号是适用于任何场景，适用于每一个人...非常强大，Bootstrap适应不同技术水平的从业者，无论是设计师还是程序员，大牛还是菜鸟。既能用来开发简单的小东西，也能构造更为复杂的应用。附件于2012-10-31下载自github。
phoenix-1-2.github.io:这是软件开发工程师Nikhil Bhasin的投资组合网站
04-03
嗨，我是一个热情的程序员 。 我是诺伊达Jaypee信息技术学院的一名本科生，攻读信息技术学士学位。 我在“数据结构和算法”中有一个正确的命令。 我擅长： 编程语言：Java，C ++，Python，Javascript（ES-6）。 ...
基于ssm开发的医院HR人事管理系统（加强版本+ shiro）
01-02
spring+spring mvc+mybatis+bootstrap+jquery+jsp+shiro #权限相关的表在tab.sql中 **项目说明** - 想学习spring mvc 在《最代码》中找到了一个医院管理系统>，程序比较简单，正好适合我，但后面一看，系统应该也...
AskaDev:询问您的问题并从其他开发人员那里获取解决方案。 一个小型django项目，用于实现关注者和点赞系统以及Base64 DataURL中的个人资料图片的图像压缩
05-23
（当前回答最多的开发人员正在发展 :grinning_face_with_sweat: ）使用的技术 :laptop: HTML CSS和Bootstrap（我们正在用Vuesax替换Bootstrap） JavaScript和jQuery + select2在某些地方Django（Python） 用于表情...
CSS 内嵌样式
ivenqin的博客
08-31 4455
前面一节我们讲了行内样式，但是行内样式的缺点就是样式不能重用。例如当有好多个 <p> 标签，我们希望所有的 <p> 标签的样式都一致，那么需要在每个标签中都写一遍，这么会很麻烦，也会增加很多代码。 那么为了解决这个问题，本节我们学一下内嵌样式，也可以叫做内部样式。 什么是内嵌样式 内嵌样式就是将 CSS 代码写在 HTML 页面中的 <head> 标签中的 <style> 标签内。因为它与 HTML 内容位于同一个文件中，所以叫做内嵌样式表。 示例： 例如下面
web——CSS基础
qq_44745063的博客
05-29 1523
作者：小 琛 欢迎转载，请标明出处 文章目录引入方式选择器字体样式文本样式例子1：新闻网页例子2：产品推荐图 css:在web中，用于渲染网页的工具 引入方式 三大引入方式：内嵌、外联、行内 内嵌：在html的head中，定义style，将所有渲染内容写在里面 外联：定义一个.css文件，将所有渲染写在该文件内，在对应的html文件中，link该文件 行间：写在某一个标签内 一般的工程开发多用外联式，这样可以让工程文件看起来清晰；内嵌式通常用于演示等简单操作；行间式在css渲染阶段一般不使用，通
Day_03 css
lbw18的博客
03-02 167
文章目录2. 内容讲解2.1 CSS的作用2.2 CSS的引入方式2.2.1 行内样式2.2.2 内部样式2.2.3 外部样式2.3 CSS代码语法2.4 CSS选择器2.4.1 标签选择器2.4.2 id选择器2.4.3 类选择器 简单了解CSS 2. 内容讲解 2.1 CSS的作用 CSS是用于设置HTML页面标签的样式，用于美化HTML页面 2.2 CSS的引入方式 2.2.1 行内样式 也就是在要设置样式的标签中添加style属性，编写css样式; 行内样式仅对当前标签生效 <!--给div设
如何在html中写css,如何在html中写css？
weixin_42502165的博客
05-31 1467
编写HTML网页时会用到css来实现一些网页效果，在HTML中可以直接写css，也可以将css样式单独保存，然后在HTML中引入css样式文件。下面我们来看一下在HTML中写css的方法：1、内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。This is ...
WEB前端CSS样式书写规范
weixin_48964444的博客
09-15 314
WEB前端CSS样式书写规范 文章目录为什么要规范书写代码？css的代码书写顺序css代码的行为规范简写css颜色属性值删除css属性值为0的单位删除无用CSS样式css属性值需要用到引号时，统一使用单引号为单个css选择器或新申明开启新行css代码的命名规范 为什么要规范书写代码？ 很多新手在书写前端代码的时候，往往会忽略一些代码书写的问题，导致写出的代码，可维护性差，代码冗余等等问题。那么如何才能好的CSS样式，下面给大家讲几个CSS代码书写技巧，以及企业级开发的一些标准。 css的代码书写顺序 没错C
WEBCSS定位
XiaoQuanQ的专栏
04-28 651
定位一直是标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。定位的定义：在中关于的内容是：position:relative | absolute | static | fixedstatic 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，
spring、spring mvc+hibernat+bootstrap+jquery
最新发布
10-01
综上所述，spring、spring mvc、Hibernate、Bootstrap和jQuery都是高度优秀的开源框架或库，它们在Java Web应用的开发过程中起到了不可或缺的作用。使用这些工具可以提高开发效率、简化开发流程，并为最终产品提供更...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值