情态动词

Created: November-22, 2018

所以你想为你的业务或职业组合添加材料设计。嗯？你无法抗拒使用模态？对于你的每个项目/产品，只要点击你打算设计的那些清脆卡片就会弹出！

让我们说，对于每个项目，你已经完成了，或者对于你设计的每个产品，你需要一张材料卡。每张卡都应该有

弹出信息框的图标，列出了所有功能
你的产品或项目，详细。分享一个分享这个图标
跨社交媒体的产品或项目 fork this 图标，打开产品/项目的 github 页面

使用原生 html，并假设你使用 bootstrap 或任何其他弹性框布局，你需要

使用类行为每个新项目编写一个包装器 div
在第 12 列 cols 中为每个项目包裹你的英雄形象
写另一行
将每个链接（info | share | fork）包装在第 4 列 cols 中
将这两行注入容器中

对于初学者。完成上述所有项目后，需要为每个项目创建所需的弹出窗口。所以，

你下载了大量的 javascript 和 css（通过自定义 bootstrap 的模态功能）
你编写具有唯一 ID 的模态，以区分每个项目的信息（项目 1 的模态 -P1，项目 2 的模态 -P2 等）
然后，你可以在相应的模态中编写所需的 html，以显示每个项目的信息。

我们的目标是什么？

只是在视觉上重申，如果你的投资组合中有两个项目，那么目标就是拥有这样的卡：

http://i.stack.imgur.com/4zPvC.jpg

因此，我们对 EACH 项目有两个顾虑

英雄形象
带有信息（弹出模态），共享和分叉链接的工具栏

首先，让我们来解决当用户点击每个项目下方栏中的信息链接时会发生什么。我们需要弹出一个模态，有关项目的更多信息。

那么你究竟如何使用 bootstrap 配置 Modal？

你为每个项目写这个来触发它

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myProject1"><img src="path-to-info-icon"></img></button>

然后你像这样编写 Modal 的主体：

<div id="myProject1" class="modal fade" role="dialog">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal"></button>
                 <h4 class="modal-title">Project Title</h4>
             </div>
             <div class="modal-body">
                 <p>Some text in the modal.</p>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
         </div>
     </div>
</div>

根据你的项目描述的内容和长度，你实际上有点失去监控模态体内上面的 div 汤的开启和关闭！

另外，这个标记非常繁琐，无论如何构成你需要一个模态。

唷！它结束了吗？不，你还需要为每个项目写作，

项目卡的英雄形象，显示在工具栏上方。

那么我们如何为每个项目添加英雄形象？更多 HTML！

英雄形象需要

一排自己的
列 12 在该行内部自身宽

完整的 html 如何让我们将一个项目显示为上面显示的卡片？

<article id="project-neighbourhood">
 
    <div class="row">
 
        <div class="col-12">
 
            <img src="path-to-hero-image"></img>
 
        </div>
 
    </div>
 
    <div class="row">
 
        <div class="col-12">
            <div class="row">
                <div class="col-4">
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myProject1"><img src="path-to-info-icon"></img></button>
                </div>
                <div class="col-4">
                    <button class="btn btn-lg" id="share-on-g-plus"><img src="path-to-share-icon"></img></button>
                </div>
                <div class="col-4">
                    <button class="btn btn-lg" id="fork"><img src="path-to-fork-icon"></img></button>
                </div>
             </div> 
        </div> 
    </div> 
</article>

现在说你有 10 个项目要炫耀！你需要重写那个混乱的标记 10 次！加上 10 种不同的模态！

我没有耐心重写那个 html 和 10 个模态，我知道你也不会！