Toggle main menu visibility
下載輕鬆架
套件下載
使用手冊
發問討論
網站地圖
:::
登入
登入
帳號
密碼
登入
:::
所有書籍
「BootStarp4實做入門」目錄
MarkDown
18-1 調整卡片內容
1. 準備開發工具
2. 相關資源網站
3. 製作基本頁面
4. CSS基本概念
5. 容器應用
6. 網格系統
6-1 斷點
6-2 BootStrap3 及 BootStrap4 的斷點比較
6-3 欄位排序
6-4 欄位推移
6-5 巢狀欄位
6-6 Flexbox方向性
7. 間隔工具
8. 按鈕
9. 套用不同的呈現方式
10. 容器垂直對齊
10-1 個別項目的垂直對齊
10-2 水平對齊
10-3 內容的對齊
11. 導覽列
11-1 調整導覽列外觀
11-2 導覽列選項
12. 讓HTML可以被引入
13. 檢查手機用畫面
14. 佔位圖片
15. 輪播(滑動圖)
15-1 媒體物件
15-2 把導覽列往上提
15-3 讓輪播內容也自適應
15-4 標題
16. 無間隔+直角邊框
17. 文字顏色、底色
18. 卡片
18-1 調整卡片內容
19. 導覽
20. 表格
21. 自動增行
22. 表單
22-1 表單群組
23. 20170923上課範例
23-1 index.html
23-2 css/my.css
24. 20170924上課範例
24-1 index.html
24-2 header.html
24-3 nav.html
24-4 carousel.html
24-5 button1.html
24-6 button2.html
24-7 video.html
24-8 news.html
24-9 table.html
24-10 css/my.css
20. 表格
BootStarp4實做入門 ============== ### 一、導覽頁籤 1. 導覽有兩種,一種是頁籤式(nav-tabs)的,一種是藥丸式(nav-pills)的。 2. 詳情:
3. 我們直接拿範例(稍微簡化)來修改: ```
選項1
選項2
...
...
``` 4. 上方`
`是導覽列,其中的`
`就是導覽選項,利用`href`來連結到下方對應內容 5. 下方的`
`則是點選導覽選項對應的內容,必須設定`id`才能和導覽選項對應上。 ### 二、調整導覽列 1. 預設是頁籤式的,我們將 `.nav-tabs` 改為 `.nav-pills` 即可換成藥丸式的。 2. 為了讓選項滿版,我們加入`.nav-fill`。 3. 順便改變底色,所以加入了`.bg-secondary`,使之呈現為灰色。 4. 讓他和上下有點距離,所以加入`.my-2`,設定邊距為2個空白空間。最後看起來像這樣: ```
``` ### 三、調整選項 1. 要多一組選項,就要在上方`
`中多一組`
`,同時,下方`
`也要多一組設定。 2. 上方導覽選項,例如: ```
綜合公告
``` 3. 由於我們有改變底色為深色系,故將選項顏色利用`.text-white`設為白色,此外,可以根據需求修改`href`值,以便範下方內容對應。 ### 四、調整對應內容 1. 下方內容區範例: ```
``` 2. 主要是修改`id`值,以便和上方選項對應。 3. 其內容可以直接寫在`
`中,此處為了精簡畫面,另做 table.html 來引入之。 ### 五、快速產生
在 Visual Studio Code 中輸入`b4-nav-tabs-pills-ul-variation`按
Enter
可以快速產生導覽的語法,不過其中的 .nav-stacked 是 BootStrap3用的,在BS4中沒作用,故可以拿掉。
:::
書籍目錄
展開
|
闔起
快速登入
所有討論區
Tad Search 資料查詢
懶人框架討論區
實戰PHP7+MySQL
XOOPS輕鬆架快速上手
校園網站輕鬆架一般討論區
Booking Helper 預約助手
es_stud_sign 班級報名
es charge 學生收費管理
E-Stud import 學生名冊管理
es_after_school 課後照顧報名
es_exam 學生作業繳交
ES_panel 校務行政面板
es_timetable 課表
ES_youtube 本校影音
info_whats 網路設備記錄
jill booking 場地預約
jill_notice 臨時公告
jill query 簡易查詢
jill receipt 領據填報
kw club 社團報名
kw device 設備借用管理系統
ntpc_oprnid 新北市 OpenID 登入
TinyD嵌入內容模組
ugm contact us 聯絡我們
ugm page 自訂頁面
ugm table 萬用表格
Yaoh Servicelearning 服務學習管理系統
dummy 自訂模組
soone_submit 投稿模組
Tad Adm 站長工具箱
Tad Assignment 作業上傳展示模組
Tad Blocks 進階區塊管理
Tad Book3 線上書籍
Tad Cal 行事曆
Tad Cbox 即時留言簿
Tad Discuss 討論區模組
Tad Embed 崁入模組
Tad Evaluation 評鑑檔案管理
Tad Form 萬用表單模組
Tad FAQ 常見問答
Tad Google 相簿
Tad Gallery 電子相簿
Tad Guide 安裝精靈
Tad Honor 榮譽榜
Tad idioms 背背成語
Tad Link 好站連結
Tad Login 快速登入
Tad Lunch3 午餐資訊
Tad Lunch2 營養午餐公告
Tad Meeting 會議系統
Tad Merage 線上合併套印
Tad News 本站消息
Tad Player 影音播放
Tad RSS 友站新聞
Tad Repair 維修通報
Tad SiteMap網站地圖
Tad Timeline 重要紀事
Tad Themes 佈景管理
Tad Tools 工具包
Tad TV 直播電視
Tad Uploader 檔案上傳模組
Tad Users 大量會員管理
Tad Web 多人網頁模組
MyTabs 我的頁籤
Random Quote 隨機小語
LogCounterX 網站流量統計
Yaoh light 多區塊多層次跑馬燈模組
校園網站輕鬆架功能建議區
佈景討論區
即時留言簿
計數器
今天:
昨天:
總計: