【Bootstrap】selector

説明 用以Bootstrap為基底的函式庫做出美觀的selector picker 官網 CDN (2.0.0 beta-1) 【必裝的函式庫】 jQuery.js(jQuery要放在最上面) bootstrap.js bootstrap.css bootstrap-select.js bootstrap-select.css 範例 用法:使用 <select> ,並且帶上 selectpicker 的 class select.selectpicker option one option two option three Display CODEPEN

Bootstrap格線系統

中文說明手冊 結構 Bootstrap的格線系統,把寬度切成12分,用橫向的row裝縱向的col,指定每個col佔12分長的多少分。 尺寸關鍵字 xs:超小螢幕 < 768px sm:小螢幕 > 768px md:中螢幕 > 992px lg:大螢幕 > 1200px link(rel=”stylesheet”, href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”) .row .col-lg-6.col-md-7.col-sm-4 .col-lg-6.col-md-5.col-sm-8 //用row包覆column //col可以向上繼承,無法向下繼承 //只指定lg → 不會套用到xs //只指定xs → 可以套用到lg 顯示與隱藏 指定col在特定元素下顯示或隱藏 visible-尺寸:只在該尺寸顯示 hidden-尺寸:只在該尺寸隱藏 link(rel=”stylesheet”, href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”) .row .col-xs-12.visible-xs h3 XS(超小螢幕<768px) .col-xs-12.visible-sm h3 SM(小螢幕>768px) .col-xs-12.visible-md h3 MD(中螢幕>992px) .col-xs-12.visible-lg h3 LG(大螢幕>1200px) 偏移 col-尺寸-offset-欄位數:指定左側向右偏移的大小 link(rel=”stylesheet”, href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”) .row .col-sm-8.col-sm-offset-4 h3 […]

Bootstrap 基本class

表頭 jumbotron 頁面表頭 功能:内元素放大 container 排版使用 加上自適應内距 link(rel=”stylesheet”, href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”) .jumbotron .container h1 Hello Bootstrap! p Bootstrap是很多人使用的網頁模板,裡面有很多別人寫好的現成css資源,也有用來排版很方便的網格系統 a.btn.btn-primary(href=”http://kkbruce.tw/bs3″ target=”_blank”) 了解更多(中文説明文件) Display 標題與圖片 img-responsive 自適應圖片大小 page-header 標題用,上下留margin,下面再留一條淺淺的灰線 link(rel=”stylesheet”, href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”) h3.page-header 寫完HTML就可以刻完網頁的設計哲學 p 當時間很趕/或是原本對設計版面沒有什麼概念的時候,就會希望,如果元件都幫我刻好好的是不是就可以刻完html網頁就做完了? img.img-responsive(src=”https://www.gaslampmedia.com/media/bootstrap.png”) Display 按鈕 btn 使成為按鈕 btn-default,btn-primary,btn-danger,btn-success,btn-warning 按鈕顏色 btn-lg,btn-xs 按鈕大小 btn-grounp 按鈕群組化 link(rel=”stylesheet”, href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”) h3.page-header 按鈕的大小與調整 p .btn.btn-default 前往報名課程 .btn.btn-primary 主要的按鈕 .btn.btn-danger.btn-lg 危險按鈕 .btn.btn-warning 警告 […]