響應式布局了解和 CSS樣式和JS外掛程式

2021-09-26 15:07:14 字數 939 閱讀 6498

* 同一套頁面可以相容不同解析度的裝置。

* 實現:依賴於柵格系統:將一行平均分成12個格仔,可以指定元素佔幾個格仔

* 步驟:

1. 定義容器。相當於之前的table、

* 容器分類:

1. container:兩邊留白

2. container-fluid:每一種裝置都是100%寬度

2. 定義行。相當於之前的tr 樣式:row

3. 定義元素。指定該元素在不同的裝置上,所佔的格仔數目。樣式:col-裝置代號-格仔數目

* 裝置代號:

1. xs:超小螢幕 手機 (<768px):col-xs-12

2. sm:小螢幕 平板 (≥768px)

3. md:中等螢幕 桌面顯示器 (≥992px)

4. lg:大螢幕 大桌面顯示器 (≥1200px)

* 注意:

1. 一行中如果格仔數目超過12,則超出部分自動換行。

2. 柵格類屬性可以向上相容。柵格類適用於與螢幕寬度大於或等於分界點大小的裝置。

3. 如果真實裝置寬度小於了設定柵格類屬性的裝置**的最小值,會乙個元素沾滿一整行。

1. 全域性css樣式:

* 按鈕:class="btn btn-default"

* :* class="img-responsive":在任意尺寸都佔100%

* 形狀**

** **

* table

* table-bordered

* table-hover

* 表單

* 給表單項新增:class="form-control"

2. 元件:

* 導航條

* 分頁條

3. 外掛程式:

* 輪播圖

了解響應式布局

響應式布局是ethan marcotte在2010年5月份提出的乙個概念,簡而言之,就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗,而且隨著目前大螢幕移動裝置的普及,用 大勢...

響應式布局和css3

1.使用百分比 2.使用em,相對於上下文的百分比 body預設16px,100 1em body 子元素相對body的大小。比如寬度為48px,則設定 width 3em 3.查詢,比較常用的框架bootstrap.css 4.css3 text shadow 陰影 1px 1px 1px 000...

css 響應式布局

響應式 型別 all所有 braille盲文觸覺裝置 embossed盲文印表機 print手持裝置 projection列印預覽 screen彩屏裝置 speech 聽覺 類似的 型別 tty不適用畫素的裝置 tv 電視 用法 media embossed 盲文印表機是綠色 box backgro...