目录
钥匙要点
您在MailChimp中的屏幕应该看起来如下:
修改注册表格
谢谢您的页面
>打开视图/主页,您会注意到已经有一个contact.cshtml。就像我们之前在“感谢”页面上所做的那样,除了顶部视图包代码外,清除所有内容。我们将再次使用Jumbotron。除了右侧将是空的,我们将使用两列。这使我们的触点表格在左侧更加对齐。
首页 科技周边 IT业界 Visual Studio社区2015:添加电子邮件和联系页面

Visual Studio社区2015:添加电子邮件和联系页面

Feb 20, 2025 pm 12:58 PM

Visual Studio社区2015:添加电子邮件和联系页面

钥匙要点

  • Visual Studio Community 2015允许用户实施电子邮件注册表格,联系和大约页面的网站。可以使用MailChimp的表格将电子邮件注册表格放在主页上。
  • >
  • >可以使用bootstrap抛光UI,以格式化表单并使所有内容正确对齐。可以在site.css中创建自定义类,例如不折叠,透明背景和软 - 边界 - radius。
  • >可以创建其他页面,例如“谢谢”页面和“联系”页面,以更好地进行用户互动。这些页面可以设计为匹配主页的配色方案和主题,从而在整个网站上提供一致的用户体验。
  • >
本文由Microsoft赞助。感谢您支持使SitePoint成为可能的赞助商。

>欢迎使用Microsoft的现代IDE:Visual Studio Community 2015回到我们的系列文章,以快速设计并为客户建立一个有吸引力的功能性网站。如果您错过了最后一部分,请在此处查看。 >现在,安迪(Andy)拥有网站的首页,他可以开始更多地构建网站。这将涉及实施电子邮件注册表格以及联系方式和大约页面。

>

>我们将从电子邮件注册表格开始,然后进入创建一些其他页面。电子邮件注册表将是主页上的正面和中心。它将被放置在Jumbotron的右侧,那里有一些空白空间。

>

>对于电子邮件注册表格,我们将使用MailChimp中的表格。安迪(Andy)正在使用其客户的MailChimp帐户,并将使用现有的主页列表。在主页上注册的每个人都将进入此列表。

>

我们的注册表格将设计为这样的外观:

>

从MailChimp获取代码

>登录MailChimp后,选择要添加的人的列表。单击注册表格。单击嵌入式表单。经典风格很好。客户希望捕获名字和电子邮件地址。 MailChimp实际上将其视为默认值,因此我们可以像它们一样留下东西。Visual Studio社区2015:添加电子邮件和联系页面>

您在MailChimp中的屏幕应该看起来如下:

>

复制HTML。这就是我们将粘贴到Jumbotron中的东西。在这条线下的巨型人物中:

Visual Studio社区2015:添加电子邮件和联系页面>添加MailChimp表单代码。如果您运行该应用程序,则应如下:

>

<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
登录后复制
登录后复制
登录后复制
登录后复制
显然,这不是我们希望它看起来像的样子,但这是一个很好的起点。从这里开始,我们将使用Bootstrap格式化表单,并正确对齐所有内容。

>用bootstrap

修改注册表格

>当前格式化,我们失去了响应式设计。当注册表格向右时,需要留下站点标题。他们也应该在同一行。 bootstrap将帮助我们恢复正常的状态。

我们可以添加几列。用A

和mailChimp代码包围Jumbotron。这种格式意味着站点标题文本将占据Jumbotron的2/3,而注册格式则占1/3。

>您的代码应该看起来如下:

> Visual Studio社区2015:添加电子邮件和联系页面

记住,Bootstrap使用了12个网格系统。 8 4 = 12,您可以从这些数字中看到我们如何获得2/3和1/3。

如果您运行了网站,您会看到我们有两列,我们的响应网络设计又回来了。

Visual Studio社区2015:添加电子邮件和联系页面接下来,我们将开始抛光注册表格UI,使其与网站更好地融合。

UI抛光

>而不是经过许多小步骤,而是更容易显示完成的MailChimp修改的外观。然后,我们可以逐步完成。用以下内容替换当前的MailChimp代码:

<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
登录后复制
登录后复制
登录后复制
登录后复制
>我在代码中添加了几行空间,以更好地帮助分解表格进行讨论。

>我们将创建一些自定义类,其中包括不折叠,透明背景和软 - 基本 - radius。我们在site.css.

中定义了这些类

>由于MailChimp代码的大多数与我们从MailChimp复制的代码相同,所以让我们讨论这些自定义类别的情况。

>

不折叠的定义如下:

>它只是删除了大胆的字母。这用于取消强调表单字段标签。 我们的行动呼吁是大胆的。如果表单字段标签也被粗体,则眼睛将努力弄清楚在哪里聚焦。更糟糕的情况:人们只是放弃并绕过我们的注册表格。
<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>
登录后复制
登录后复制
登录后复制
>

下面的屏幕截图显示了.Not-bold

的使用

透明背景为形式背景和输入字段提供了半透明度,为我们的设计提供了更深入的深度。它被定义为:Visual Studio社区2015:添加电子邮件和联系页面

RGBA

仅表示红色,绿色,蓝色和alpha。 Alpha设置不透明度。该值越低,越透明。值的范围为0到1。
<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>
登录后复制
登录后复制
登录后复制
>

>柔软的边界 - 拉迪乌斯使我们的形式和输入字段用圆角表达了一些优雅的细节。此类定义为:

>最后,我们有一个全宽蓝色按钮。 .max宽度在这里对我们有所帮助。蓝色不仅提供了极大的对比度,并将其赋予了眼睛,而且大尺寸使其无法抗拒。 .max宽度定义为:
<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>
登录后复制
登录后复制
>
<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
登录后复制
登录后复制
登录后复制
登录后复制

>将上面的类添加到site.cs.css和以上表单代码中的粘贴应与上面显示的相同的注册表格。

>。

谢谢您的页面

>用户注册时,通常最好提供一个确认页面,让他们知道一切顺利。您几次注册了某人的列表,只是被一个极其不想像的感谢页面打招呼?

> 安迪知道他的客户是一位真正的艺术家,想加倍努力。这意味着不要使用一些库存感谢页面浏览。但是,通过使用主页中的相同配色方案和主题。

创建感谢页面,打开控制器/homecontroller.cs。添加以下内容:

因为这是一个MVC应用程序,所以当某人输入 /home /Thenkyou时,它将达到上述方法。当然,我们不希望任何人输入“感谢”页面,因为这将作为注册我们客户的电子邮件列表的确认。
<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>
登录后复制
登录后复制
登录后复制

>我们需要此方法的视图。打开视图/主页文件夹,然后制作contact.cshtml的副本。将复制的文件重命名为thessyou.cshtml。

我们的感谢页面基本上将是主页上的Jumbotron。在Themyou.cshtml中清除代码,仅将ViewBag代码放在顶部。粘贴以下内容:

>

制作“联系”页面的副本使我们可以充分利用现有页面结构。我们将拥有我们熟悉的导航和页脚,而无需做任何事情。
<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>
登录后复制
登录后复制
登录后复制
>

>您可能注意到了Jumbotron-tall类。这是一个新课程,为感谢页面增加了一些额外的高度。否则,我们最终会在顶部跑得很短。不会太令人印象深刻。

较大的图像看起来很棒,并为我们的艺术家(即客户)提供了一些额外的播放时间。 Jumbotron-tall定义为:

您的最终感谢页面应该看起来如下:

联系页面
<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>
登录后复制
登录后复制

>我们希望为潜在客户提供直接通过他的网站与客户联系的机会。这是联系页面到达的地方。我们将遵循上述基本轮廓以创建联系页面。我们的最后页面看起来如下:

Visual Studio社区2015:添加电子邮件和联系页面

>打开视图/主页,您会注意到已经有一个contact.cshtml。就像我们之前在“感谢”页面上所做的那样,除了顶部视图包代码外,清除所有内容。我们将再次使用Jumbotron。除了右侧将是空的,我们将使用两列。这使我们的触点表格在左侧更加对齐。

>我们将介绍一些新的CSS课程,这也将影响我们的主页。头等舱是:

<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
登录后复制
登录后复制
登录后复制
登录后复制

这是专门针对表单底部的蓝色按钮。添加此类将创建一个更宽的按钮,并在按钮顶部和评论框的底部之间添加一点空间。我们还可以将此课程应用于主页按钮。

接下来是对现有类的修改:

<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>
登录后复制
登录后复制
登录后复制

对于此表格,我们将使用类似于MailChimp表单代码的结构。但是,我们不会使用MailChimp的CSS,因为我们不使用其注册表格。

>

> MailChimp CSS提供的一件事是围绕输入字段的较暗边界。现在消失了。为了补偿,我们正在添加软 - 边界 - 拉迪乌斯内部的边框,这将产生相同的效果。

>在联系表格中,我们添加了一个评论文本框。这个盒子可以带有滚动条,默认情况下将是相当白色的。这种更亮的颜色将与我们的深色形成鲜明的对比。为了帮助滚动条更好地融合,我们需要修改文本方面:>

注意FFFAD5的颜色,它将我们的评论字段文本从黑色更改为更亮的黄色。我们正在为输入字段做同样的事情:
<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>
登录后复制
登录后复制
登录后复制

上述所有CSS课程都进入site.css. <span><span>.transparent-background</span> { </span> <span>background-color: <span>rgba(0, 0, 0, 0.25)</span> </span><span>}</span>

现在我们可以继续使用表单代码。>

>您可能会注意到与MailChimp表格的一些相似之处。这实际上是该表单的修改版本。触点表格位于左柱中,该左柱为Col-Md-8宽。由于我们的右列是Col-Md-4,因此可以创建一个2/3宽的列。请记住,8 4 = 12,这是在Bootstrap中组成我们的12列网格的列数。

摘要
<span><span>.soft-border-radius</span> {
</span>  <span>border-radius: 10px;
</span><span>}</span>
登录后复制
Andy的客户现在有一个很棒的注册表格,一定会吸引注册。他还添加了一个联系表,与网站的整体主题融为一体。在这一点上,安迪的客户取得了一个良好的开端。

>

接下来,我们将为客户添加一种购买课程的方法。安迪的客户认识到移动设备现在是网络的很大一部分。他想确保移动网站提供出色的用户体验。其中一部分是在获得新课程后发送通知。

> 安迪(Andy)为网站有一些令人兴奋的功能。当一切融合在一起时,我们将继续跟随他的肩膀。

以上是Visual Studio社区2015:添加电子邮件和联系页面的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

使用GO构建网络漏洞扫描仪 使用GO构建网络漏洞扫描仪 Apr 01, 2025 am 08:27 AM

此基于GO的网络漏洞扫描仪有效地确定了潜在的安全弱点。 它利用了GO的并发功能的速度功能,包括服务检测和漏洞匹配。让我们探索它的能力和道德

CNCF ARM64飞行员:影响和见解 CNCF ARM64飞行员:影响和见解 Apr 15, 2025 am 08:27 AM

该试点程序是CNCF(云本机计算基础),安培计算,Equinix金属和驱动的合作,简化了CNCF GitHub项目的ARM64 CI/CD。 该计划解决了安全问题和绩效

使用AWS ECS和LAMBDA的无服务器图像处理管道 使用AWS ECS和LAMBDA的无服务器图像处理管道 Apr 18, 2025 am 08:28 AM

该教程通过使用AWS服务来指导您通过构建无服务器图像处理管道。 我们将创建一个部署在ECS Fargate群集上的next.js前端,与API网关,Lambda函数,S3桶和DynamoDB进行交互。 Th

21个开发人员新闻通讯将在2025年订阅 21个开发人员新闻通讯将在2025年订阅 Apr 24, 2025 am 08:28 AM

与这些顶级开发人员新闻通讯有关最新技术趋势的了解! 这个精选的清单为每个人提供了一些东西,从AI爱好者到经验丰富的后端和前端开发人员。 选择您的收藏夹并节省时间搜索REL

See all articles