整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
么是 Bootstrap？
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。
為什么使用 Bootstrap？
移動設(shè)備優(yōu)先：自 Bootstrap 3 起，框架包含了貫穿于整個庫的移動設(shè)備優(yōu)先的樣式。
瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。
容易上手：只要您具備 HTML 和 CSS 的基礎(chǔ)知識，您就可以開始學(xué)習(xí) Bootstrap。
響應(yīng)式設(shè)計：Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺式機、平板電腦和手機。更多有關(guān)響應(yīng)式設(shè)計的內(nèi)容詳見Bootstrap 響應(yīng)式設(shè)計。
它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案。
它包含了功能強大的內(nèi)置組件，易于定制。
它還提供了基于 Web 的定制。
它是開源的。
Bootstrap 包的內(nèi)容
基本結(jié)構(gòu)：Bootstrap 提供了一個帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細講解。
CSS：Bootstrap 自帶以下特性：全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細講解。
組件：Bootstrap 包含了十幾個可重用的組件，用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。這將在 布局組件部分詳細講解。
JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細講解。
定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
你可以使用我們的在線編輯器在線編輯代碼，并點擊運行按鈕查看結(jié)果。
Bootstrap 實例
<divclass="container"><divclass="jumbotron"><h1>我的第一個 Bootstrap 頁面</h1><p>重置窗口大小，查看響應(yīng)式效果！</p></div><divclass="row"><divclass="col-sm-4"><h3>Column 1</h3><p>學(xué)的不僅是技術(shù)，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div><divclass="col-sm-4"><h3>Column 2</h3><p>學(xué)的不僅是技術(shù)，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div><divclass="col-sm-4"><h3>Column 3</h3><p>學(xué)的不僅是技術(shù)，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div></div></div>
嘗試一下 ?
更多實例
Bootstrap 實例2
<divclass="table-responsive"><tableclass="table table-striped table-bordered"><thead><tr><th>#</th><th>Name</th><th>Street</th></tr></thead><tbody><tr><td>1</td><td>Anna Awesome</td><td>Broome Street</td></tr><tr><td>2</td><td>Debbie Dallas</td><td>Houston Street</td></tr><tr><td>3</td><td>John Doe</td><td>Madison Street</td></tr></tbody></table></div>
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
多公司的業(yè)務(wù)需要收集和展示信息，但常常困惑于表單數(shù)量龐大，復(fù)用率不高等問題。動態(tài)HTML可填充表單是解決這一困境的理想方法。隨著HTML和自適應(yīng)HTML表單的發(fā)展，您可以超越靜態(tài)PDF表單的范圍，而且您可以在保證安全性的情況下做到這一點。許多企業(yè)級的工作流軟件可能要上萬元，而基于web架構(gòu)，利用可填充的HTML表單作為工作流文件傳遞的系統(tǒng)，可以在任何設(shè)備上輕松訪問，并通過已完成表單的所有渠道交付選項進行提交。業(yè)務(wù)流程的完整工作流可以通過與現(xiàn)有或新業(yè)務(wù)系統(tǒng)集成的單個表單解決方案來處理。它的好處是您不再需要大量修改業(yè)務(wù)軟件，只要利用動態(tài)HTML表單作為出入系統(tǒng)的通道，讓它成為連接您與客戶、合作伙伴、供應(yīng)商和員工的自動化信息通訊解決方案。
動態(tài)HTML表單在醫(yī)療上的可應(yīng)用性
真正的動態(tài)HTML表單只顯示與完成多步驟工作流的個人相關(guān)的問題和信息。效率和準(zhǔn)確性是動態(tài)HTML表單的首要任務(wù)。在設(shè)計表單時，用戶界面在重要功能列表中的位置也很高。用戶不想浪費時間查看與其情況無關(guān)的字段、段落或按鈕。我最近做了核磁共振檢查，并收到了一份兩頁紙的合法大小的文件。考慮到核磁共振機是醫(yī)院里最昂貴、技術(shù)最先進的機器之一，而且它們使用的是紙質(zhì)表格耗損量也巨大。當(dāng)我看到那些與我檢查不相關(guān)的問題時，我忽然意識到這個診斷報告中的流程存在著多大的效率浪費。更不用說，在診療報告中有些部分實際上是空白的，也只能由核磁共振技術(shù)人員填充。于是，我聯(lián)系了醫(yī)院管理人員，向他們展示了表單的設(shè)計和收集數(shù)據(jù)的方式。許多情況下，當(dāng)人們已經(jīng)是您的客戶或病人時，重復(fù)的提供地址和電話號碼等基本信息，都是非常不必要的事。
根據(jù)用戶所做的選擇，動態(tài)HTML表單將只顯示與每個選擇相關(guān)的信息，從而最大限度地提高表單的實用性。無論是醫(yī)務(wù)人員還是醫(yī)院行政人員，時間對于他們來說太寶貴了，不能浪費在那些無關(guān)緊要的事情上。如果患者沒有過敏癥，他們選擇“否”，表單列表上無需顯示常見的過敏癥列表。更明智地是使用動態(tài)HTML表單，如果患者對過敏原選擇“是”，則表單可以自動調(diào)整以顯示可能的新選項，從而觸發(fā)顯示表單字段，以便患者列出其過敏原。此外，表單還可以顯示常見過敏原的復(fù)選框列表。
使用動態(tài)HTML表單收集數(shù)據(jù)的好處對于工作流和客戶體驗?zāi)繕?biāo)來說是巨大的。HTML自適應(yīng)表單的一個最大優(yōu)點是，它們?yōu)槭澜缟纤腥颂峁┝税踩亍⒖煽康氐目商畛浔韱危⑶也恍枰蕾嚾魏翁厥獾能浖陀布＠纾瓿蒑RI表格的患者可以在就醫(yī)前、在家里、在路上就完成，并且可以通過電子郵件將PDF發(fā)送給他們，以獲取病患的記錄。想象一下，在客戶和業(yè)務(wù)方面，您的用戶使用可填充表單可以減少多少步驟和時間。HTML表單是動態(tài)的、可移植的，在智能手機、平板電腦、PC上提供全渠道的交付，并且可以通過Web服務(wù)與任何業(yè)務(wù)軟件一起工作。
動態(tài)可填充表單會根據(jù)輸入的數(shù)據(jù)立即做出更改。例如，如果用戶正在填寫有關(guān)新實用程序服務(wù)的表單，則這些字段僅與該特定服務(wù)相關(guān)，并且可以根據(jù)需要提供可用的服務(wù)選項。另一個例子是保險單。根據(jù)所有必要的保險表單，您可以憑借用戶的需要縮小或擴展表單的內(nèi)容，不必填寫不必要的字段，也不必占用客戶大量的時間。
基于web的動態(tài)HTML表單最終能滿足全渠道交付，這對客戶來說是大有裨益的。
可填充表單可以是跨行業(yè)的解決方案。如前所述，醫(yī)療保健中存在一些場景，同樣地在銀行、教育、保險、制造、電信、公用事業(yè)也應(yīng)使用動態(tài)可填充表單。這些行業(yè)的企業(yè)以及更多內(nèi)部或從供應(yīng)商、業(yè)務(wù)合作伙伴和客戶外部收集數(shù)據(jù)，并向他們提供信息，盡可能的減少工作流中表單填寫的時間，提升工作流效率。
輯導(dǎo)語：作為數(shù)據(jù)展示的一個重要形式，合理的表格設(shè)計可以幫助用戶更清晰快捷地獲取信息，進而提升用戶體驗。那么，我們應(yīng)當(dāng)如何根據(jù)業(yè)務(wù)需求對表格進行合理設(shè)計？本篇文章里，作者針對表格列寬的設(shè)置問題進行了分析探討，一起來看一下。
表格是展現(xiàn)行列數(shù)據(jù)較為清晰、高效的形式。對于表格列寬的設(shè)置，是關(guān)系到表格是否清晰、高效的一個重要方面。對于表格應(yīng)用場景多且復(fù)雜的B端產(chǎn)品來說，表格是數(shù)據(jù)的主要展示形式之一，良好的表格列寬設(shè)置對提升產(chǎn)品體驗非常重要。
在討論表格列寬設(shè)置之前，需要先明確幾個先導(dǎo)性問題。
應(yīng)盡可能將列數(shù)最小化。可根據(jù)實際業(yè)務(wù)需求，在表格中僅展示對用戶決策有重要意義的字段，將更多詳細字段納入「詳情」頁。
如果業(yè)務(wù)需求具有特殊性，列數(shù)難以精簡時，則可以考慮在表格內(nèi)使用橫向滾動條。
不要通過收縮列寬度來增加更多的列數(shù)量。
合適的內(nèi)邊距將使表格列寬設(shè)置效果更優(yōu)。各列的內(nèi)邊距應(yīng)適中且統(tǒng)一，太大會造成表格橫向空間的浪費，太小會造成內(nèi)容擁擠，缺乏呼吸感。
列內(nèi)字符數(shù)對于表格的列寬設(shè)置具有積極的參考作用。表格中所展示的結(jié)構(gòu)化數(shù)據(jù)，通常是嚴(yán)格地遵循數(shù)據(jù)格式與長度規(guī)范的。因此，對于列內(nèi)的字符數(shù)，是可以結(jié)合實際的業(yè)務(wù)數(shù)據(jù)進行預(yù)估的。
對每一列字符數(shù)的預(yù)估，通常有以下兩種情況：
表格的寬度通常有兩種設(shè)置方式，一是固定寬度，二是跟隨瀏覽器窗口自適應(yīng)。這兩種表格寬度的設(shè)置方式，將會對列寬設(shè)置產(chǎn)生不同的影響。另外需注意的是，當(dāng)總列寬小于表格寬度時，最后一列的右側(cè)會出現(xiàn)空白列；當(dāng)總列寬大于表格寬度時，則會出現(xiàn)橫向滾動條。
表格列寬設(shè)置通常有三種方式，
表格列寬的自適應(yīng)，通常是根據(jù)各列可見的最長的字符數(shù)，按比例進行分配的（具體需看底層框架的實現(xiàn)情況）。在列寬自適應(yīng)時，總列寬不會小于表格寬度，通常正好等于表格寬。只有當(dāng)大部分或所有列收縮至極限時，才可能出現(xiàn)總列寬大于表格寬度的情況，才會出現(xiàn)橫向滾動條。
1）優(yōu)點
2）缺點
3）適合場景
表格列寬以百分比設(shè)置時，可結(jié)合實際的業(yè)務(wù)數(shù)據(jù)對字符數(shù)進行預(yù)估，據(jù)此給出各列所占百分比。無論表格寬度為固定值，還是跟隨瀏覽器窗口自適應(yīng)，都需保證所有列的百分比之和大于等于100%。
1）最小列寬
將表格列寬設(shè)置為最小寬度，是一種特殊設(shè)置方式，這能夠避免出現(xiàn)列過度收縮的情況。在實際列寬大于最小列寬時，列寬將以百分比的方式進行分配。
例如，當(dāng) Column 1 的最小寬度為100px，Column 2 的最小寬度為200px，Column 3 的最小寬度為300px，則當(dāng)各列的實際列寬大于最小列寬時，三列的列寬比將按照1:2:3進行分配，即 Column 1 占 17%，Column 2 占 33%，Column 3 占 50%。
2）優(yōu)點
3）缺點
表格寬度跟隨瀏覽器窗口自適應(yīng)時，可能會出現(xiàn)某些列有橫向空間浪費，某些列卻橫向空間不足。
4）適合場景
表格使用場景較少且簡單，無需精細設(shè)置列寬度。
列寬以固定的像素單位設(shè)置時，表格的顯示情況，是完全可以預(yù)知的。各列寬可根據(jù)實際的業(yè)務(wù)數(shù)據(jù)對字符數(shù)進行預(yù)估。列寬需根據(jù)表格寬度設(shè)置方式來進行設(shè)置：
當(dāng)表格寬度為固定值時，為每一列設(shè)置合適的固定寬度值即可，但需保證總列寬大于等于表格寬度。
列寬度取值建議：為字符數(shù)的確定性較高的列，設(shè)置剛剛合適的列寬度；為字符數(shù)的確定性較低的列，根據(jù)字符數(shù)范圍取一個較富余的列寬度。
當(dāng)表格寬度跟隨瀏覽器窗口自適應(yīng)時，需為其中至少一列設(shè)置最小寬度，讓其跟隨瀏覽器窗口自適應(yīng)，以保證總列寬始終不小于表格寬度；其余各列設(shè)置合適的固定寬度值。
列寬度取值建議：為字符數(shù)的確定性較高的列，設(shè)置剛剛合適的列寬度；為字符數(shù)的確定性較低的列設(shè)置最小寬度，讓其跟隨瀏覽器窗口自適應(yīng)。
以上列寬取值建議為一種簡單便捷的方式，在實際應(yīng)用時，可根據(jù)情況適當(dāng)調(diào)整，以取得更和諧的顯示效果。如在有橫向空間盈余的情況下，為各列適當(dāng)增加留白空間。
1）優(yōu)點
2）缺點
3）適合場景
表格單元格內(nèi)的字符溢出處理，是表格列寬設(shè)置過程中必將面臨的一個問題。在表格場景中，比較常見的字符溢出處理方式是換行和截斷。
鑒于用戶通常對表格數(shù)據(jù)具有快速地掃視與對比的需求，建議優(yōu)先使用換行的溢出處理方式。但當(dāng)換行超過2行時，會占用過多高度，表格將損失易讀性。因此，建議在換行超過2行時截斷，鼠標(biāo)懸停時使用tooltip顯示完整內(nèi)容。
對于核心字段列，以及重復(fù)率較高的字段列，應(yīng)保證其在默認(rèn)狀態(tài)下的識別度，避免在截斷后，因暴露的字符數(shù)過少或重復(fù)度極高而失去識別性。
手動調(diào)節(jié)列寬擴展了表格的適應(yīng)性，以符合更復(fù)雜多變的場景。手動調(diào)整某一列的寬度后，其余列寬度的適應(yīng)性取決于列寬的設(shè)置方式，具體如下：
1）最小列寬
如果列寬設(shè)置為最小列寬，手動調(diào)節(jié)列寬時仍可將列寬縮小至最小列寬以下。但當(dāng)其它列在手動調(diào)整時，設(shè)置了最小列寬的列，只能被壓縮至最小列寬。
2）注意事項
3）適合場景
表格使用場景較多且復(fù)雜。
從提升開發(fā)效率的角度來說，表格列寬的設(shè)置方式應(yīng)有一個全局統(tǒng)一的設(shè)置方式。從適應(yīng)性的廣泛度來說，列寬以固定的像素單位設(shè)置的方式更適合表格應(yīng)用場景較多的B端產(chǎn)品。
本文由@xulu 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
