-
基本按鈕 Bootstrap框架V3.x版本的基本按鈕和V2.x版本的基本按鈕一樣,都是通過類名“btn”來實現。不同的是在V3.x版本要簡約很多,去除了V2.x版本中的大量的CSS3中的部分特效,比如說文本陰影(text-shadow)、漸變背景(background-image)、邊框陰影(box-shadow)等。查看全部
-
按鈕 按鈕也是Bootstrap框架核心內容之一。因為按鈕是Web制作中不可缺少的東西。而且不同的Web頁面具有不同的按鈕風格,甚至說同一個Web網站或應用程序具有多種按鈕風格,比如說不同的按鈕顏色、大小和狀態等。那么Bootstrap框架也考慮了這些因素,接下來的內容我們一起來探討Bootstrap框架中的另一核心部分內容——按鈕。查看全部
-
表單提示信息 平常在制作表單驗證時,要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式,將提示信息以塊狀顯示,并且顯示在控件底部。查看全部
-
表單控件狀態(驗證狀態) 在制作表單時,不免要做表單驗證。同樣也需要提供驗證狀態樣式,在Bootstrap框架中同樣提供這幾種效果。 1、.has-warning:警告狀態(黃色) 2、.has-error:錯誤狀態(紅色) 3、.has-success:成功狀態(綠色)查看全部
-
表單控件狀態(禁用狀態) Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的,在相應的表單控件上添加屬性“disabled”。和其他表單的禁用狀態不同的是,Bootstrap框架做了一些樣式風格的處理: 使用方法為:只需要在需要禁用的表單控件上加上“disabled”即可: <input class="form-control" type="text" placeholder="表單已禁用,不能輸入" disabled>查看全部
-
表單控件狀態(焦點狀態) 表單主要用來與用戶溝通,好的表單就能更好的與用戶進行溝通,而好的表單一定離不開表單的控件狀態。 表單狀態的作用: 每一種狀態都能給用戶傳遞不同的信息,比如表單有焦點的狀態可以告訴用戶可以輸入或選擇東西,禁用狀態可以告訴用戶不可以輸入或選擇東西,還有就是表單控件驗證狀態,可以告訴用戶的操作是否正確等。那么在Bootstrap框架中的表單控件也具備這些狀態。 焦點狀態是通過偽類“:focus”來實現。Bootstrap框架中表單控件的焦點狀態刪除了outline的默認樣式,重新添加陰影效果。查看全部
-
表單控件大小 前面看到的表單控件都正常的大小。可以通過設置控件的height,line-height,padding和font-size等屬性來實現控件的高度設置。不過Bootstrap框架還提供了兩個不同的類名,用來控制表單控件的高度。這兩個類名是: 1、input-sm:讓控件比正常大小更小 2、input-lg:讓控件比正常大小更大查看全部
-
表單控件(按鈕) 按鈕也是表單重要控件之一,制作按鈕通常使用下面代碼來實現: ? input[type=“submit”] ? input[type=“button”] ? input[type=“reset”] ? <button>查看全部
-
表單控件(復選框和單選按鈕水平排列) Bootstrap框架也做了這方面的考慮: 1、如果checkbox需要水平排列,只需要在label標簽上添加類名“checkbox-inline” 2、如果radio需要水平排列,只需要在label標簽上添加類名“radio-inline”查看全部
-
表單控件(復選框checkbox和單選擇按鈕radio) 1、不管是checkbox還是radio都使用label包起來了 2、checkbox連同label標簽放置在一個名為“.checkbox”的容器內 3、radio連同label標簽放置在一個名為“.radio”的容器內 在Bootstrap框架中,主要借助“.checkbox”和“.radio”樣式,來處理復選框、單選按鈕與標簽的對齊方式。查看全部
-
表單控件(文本域textarea) 文本域和原始使用方法一樣,設置rows可定義其高度,設置cols可以設置其寬度。但如果textarea元素中添加了類名“form-control”類名,則無需設置cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。查看全部
-
表單控件(下拉選擇框select) Bootstrap框架中的下拉選擇框使用和原始的一致,多行選擇設置multiple屬性的值為multiple。Bootstrap框架會為這些元素提供統一的樣式風格。查看全部
-
表單控件(輸入框input) 每一個表單都是由表單控件組成。離開了控件,表單就失去了意義。接下來的我們簡單的來了解Bootstrap框架中表單控件的相關知識。 單行輸入框,常見的文本輸入框,也就是input的type屬性值為text。在Bootstrap中使用input時也必須添加type類型,如果沒有指定type類型,將無法得到正確的樣式,因為Bootstrap框架都是通過input[type=“?”](其中?號代表type類型,比如說text類型,對應的是input[type=“text”])的形式來定義樣式的。查看全部
-
內聯表單 在Bootstrap框架中實現這樣的表單效果是輕而易舉的,你只需要在<form>元素中添加類名“form-inline”即可。 內聯表單實現原理非常簡單,欲將表單控件在一行顯示,就需要將表單控件設置成內聯塊元素(display:inline-block)。查看全部
-
水平表單 Bootstrap框架默認的表單是垂直顯示風格,但很多時候我們需要的水平表單風格(標簽居左,表單控件居右)。 在Bootstrap框架中要實現水平表單效果,必須滿足以下兩個條件: 1、在<form>元素是使用類名“form-horizontal”。 2、配合Bootstrap框架的網格系統。(網格布局會在以后的章節中詳細講解) 在<form>元素上使用類名“form-horizontal”主要有以下幾個作用: 1、設置表單控件padding和margin值。 2、改變“form-group”的表現形式,類似于網格系統的“row”查看全部
舉報
0/150
提交
取消