情態動詞

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 個模態，我知道你也不會！