One Step: Bootstrap (4/19 Update)

- css/js/img
- 全部使用 html5 (so css and html have to define st the beginning)
- Grid system: default 12 rows with 920 px width
- 響應式網頁：不同platform之下最優化的效果
Chrome browser support phone viewing mode (should check this if we expect multi-platform)
- This is a row composed of 2 grids
      <div class="row">
        <div class="span4">...</div> // width = span4
        <div class="span8">...</div> // width = span8
        <div class="span3 offset2">...</div> // width = span3, with a shift
      </div>

grid-fluid 流動網格( 會自動靠齊)

- Container 佈局＝排版 (Container-fluid會自動靠齊)

- RWD 響應式佈局 (根據不同的platform會呈現不同的佈局)

有一些預設的樣式

可以在resposive.less裡面找到

- Default front size: 14px, line-height: 20px

- Less: 動態生成的CSS，javascript把變數值帶入css中

- 把div的元素置中：
<div style="text-align:center;">
　<div style="margin:0 auto;border: 2px solid blue; width:150px;">這裡是文字</div>
</div>

-元素靠右/ 靠左
用ＣＳＳ：

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;}
直接加入屬性：
<img src="**.gif">內還可加入下列屬性
align=控制圖檔left(靠左)／right(靠右)／center(置中)

.XXX: class XXX
#XXX: id XXX

- 用ＩＤ控制

#responsive-image{

    width: 100%;

    height: auto;

<img src="/wp-content/uploads/very-large-flamingo.jpg"

 id="responsive-image">

- 加入 footer
https://code.i-harness.com/zh-TW/q/9a1ade

-使用小icon
https://www.w3schools.com/icons/fontawesome_icons_brand.asp
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<i class="fa fa-facebook-official" style="font-size:48px;color:red"></i>

- 更改字型 (有提供ttf檔)
http://goliimage.pixnet.net/blog/post/38251105-%E5%A6%82%E4%BD%95%E7%BE%8E%E5%8C%96%E7%B6%B2%E9%A0%81%E6%96%87%E5%AD%97%2813%29-%5B%40font-face%5D%E5%8A%A0%E5%85%A5%E8%87%AA%E5%B7%B1%E6%83%B3%E8%A6%81
    @font-face{
       font-family: OPENSAN;
       src: url(Start_template_files/fonts/Open_Sans/OpenSans-Regular.ttf);
    }
    a{
       font-family: OPENSAN;
    }

- 半透明效果
http://boohover.pixnet.net/blog/post/20556952-%E5%8D%8A%E9%80%8F%E6%98%8E%E8%88%87%E9%80%8F%E6%98%8E%E6%95%88%E6%9E%9C%E8%A8%AD%E8%A8%88-css-rgba%2C-hsla-%E8%89%B2%E5%BD%A9%E5%96%AE%E4%BD%8D-%28

#st1 .inner {
 padding: 1em 4%;
}
/*標題 h1, 段落 p 加半透明背景色*/
#st1 h1 {
 background: rgba(30%,0%,0%,0.6);
}
#st1 p {
 background: rgba(0%,10%,20%,0.6);
}

background-color: none;

background-color: transparent;

- 下次用bootthem拉layout

https://www.boottheme.com/

- 想要把兩個div並排
http://www.webtech.tw/info.php?tid=CSS_DIV_%E4%B8%A6%E6%8E%92%E8%AA%9E%E6%B3%95
用float
三種方法：float/ inline-block/ table
http://www.hotsai.com/blog/2016/12/%E7%B6%B2%E9%A0%81%E4%BD%88%E5%B1%80%E5%B8%B8%E7%94%A8%EF%BC%8C%E5%A4%9A%E5%80%8Bdiv%E6%B0%B4%E5%B9%B3%E6%8E%92%E5%88%97%E4%B9%8B%E4%B8%89%E7%A8%AE%E6%96%B9%E6%B3%95%EF%BC%8Cfloat%E3%80%81inline-block/

- SASS: 強化版的CSS
安裝：(通常要先裝ruby)
$sudo gem install sass
查看版本：
$sass -v

Referencs
https://www.jianshu.com/p/d5f62292704b

Reference:
[1]
https://www.youtube.com/watch?v=Na6BxyUXeFk
[2] 上面youtube的連接，有CSS教學
http://v3.bootcss.com/css/
[3]
http://huli.logdown.com/posts/191791-bootstrap-note

Slide講解
https://speakerdeck.com/evenwu/twitter-bootstrap-hao-yong-de-wang-ye-she-ji-kuang-jia-1

One Step

2018年4月22日星期日

Bootstrap (4/19 Update)

沒有留言:

張貼留言

2018年4月22日 星期日

Bootstrap (4/19 Update)

沒有留言:

張貼留言

2018年4月22日星期日