初識前端 BootStrap基礎

2021-09-28 21:58:06 字數 3721 閱讀 8165

常用樣式

表單樣式

常用外掛程式、元件

非前端開發人員初級**搭建框架?

對常用的前端元素和標籤提供美化後的樣式,並根據實際使用需要,增加了部分功能

主要作用在元素的class屬性中

定義在div中

container-fluid

將乙個容器分為12份,想佔幾份寫幾份

="container"

>

="row"

>

="col-md-4"

>

4 列<

/div>

="col-md-8"

>

8 列<

/div>

<

/div>

<

/div>

="container"

>

="row"

>

="col-md-4"

>

4 列<

/div>

="col-md-8"

>

8 列<

/div>

<

/div>

="row"

>

="col-md-2"

>

2 列<

/div>

="col-md-10"

>

10 列<

/div>

<

/div>

<

/div>

將相鄰元素隔開

左右浮動

bootstrap提供了常用標籤的簡單美化後的效果,部分標籤直接覆蓋了原標籤,可以直接使用

同時部分元素也提供了補充標籤和樣式

補充樣式

補充說明

bootstrap同時提供 .h1~.h6以及 .small

補充樣式

footer:腳注

定義了一套類名,這裡稱其為強調類名,這些強調類都是通過顏色來表示強調

css中使用text-align來對齊文字,bs中有相似用法

bootstrap 根據平時的使用情形提供了六種形式的列表:( 普通列表、有序列表、去點列表、內聯列表、 描述列表、水平描述列表)

和原生標籤相比,最常用的是去點列表和內聯列表

附加樣式

提供了5中不同的樣式,用來展示不同的顏色

表單中常見的元素主要包括:文字輸入框、下拉選擇框、單選按鈕、複選按鈕、文字域和按鈕等

通用樣式

.form-control .input-lg(較大) .input-sm(較小)

="form-horizontal"

>

="form-group"

>

="email"

class

="control-label col-sm-2"

>郵箱<

/label>

="col-sm-10"

>

"email"

class

="form-control" placeholder=

"請輸入郵箱"

/>

<

/div>

<

/div>

="form-group"

>

="pwd"

class

="control-label col-sm-2"

>密碼<

/label>

="col-sm-10"

>

"pwd"

class

="form-control" placeholder=

"請輸入密碼"

/>

<

/div>

<

/div>

="form-group"

>

="col-sm-offset-2"

>

=" checkbox"

>

"checkbox"

/>記住密碼

<

/label>

<

/div>

<

/div>

<

/div>

="form-group"

>

="col-sm-offset-2 col-sm-10"

>

="btn btn-default"

>提交<

/button>

<

/div>

<

/div>

<

/form>

="form-inline"

>

="form-group"

>

="email"

>郵箱<

/label>

"email"

class

="form-control" placeholder=

"請輸入郵箱"

/>

<

/div>

="form-group"

>

="pwd"

>密碼<

/label>

"pwd"

class

="form-control" placeholder=

"請輸入密碼"

/>

<

/div>

="form-group checkbox"

>

"checkbox"

/>記住密碼<

/label>

<

/div>

="form-group"

>

="btn btn-default"

>提交<

/button>

<

/div>

<

/form>

.form-contr

多行選擇設定:multiple=「multiple」

="form-control" rows=

"3">

<

/textarea>

基礎樣式

附加樣式

通過不同的顏色來做不同的強調

其他型別的標籤轉為按鈕標籤使用

//提交按鈕

"submit"

class

="btn btn-default" value=

"input 標籤按鈕"

/>

//超連結

"##"

class

="btn btn-info"

>a 標籤按鈕<

/a>

//span元素

="btn btn-success"

>span 標籤按鈕<

/span>

//塊級元素

="btn btn-warning"

>div 標籤按鈕<

/div>

按鈕大小

按鈕禁用

可用於展示商品等

. thumbnail

預設的 .panel 元件所做的只是設定基本的邊框(border)和內補(padding)來包含內容。

上面的那些會就寫點,不會就直接抄下面的就行

bootstrap 教程 | 菜鳥教程

初識前端 XML基礎

資料使用 工具類的使用 xml是一種文字標記語言,主要用來傳輸資料,現在用的應該算是不多了,不過之前在銀行間通訊的時候看到用的還是xml格式的資料 必須有且僅有乙個根元素 嚴格區分大小寫 屬性值用引號 雙引號或單引號 等號分開的名稱 值對 標記成對 空標記關閉 元素正確巢狀 pcdata 自定義實體...

前端框架 BootStrap

bootstrap是基於html5和css3開發的,它在jquery的基礎上進行了更為個性化的完善,形成一套自己獨有的 風格,並相容大部分jquery外掛程式。個人理解 可以使用bootstrap框架開發乙個響應式的頁面,可以同時使用與pc端,pad端和手機端,並且不影響瀏覽的效果。bootstra...

新手必看!Bootstrap前端框架 基礎介紹篇

一.什麼是bootstrap?二.bootstrap的優點 自bootstrap3起,框架包含了貫穿於整個庫的移動裝置優先的樣式 對移動裝置友好 只需具備html和css的基礎知識,就可開始學習 採用柵格布局 底層實現原理 查詢結合流體布局 js外掛程式優秀的地方在於,哪怕是不懂js的開發人員也可以...