Bootstrap《基礎十五》 輸入框組

2021-09-22 20:27:19 字數 1789 閱讀 8265

原文:

bootstrap《基礎十五》 輸入框組

通過向輸入域新增字首和字尾的內容,您可以向使用者輸入新增公共的元素。例如,可以新增美元符號,或者在 twitter 使用者名稱前新增 @,或者應用程式介面所需要的其他公共的元素。

.form-control新增字首或字尾元素的步驟如下:

下面的例項演示了基本的輸入框組:

結果如下所示:

您可以通過向.input-group新增相對表單大小的 class(比如.input-group-lg、input-group-sm、input-group-xs)來改變輸入框組的大小。輸入框中的內容會自動調整大小。

下面的例項演示了這點:

結果如下所示:

可以把核取方塊和單選外掛程式作為輸入框組的字首或者字尾元素,如下面的例項所示:

結果如下所示:

也可以把按鈕作為輸入框組的字首或者字尾元素,這個時候您就不是新增.input-group-addonclass,您需要使用 class.input-group-btn來包裹按鈕。這是必需的,因為預設的瀏覽器樣式不會被重寫。下面的例項演示了這點:

結果如下所示:

在輸入框組中新增帶有下拉列表的按鈕,只需要簡單地在乙個.input-group-btnclass 中包裹按鈕和下拉列表即可,如下面的例項所示:

結果如下所示:

在輸入框組中新增帶有下拉列表的分割按鈕,使用與下拉列表按鈕大致相同的樣式,但是對下拉列表新增了主要的功能,如下面的例項所示:

結果如下所示:

系列文章:

bootstrap 《基礎一》 css 概覽

bootstrap《基礎二》網路系統

bootstrap《基礎三》排版

bootstrap《基礎四》 **

bootstrap 《基礎五》**

bootstrap《基礎六》 表單

bootstrap 《基礎七》按鈕

bootstrap 《基礎八》

bootstrap《基礎九》輔助類

bootstrap《基礎十》 響應式實用工具

bootstrap《基礎十一》字型圖示(glyphicons)

bootstrap 《基礎十二》下拉列表(dropdowns)

bootstrap《基礎十三》 按鈕組

bootstrap《基礎十四》 按鈕下拉列表

bootstrap《基礎十五》 輸入框組

bootstrap《基礎十六》 導航元素

bootstrap《基礎十七》導航欄

bootstrap 《基礎十八》麵包屑導航(breadcrumbs)

bootstrap 《基礎十九》分頁

bootstrap《基礎二十》 標籤

bootstrap 《基礎二十一》徽章(badges)

bootstrap 《基礎二十二》超大螢幕(jumbotron)

bootstrap 《基礎二十三》頁面標題(page header)

bootstrap《基礎二十四》 縮圖

bootstrap 《基礎二十五》警告(alerts)

bootstrap 《基礎二十六》進度條

Bootstrap《基礎十五》 輸入框組

原文 bootstrap 基礎十五 輸入框組 通過向輸入域新增字首和字尾的內容,您可以向使用者輸入新增公共的元素。例如,可以新增美元符號,或者在 twitter 使用者名稱前新增 或者應用程式介面所需要的其他公共的元素。向.form control新增字首或字尾元素的步驟如下 下面的例項演示了基本的...

Bootstrap入門基礎

最近需要做乙個簡單的web頁面。考慮到前端經驗不足,為了快速產出,同時專案只是乙個工具,對專案沒有什麼要求,所以我選擇了bootstrap這個框架作為web框架。寫從零 學習 bootstrap 的初衷 讓我們先從bootstrap的最簡單的模板開始 讓我們一行行的來看 我用 代表解釋 代表這是ht...

bootstrap基礎學習

簡潔 直觀 強悍的前端開發框架,讓web開發更迅速 簡單。常用 哦,還有bootstrap是基於jquery的,所以之前要先引入jquery 1.bootstrap把螢幕分成四個狀態 1 lg 大螢幕 螢幕寬度大於1200px 2 md 中等螢幕 螢幕寬度992 1200px 3 sm 小螢幕 螢幕...