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 警告
   .btn.btn-success.btn-xs 成功按鈕
   br
   br
   .btn-group
    .btn.btn-default 設定
    .btn.btn-primary 帳號
    .btn.btn-default 課程
    .btn.btn-default 購買資訊
    .btn.btn-default 前往報名課程
    .btn.btn-default 前往報名課程

Display

麵包屑導覽列

  • breadcrumb
    麵包屑導覽頁,方便呈現分類樹資訊
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

h3.page-header 麵包屑導覽列
 ul.breadcrumb
 li 
  a 動態網頁課程
 li 
  a Bootstrap介紹
 li 
  a 第一個範例

Display

清單

  • ul.list-group
  • li.list-group-item
    清單
  • span.badge
    清單項目徽章
  • li.active
    清單亮起來
  • li.disabled 禁用的灰色
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

h3.page-header 清單練習
ul.list-group
 li.list-group-item list-group 清單
  span.badge list-group-item 裡面的項目
 li.list-group-item.disabled span.badge 右方小提醒
  span.badge disabled禁用的灰色
 li.list-group-item.active breadcrumn 麵包屑導覽列 
  span.badge active亮起來
 li.list-group-item.list-group-item-success .list-group-item-success成功的綠

Display

表格

  • table
    處理表格樣式
  • table-striped
    條紋式的row
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.container
 h3.page-header 表格練習
 table.table.table-striped
  thead
  tr
   th 項目
   th 優點
   th 缺點
  tr
   th 速度
   th 可以很快建立網頁
   th 看起來大同小異
  tr
   th 樣式
   th 基本視覺不會太離譜
   th 深入改需要功力
  tr
   th 適合情境
   th 沒時間的時候
   th 獨特設計,動態網頁

Display

well:文字灰框

link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.container
 h3.page-header 好用的Bootstrap
 p.well 省時又方便的Bootstrap,是由兩個twitter員工開發的框架

Display

練習網址

CODEPEN

 

JavaScript 螢幕高度觸發動畫 scrollTop

目的

網頁滑到中間,觸發動畫

解説

  • document.body.scrollTop:偵測現在在的位置離網頁頂端的距離
  • window.innerHeight:螢幕畫面高度
  • 把動畫的CSS寫成別的class,不要直接寫在元素上
  • 頂端距離條件完成後,加上動畫CSS,達成觸發動畫效果

範例

滑到第2頁觸發動畫

.page1
.page2
 #box
*
 box-sizing: border-box
 //border: 1px solid #000

html,body
 margin: 0
 padding: 0

.page1,.page2
 width: 100vw
 height: 100vh
 background: linear-gradient(#99E1D9 50%, #F0F7F4 50%)
 background-size: 2%
 text-align: center
 
#box
 width: 100px
 height: 100px
 background-color: darken(#99E1D9, 15%)
 border-radius: 100%
 margin-right: auto
 margin-left: auto
 position: relative
 opacity: 0
 top: 40vh
 animation-fill-mode: both
 
//動畫class分開寫
.fadeIn
 animation: fadeIn 3s
 
@keyframes fadeIn
 0%
  opacity: 0
 100%
  opacity: 1
//不能用document.body.addEventListener
//因為不是拖動body
//而是拖動整個頁面document
document.addEventListener("scroll",

  function(){

   if(document.body.scrollTop>window.innerHeight*0.5){
    //class添加不能使用className+=
    //要用效能更高的classList.add()
    document.querySelector("#box").classList.add("fadeIn");
   }  
  }
 );

Display

補充:scrollBottom方法

沒有 scrollBottom ,但是可以自己算

//body長度 - scrollTop
//現在位置離底部距離
document.body.clientHeight-document.body.scrollTop

更新:document.body.scrollTop永遠是0

某些webkit結構的瀏覽器的scrollTop不是在document.body裡面,而是在document.documentElement裡面。

【解決方法】

document.body.scrollTop→替換成:document.documentElement.scrollTop

SVG stroke-linecap

屬性介紹

  • butt (default)
  • round
  • square

butt (default)


svg(viewbox="-50 -50 100 100")
 line(x1=-40, y1=0, x2=40, y2=0)
 //path 中間畫一條線比較好觀察
 //M起始點
 //K終點
 path(d="M-40, 00 L40, 0")

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke-width: 10
  stroke: black
  stroke-linecap: butt
 path
  stroke: white

Display

round

比原本的線再多突出一個圓角


svg(viewbox="-50 -50 100 100")
 line(x1=-40, y1=0, x2=40, y2=0)
 path(d="M-40, 00 L40, 0")

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke-width: 10
  stroke: black
  stroke-linecap: round
 path
  stroke: white

Display

square

比原本的線再多突出一個角
(白色中線是原本的線長)


svg(viewbox="-50 -50 100 100")
 line(x1=-40, y1=0, x2=40, y2=0)
 path(d="M-40, 00 L40, 0")

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke-width: 10
  stroke: black
  stroke-linecap: square
 path
  stroke: white

Display

SVG漸層

基本方法


svg(viewbox="-50 -50 100 100")
 //defs svg描述標籤
 defs
  linearGradient#mygra
    stop(offset="5%" stop-color="#C29979")
    stop(offset="80%" stop-color="#c1d7ae")
 circle(cx=0, cy=0, r=20)

svg
 border: 1px solid #000
 width: 500px  

circle
 fill: url(#mygra)

Display

漸層方向

x1, y1→漸層起點,x2, y2→漸層終點

  • 左往右 (default) :x1=0%, y1=0%, x2=100%, y2=0%
  • 右往左:x1=100%, y1=0%, x2=0%, y2=0%
  • 上至下:x1=0%, y1=0%, x2=0%, y2=100%
  • 下至上:x1=0%, y1=100%, x2=0%, y2=0%

svg(viewbox="-50 -50 100 100")
 //上至下漸層
 defs
  linearGradient(x1="0%" y1="0%" x2="0%" y2="100%")#mygra
    stop(offset="5%" stop-color="#C29979")
    stop(offset="80%" stop-color="#c1d7ae")
 circle(cx=0, cy=0, r=20)

svg
 border: 1px solid #000
 width: 500px  

circle
 fill: url(#mygra)

Display

漸層範圍:gradientUnits

  • objectBoundingBox (default):只有指定物件上色
  • userSpaceOnUse:整個svg上色,指定的物件擷取一部份svg的漸層呈現

Display
gradientUnits=”objectBoundingBox” (default):只有指定物件上色

gradientUnits=”userSpaceOnUse”:整個svg上色,指定的物件擷取一部份svg的漸層呈現

注意:line漸層

line的漸層必須使用userSpaceOnUse(整個svg上色),否則漸層無效


svg(viewbox="-50 -50 100 100")
 defs
  //由上到下
  //必須使用userSpaceOnUse
  linearGradient(x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse")#mygra5
    stop(offset="5%" stop-color="#C29979")
    stop(offset="30%" stop-color="#c1d7ae")
 line(x1="0" y1="-20" x2="0" y2="50")

svg
 border: 1px solid #000
 width: 300px
 line
  stroke: url(#mygra5)
  stroke-width: 3

Display

内部錨點 Internal Link

結構

  1. 製作錨點
  2. 用jQuery做出滑順滑動效果

範例

button
 //加smooth,對應下面的js
 a.smooth(href="#next") click it
.blank
#next the next box
#next
 width: 200px
 height: 100px
 border: 1px solid #000
 text-align: center
 padding-top: 70px
 
.blank
 height: 100vh
function scrollToElement (selector) {
 $('html, body').animate({
 scrollTop: $(selector).offset().top
 }, 2000); 
};

$(document).on('click', 'a.smooth', function () {
 scrollToElement($(this).attr('href'));
});

CSS background-position

針對background-image的圖片位置做定位

預設値

.pic
.pic
 width: 300px
 height: 200px
 background-image: url("https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/993735_563618560401443_1458385305_n.jpg?oh=1612ee39554e7a805abe7f7d70ccbad7&oe=58EFDD0A")
 background-position: 0 0
 //等同於
 //background-position: left top
 //從水平軸0%處(最左方)開始定位,從垂直軸0%處開始定位

Display

.

background-position關鍵字

第一個値:水平方向

  • left
  • right
  • center
  • 或是指定%數(從左方往右多少%)
 第二個値:垂直方向
  • top
  • bottom
  • center
  • 或是指定%數(從上方往下多少%)

範例:圖片水平垂直置中定位

.pic
 width: 300px
 height: 200px
 background-image: url("https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/993735_563618560401443_1458385305_n.jpg?oh=1612ee39554e7a805abe7f7d70ccbad7&oe=58EFDD0A")
 background-position: center center
 //也可以寫成
 //background-position: 50% 50%

Display

.

Python 格式化輸出

Print Formatting

把變數放入Print Statement裡面

%變數:以字元方式輸出

>>>a="String"
>>>print "This is a %s" %(a)
This is a String

#把a="String"的内容代到%(a)裡面
#接著再把%(a)的値代到print裡面的%s之中
#最後輸出字元
# a 任意命名
# %s 不可以任意命名

%字元數 . 小數位數f:四捨五入

>>>print "floating number: %1.2f" %(6.789)
'floating number: 6.79'
# %1 至少要輸出1個字元以上
# 2f 四捨五入到第2位數
# %(6.789) 處理6.789這個數字

>>>print "%10.5f" %(6.789)
   6.78900
# %6 至少要輸出10個字元以上
# 所以(空3格)6.78900

轉換字串

>>>print "Conver String: %r" %(321)
Convert String 321
# %r 轉換後的字串想要放在這裡
# %(321) 轉換321為字串
# %r 固定,不可任意命名

多處轉換字串

>>>print "First: %s, Second: %s, Third: %s" %("Hi", "two", 3)
First: Hi, Second: two, Third: 3

# %s 不可以任意命名

多處轉換字串,變數法(常用)

>>>print "First: {x}, Second: {x}".format(x="inserted")
First: inserted, Second: inserted

# {x} 裡面的變數可以任意命名

>>>print "First: {x}, Second: {y}, Third: {x}".format(x="inserted", y="two!")
First: inserted, Second: two!, Third: inserted

Python 3 的print為函數形式,所以前後要多加個 () 包起來

 

PHP 隱藏錯誤訊息

@:用在函數前,使不顯示錯誤訊息

範例

//檢査註冊表單輸入之email有沒有重複註冊到
$result=mysql_query("SELECT * FROM member WHERE email=$_GET[email]");

 //@ 用在函數前,使不顯示錯誤訊息
 $row=@mysql_fetch_array($result);

error_reporting(0):關閉提示

//關閉提示(非錯誤訊息)
error_reporting(0);

PHP + MySQL 中文字亂碼問題

解説

建立PHP網頁讀取MySQL資料庫時,如果資料庫裡面有中文,讀取出來放到網頁上會變成問號

解決方法

MySQL資料庫編碼設定

點選資料庫右邊的小水庫圖案,在編碼與排序設定【utf8_unicode_ci】

php中的head設定

在php的html部分裡面的,之中插入這行程式碼

<head>
mysql_query("SET NAMES 'UTF8'");
</head>

讀取資料庫設定

php讀取資料前,設定這一行

mysql_query("SET NAMES 'UTF8'");

windows 日文字型介紹

使用方式

中文國字與日文漢字有微小差異,為防止漢字缺漏的問題(突然變成新細明體),套用日文字型前要先將中文國字轉為日文漢字。

轉換器

Win Mac 共通字體

游ゴシック
Windows8.1以後、MacOS10.9以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

游明朝 Windows8.1以後、MacOS10.9以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

Win 單獨字體

メイリオ Windows Vista以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

Meiryo UI Windows 7以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

MS Pゴシック Windows95以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

MS P明朝 Windows95以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

HGS明朝E Windows95以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

Early Access Google Fonts

Google早期フォント Rounded M+ 1c

*Early Access Google Fonts在wordpress上面沒有效果
使用方法

@import url(http://fonts.googleapis.com/earlyaccess/mplus1p.css);
font-family: 'Mplus 1p';

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

Google早期フォント さわらびゴシック

使用方法

@import url(http://fonts.googleapis.com/earlyaccess/sawarabigothic.css);
font-family: 'Sawarabi Gothic';

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。