(八)使用Streamlit：輕鬆掌握頁面佈局和排版 #python #python3 #python编程 #flask #streamlit

成為這個頻道的會員並獲得福利：
https://www.youtube.com/channel/UC9zG1ZsTERusFSzmuMVFr3A/join

(一)使用Streamlit輕鬆製作Web應用程式，無需前端技能，完全使用Python！
完成第一支網頁程式hello streamlit！https://youtu.be/Uc51N9jvACk
(二)使用Streamlit輕鬆製作Web應用程式：文字顯示https://youtu.be/BfEo_MLoYf4
(三)使用Streamlit輕鬆製作Web應用程式：數據、圖片顯示：https://youtu.be/fsTazF6_oME
(四)使用Streamlit輕鬆製作Web應用程式：顯示圖表與地圖：https://youtu.be/0im7ScuebJU
(五)使用Streamlit的互動小工具一般、連結與下載按鈕實作：https://youtu.be/gxmFtcqvhDQ
(六)使用Streamlit的互動小工具單、複選框實作：https://youtu.be/ZrwZSQ0b-8Q
(七)使用Streamlit互動式小工具 input相關元件操作：https://youtu.be/zogrFZ7x2f0
(八)Streamlit入門：輕鬆掌握頁面佈局和排版：https://youtu.be/PfSiN2d1tUw
(九)使用Streamlit的互動式小工具，顯示進度和狀態：https://youtu.be/V_YvRnKtf1c
(十)使用Streamlit的互動式小工具 | 聊天元素實作：https://youtu.be/qCwOqQBcLpo
(十一) Streamlit 網頁配置與表單元件實作https://youtu.be/zTcYER1-_Ds
(十二)Streamlit 連結MySQL資料庫實作https://youtu.be/8lOsLOEFWnE

從零開始-玩轉MySQL資料庫(全2小時)https://youtu.be/Krrek8onTc8

接著我們開始進行介紹吧
首先來介紹側邊欄sidebar的佈局方式
-------------------------------------------
import streamlit as st

# 設定應用的標題和簡短描述
st.title('聯繫方式選擇')
st.markdown('目前示範將下拉選單放到側邊欄：')

# 創建下拉選單選項
contact_option = st.sidebar.selectbox(
'選擇您希望的聯繫方式:',
('電子郵件', '家用電話', '手機'))

# 顯示用戶選擇的聯繫方式
st.write('您選擇了:', contact_option)

genre = st.sidebar.radio(
"您最喜歡的電影類型是什麼",
[":rainbow[喜劇]", "***劇情***", "紀錄片 :movie_camera:"],
captions=["笑到不行。", "準備好爆米花。", "永不停止學習。"])


st.sidebar.link_button("前往奇摩首頁", "https://tw.yahoo.com",type="primary",help="hello my friend")
st.sidebar.link_button("前往龍龍的教學頻道", "   / @changlunglung  ",disabled=True)

-------------------------------------------

在來是columns的方式
這個翻成中文反而不好解釋，我們直接帶操作，你就了解了。

像這個展示圖片場景就很適合用這樣的佈局
-------------------------------------------
import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
st.header("仙人掌唱歌")
st.image("01.jpg")

with col2:
st.header("夢幻騎士")
st.image("02.jpg")

with col3:
st.header("長城美少女")
st.image("03.jpg")
-------------------------------------------

接著來介紹tag頁籤的佈局

import streamlit as st

tab1, tab2, tab3 = st.tabs(["卡通", "中古世紀", “人物"])

with tab1:
st.header("仙人掌唱歌")
st.image("01.jpg")

with tab2:
st.header("夢幻騎士")
st.image("02.jpg")

with tab3:
st.header("長城美少女")
st.image("03.jpg")

, width=200

-------------------------------------------
也支援符號
":+1:

或文字色彩
:rainbow [中古世紀]



喜歡龍龍的教學影片嗎？請加入訂閱的行列吧！
加入會員：https://www.youtube.com/@changlunglung

-記得一定要按讚喔，歡迎來到 龍龍老師的程式教學
手把手帶您寫好程式，歡迎訂閱、按讚及分享

-讓我們一起為理想而堅持努力下去
歡迎留言提供寶貴建議，或者想觀看的主題。