程序员外包定价表_带有引导程序的响应式定价表

最新推荐文章于 2023-05-23 11:16:35 发布
最新推荐文章于 2023-05-23 11:16:35 发布
阅读量289 收藏
点赞数
文章标签： css html less bootstrap css3 ViewUI
原文链接：https://www.script-tutorials.com/responsive-pricing-table-with-bootstrap/
版权

程序员外包定价表

Pricing tables are widely used on many websites. If you haven’t created pricing tables with bootstrap, our tutorial will be useful for you. Simple responsive pricing tables – they look great on all devices. On big screens, we see the entire table, three columns in a row. On small screens, they will be placed from top to down, listing all the features vertically. We will also try to minimize the number of custom styles.

定价表已在许多网站上广泛使用。 如果您尚未使用引导程序创建定价表，那么我们的教程将对您有所帮助。 简单的响应式定价表–它们在所有设备上看起来都很不错。 在大屏幕上，我们看到整个表，一行三列。 在小屏幕上，它们将从上到下放置，并垂直列出所有功能。 我们还将尝试减少自定义样式的数量。

HTML结构 (HTML structure)

To start – create an empty ‘index.html’ file and add the following markup code into it:

首先-创建一个空的'index.html'文件，并在其中添加以下标记代码： 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Pricing Table with Bootstrap | Script Tutorials</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <section id="section-pricing" class="section-pricing">
    <div class="container">
      <div class="pricing-table">
        <div class="row">
          <!-- First package -->
          <div class="col-md-4">
            <div class="package">
              <div class="header-package-1 text-center">
                <h3>Basic</h3>
                <div class="price"><h3>$10</h3></div>
              </div>
              <!-- details -->
              <div class="package-features text-center">
                <ul>
                  <li>Bandwith Unlimited</li>
                  <li>Disk Space Unlimited</li>
                  <li>Unlimited Sub Domain</li>
                  <li>Free Domain</li>
                  <li>Free Support</li>
                </ul>
                <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div>
              </div>
            </div>
          </div>
          <!-- Second package -->
          <div class="col-md-4">
            <div class="package">
              <div class="header-package-2 text-center">
                <div class="recomended"><h4>Recomended</h4></div>
                <h3>Standard</h3>
                <div class="price"><h3>$25</h3></div>
              </div>
              <!-- details -->
              <div class="package-features text-center">
                <ul>
                  <li>Bandwith Unlimited</li>
                  <li>Disk Space Unlimited</li>
                  <li>Unlimited Sub Domain</li>
                  <li>Free Domain</li>
                  <li>Free Support</li>
                  <li>Extra</li>
                </ul>
                <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div>
              </div>
            </div>
          </div>
          <!-- Third package -->
          <div class="col-md-4">
            <div class="package">
              <div class="header-package-3 text-center">
                <h3>Advanced</h3>
                <div class="price">
                <h3>$50</h3>
                </div>
              </div>
              <!-- details -->
              <div class="package-features text-center">
                <ul>
                <li>Bandwith Unlimited</li>
                <li>Disk Space Unlimited</li>
                <li>Unlimited Sub Domain</li>
                <li>Free Domain</li>
                <li>Free Support</li>
                </ul>
                <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Pricing Table with Bootstrap | Script Tutorials</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <section id="section-pricing" class="section-pricing">
    <div class="container">
      <div class="pricing-table">
        <div class="row">
          <!-- First package -->
          <div class="col-md-4">
            <div class="package">
              <div class="header-package-1 text-center">
                <h3>Basic</h3>
                <div class="price"><h3>$10</h3></div>
              </div>
              <!-- details -->
              <div class="package-features text-center">
                <ul>
                  <li>Bandwith Unlimited</li>
                  <li>Disk Space Unlimited</li>
                  <li>Unlimited Sub Domain</li>
                  <li>Free Domain</li>
                  <li>Free Support</li>
                </ul>
                <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div>
              </div>
            </div>
          </div>
          <!-- Second package -->
          <div class="col-md-4">
            <div class="package">
              <div class="header-package-2 text-center">
                <div class="recomended"><h4>Recomended</h4></div>
                <h3>Standard</h3>
                <div class="price"><h3>$25</h3></div>
              </div>
              <!-- details -->
              <div class="package-features text-center">
                <ul>
                  <li>Bandwith Unlimited</li>
                  <li>Disk Space Unlimited</li>
                  <li>Unlimited Sub Domain</li>
                  <li>Free Domain</li>
                  <li>Free Support</li>
                  <li>Extra</li>
                </ul>
                <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div>
              </div>
            </div>
          </div>
          <!-- Third package -->
          <div class="col-md-4">
            <div class="package">
              <div class="header-package-3 text-center">
                <h3>Advanced</h3>
                <div class="price">
                <h3>$50</h3>
                </div>
              </div>
              <!-- details -->
              <div class="package-features text-center">
                <ul>
                <li>Bandwith Unlimited</li>
                <li>Disk Space Unlimited</li>
                <li>Unlimited Sub Domain</li>
                <li>Free Domain</li>
                <li>Free Support</li>
                </ul>
                <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

In the head section we included all necessary css files: bootstrap.min.css and style.css with our custom styles. Since rows in bootstrap consist of 12 columns, and we need to display 3 pricing sections, each section will be 4-length column:

在开头部分，我们包含了所有必需的css文件：bootstrap.min.css和style.css，以及我们的自定义样式。 由于引导程序中的行由12列组成，并且我们需要显示3个定价部分，因此每个部分将为4个长度的列： 


<div class="col-md-4">
  <div class="package">
    <div class="header-package-1 text-center">
      <h3>title</h3>
      <div class="price"><h3>price</h3></div>
    </div>
    <!-- details -->
    <div class="package-features text-center">
      <ul>
        <li>feature 1</li>
        <li>feature 2</li>
        <li>feature 3</li>
        <li>feature 4</li>
        <li>feature 5</li>
      </ul>
      <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div>
    </div>
  </div>
</div>


<div class="col-md-4">
  <div class="package">
    <div class="header-package-1 text-center">
      <h3>title</h3>
      <div class="price"><h3>price</h3></div>
    </div>
    <!-- details -->
    <div class="package-features text-center">
      <ul>
        <li>feature 1</li>
        <li>feature 2</li>
        <li>feature 3</li>
        <li>feature 4</li>
        <li>feature 5</li>
      </ul>
      <div class="wrp-button text-center"><a href="#" class="btn standard-button">GET IT</a></div>
    </div>
  </div>
</div>

As you see, we prepared all three sections total. Now, we can start stylize the sections.

如您所见，我们总共准备了全部三个部分。 现在，我们可以开始对各节进行样式化。

CSS样式 (CSS styles)

Now, create another file: ‘css/style.css’ for our styles. First, we define the main styles for layout: paddings and margins:

现在，创建另一个文件：'css / style.css'作为我们的样式。 首先，我们定义布局的主要样式：填充和边距：

css/style.css

css / style.css 


@import url(http://fonts.googleapis.com/css?family=Roboto);
.section-pricing {
  padding:50px 0;
}
.pricing-table {
  font-family:Roboto, sans-serif;
  margin-top:35px;
}
.package {
  margin:20px 0;
  overflow:auto;
}


@import url(http://fonts.googleapis.com/css?family=Roboto);
.section-pricing {
  padding:50px 0;
}
.pricing-table {
  font-family:Roboto, sans-serif;
  margin-top:35px;
}
.package {
  margin:20px 0;
  overflow:auto;
}

All pricing headers have green background, slightly rounded on top

所有定价标题均具有绿色背景，顶部略有四舍五入 


.header-package-1,.header-package-2,.header-package-3 {
  background:green;
  border-radius:4px 4px 0 0;
  color:#fff;
  font-weight:700;
}
.header-package-1 {
  margin-top:30px;
  padding-bottom:15px;
  padding-top:15px;
}
.header-package-2 {
  padding-bottom:30px;
  padding-top:30px;
}
.header-package-3 {
  margin-top:30px;
  padding-bottom:15px;
  padding-top:15px;
}
.header-package-1 h3,.header-package-2 h3,.header-package-3 h3 {
  color:#fff;
  font-weight:800;
}


.header-package-1,.header-package-2,.header-package-3 {
  background:green;
  border-radius:4px 4px 0 0;
  color:#fff;
  font-weight:700;
}
.header-package-1 {
  margin-top:30px;
  padding-bottom:15px;
  padding-top:15px;
}
.header-package-2 {
  padding-bottom:30px;
  padding-top:30px;
}
.header-package-3 {
  margin-top:30px;
  padding-bottom:15px;
  padding-top:15px;
}
.header-package-1 h3,.header-package-2 h3,.header-package-3 h3 {
  color:#fff;
  font-weight:800;
}

Price has a thin white border, with defined width, so it looks like a box. Probably you already noticed rotated ‘recommended’ label. It has dashed white border, and it is rotated by 45 degrees

价格有一个细的白色边框，具有定义的宽度，因此它看起来像一个盒子。 可能您已经注意到旋转的“推荐”标签。 它带有虚线的白色边框，并且旋转了45度 


.price {
  border:2px solid #fff;
  color:green;
  margin:0 auto;
  padding-bottom:20px;
  padding-top:15px;
  width:100px;
}
.recomended h4 {
  border:2px dashed #FFF;
  display:inline-block;
  left:15px;
  padding:10px;
  position:absolute;
  transform:rotate(-45deg);
}


.price {
  border:2px solid #fff;
  color:green;
  margin:0 auto;
  padding-bottom:20px;
  padding-top:15px;
  width:100px;
}
.recomended h4 {
  border:2px dashed #FFF;
  display:inline-block;
  left:15px;
  padding:10px;
  position:absolute;
  transform:rotate(-45deg);
}

The list of features has a thin border, as well as every feature in this list has the border (in bottom) of the same gray color

要素列表的边框很细，并且此列表中的每个要素的边框(底部)都具有相同的灰色 


.package-features {
  border:1px solid #E3E3E3;
}
.package-features ul {
  padding:0;
}
.package-features ul li {
  border-bottom:2px solid #e3e3e3;
  list-style:none;
  overflow:auto;
  padding:20px 10px;
}


.package-features {
  border:1px solid #E3E3E3;
}
.package-features ul {
  padding:0;
}
.package-features ul li {
  border-bottom:2px solid #e3e3e3;
  list-style:none;
  overflow:auto;
  padding:20px 10px;
}

Last element of pricing tables is button. The button has rounded corners, with white text on green background

定价表的最后一个元素是按钮。 该按钮具有圆角，在绿色背景上带有白色文本 


.wrp-button {
  padding:26px 10px 36px;
}
.package-features .standard-button {
  margin:0;
  padding:15px 20px;
}
.standard-button {
  background:green;
  border:0;
  border-radius:4px;
  color:#fff;
  font-family:sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:inherit;
  margin:5px;
  padding:15px 30px;
  text-transform:uppercase;
  -webkit-transition:all ease .25s;
  transition:all ease .25s;
}
.standard-button:hover {
  color:#fff;
  opacity:0.8;
}
.standard-button:focus {
  color:#fff;
}


.wrp-button {
  padding:26px 10px 36px;
}
.package-features .standard-button {
  margin:0;
  padding:15px 20px;
}
.standard-button {
  background:green;
  border:0;
  border-radius:4px;
  color:#fff;
  font-family:sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:inherit;
  margin:5px;
  padding:15px 30px;
  text-transform:uppercase;
  -webkit-transition:all ease .25s;
  transition:all ease .25s;
}
.standard-button:hover {
  color:#fff;
  opacity:0.8;
}
.standard-button:focus {
  color:#fff;
}

That’s it, our pricing table is ready. You can check the result.

就是这样，我们的价格表已准备就绪。 您可以检查结果。

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

翻译自: https://www.script-tutorials.com/responsive-pricing-table-with-bootstrap/

程序员外包定价表

cuken7684698822
关注
【2017.11.16】外包单报价
qq_31060183的博客
11-16 1284
外包单报价公式：[ ( 你的月薪 / 22天 / 8小时 ) * 私单预估时间 ] * 2倍价格设计师外包价目表设计师级别的参考标准： 初级（1~2年，以设计师的身份，年薪3w~10w) 中级（2年以上，丰富的项目经验，年薪10w~30w） 高级（5年以上，业内比较有名气，知名公司，年薪30w+) 1.LOGO设计5+草图，源文件，4套应用模板，3次修改 初级：1000~2000 / 中级：200
程序员接私活时，软件如何定价？
Github导航站
12-15 5174
  通常来说，做这种外包订单的定价方式有两种，但无论哪一种，我们都需要对需求先行进行了解并且明确下来，才知道如何定价 按功能定价   对于一个系统来说，我们了解了用户的具体需求以后，可以将系统分为若干的功能点，按照每个功能点的复杂程度，按照一定的价格来收取费用。   例如：我们要做一个新闻的模块，新闻模块非常简单，对于后来来说，有四个功能点，新闻列表、添加新闻、修改新闻、删除新闻，对于前台来说，就是查看新闻列表和详情两个功能点。其中查看新闻列表这个功能点对于前后台都一样，可以合并在一起。   假如我们按.
你知道IT人才外派服务报价是怎样的么？建议程序员也了解下
cxyITgc的博客
06-10 758
你知道IT人才外派服务报价是怎样的么？建议程序员也了解下
响应式Bootstrap定价表样式
ICode联盟
10-25 102
响应设计的定价表样式，使用Bootstrap4和CSS3设计，这个定价表有5种独特的样式，还有5种不同的颜色定义，是一款精美的定价表。
响应式表格
eileen823的博客
02-28 1182
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
程序员接私单最全流程！定价！内附接私单渠道
最新发布
DEVELOPERAA的博客
05-23 3119
自2019疫情以来，身边很多程序员接私活，表示已经赚麻了。
五一小长假，Python爬虫接单小高潮，程序员5天赚2W
python_TB的博客
04-27 2652
前言 距五一小长假只有几天啦，记得买回家的票哦~ 每年五一前后，都会是Python兼职接单的小高潮，这段时间各个行业对爬虫类和数据分类的需求会暴增！圈子里很多朋友双休都没闲着，两天赚上万的不在少数。 不过兼职接单问题的朋友很多，我总结下来，发现大部分人都有着相同的困惑。 听说Python做兼职很赚钱，想做，但0基础不知道怎样开始 想接私活，不熟悉主流技术，实战经验也少，担心搞不定项目 没接过私活，项目定价方面也不太熟，没经验担心踩坑 可以接哪些私活？ 当初刚学Python，就有朋友介绍我去接单做私活，为
谈谈To B业务的难点
caoz的梦呓
01-28 1610
最近有个说法，中国互联网的新增长点是 To B业务。而一个经常被提及的事实是，中美互联网巨头对比，在To C业务上的收益和市值近乎并驾齐驱，虽有差距，但至少是可以相提并论...
游戏开发入门如何点亮技术树？
GitChat
11-06 1万+
经常有知友问我，我很喜欢玩游戏，可以从事游戏开发吗？开发游戏需要哪些技能？一款游戏的开发需要哪些人员参与？诸如此类的问题比比皆是。 本场 Chat 老司机带你弯道超车，以 10 年游戏行业的真实背景和经验为实例，为打算入坑游戏开发的朋友们答疑解惑。你可以学习到： 游戏开发团队结构 开发人员技能树及侧重点 常见的开发流程和工具 游戏类型及架构选型 经验教训与建议 ...
人机平台：商业未来行动路线图
GitChat
04-12 2855
内容简介 安德鲁·麦卡菲和埃里克·布莱恩约弗森是数字时代的两位前沿思想家，在其代表作畅销书《第二次机器革命》中，他们总结——由数字技术引发的机器革命时代已经到来，我们的经济模式与社会发展正以空前的速度被改写。 承接第一部作品的内容，两位作者在这本新书中对当下和未来的商业形态进行了更广泛而深入的讨论，并提出了未来商业的三大关键词——机器、平台、大众。 大脑与机器的博弈、是产品与平台的制衡、是核心与大...
福利：总结10个Python赚钱的接单平台！兼职月入5000+
m0_74942241的博客
02-14 737
如果说当下什么编程语言最靠谱或者比较适合搞副业？ 答案肯定100%是：Python
广大程序员不要做外包
gby630的专栏
11-06 6573
本文完全是我自己对软件外包认识，可以说是个“议论文”，请大家看的时候可以从自己的角度出发，来感受这篇文章里面所涉及的内容。 我所知道的外包人员的职位： 1． 程序员。 2． 软件测试人员。 3． 实施人员。 需要外包服务的的公司，我在这里暂且叫做雇主公司。一般的雇主公司规模都比较大，项目比较多，人事招聘程序繁琐。 雇主公司会在什么情况下雇用外包人员呢？ ...
程序员二本毕业在华为外包工作3年，晒出收入和存款，还以为看错了！
热门推荐
javajavajava
10-25 1万+
在职场中选择公司非常重要，有些人为了贪图大公司名气，选择去干大公司的外包，但要知道外包跟正式员工，不管是收入还是从职业地位来说相差非常大，所以建议想去外包公司上班的请慎重。 最近在职业论坛看到这样一个热门的帖子，“男子二本毕业，在华为外包工作3年，晒出收入和存款还以为看错了”。到底怎么回事？请往下看。 原来一位网友说，自己是二本毕业，到现在已经三年了，一直在华为外包，工作时间和华为正式工一样，每...
程序员接私活时，软件如何定价
地推
12-19 1768
我也是软件开发人员，9年的工作经验了，也接过私活，这个主要看软件功能模块，前端美工设计，前端html开发，我一般都是让客户或是朋友弄个功能模块文档写一下，然后我在根据情况实际去分析我的成本，因为有些阶段开发需要朋友配合完成，这也得算成本或是利润给到人家钱，分析很重要，其实私活成本没多少！ ...
程序员接私活儿注意事项
workclouderclouder的博客
07-13 5663
在网上看到，似乎接私活也有很多不容易，技术问题本身是个因素，还有很多有技术的人接私活时被骗，或者是合作到最后以失败告终。作为外包公司出身的人给大家一些建议，可借鉴，现在转型自己做项目。 接私活是怎么接的？一般流程怎样？要注意什么？签合同的风险？等等问题，希望高手能将宝贵的经验与大家共享。   第一节 接外包的渠道 1.通过朋友介绍，这个是比较靠谱的方法，如果能保证质量，可能
程序员必备词汇表：1800个关键术语，带音标高清版
"1800个程序员必备词汇-开发必备-适用前后端-编程词汇-1800词40页高清完整版-带音标-右侧下载前可预览.pdf" 这篇资源是一个专门为程序员设计的英语词汇表，包含了大约1800个在前后端软件开发中常用的英文词汇，并且...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值