CSS設定一覽

Header9

0 : 這個章的目的

 解釋適用CSS的方法。
在這裡解釋,普通的CSS適用Bootstrap設定的「class兩種設定。
※ CSS的寫法請參考這裡


1 : CSS的設定

首先解釋,普通的CSS的
  • 文字的大小・顏色・背景色
  • 左右長度・上下高度
  • 空格
這個3個設定的方法。
  • 文字的大小・顏色・背景色


  • 文字的大小要
      font-size:顯示的大小px(或者%);
      
    這樣設定。

    1 2 3 .example{ font-size:30px; }

    顏色的設定要
    color:喜歡的顏色;
    
    這樣設定。

    1 2 3 4 .example{ color:white; font-size:30px; }

    顏色使用英文打入,或者
    使用色碼表的「#??????」也可以設定。
    背景色的設定要
    background-color:喜歡的顏色;
    
    設定。

    1 2 3 4 5 .example{ background-color:black; color:white; font-size:30px; }

    顏色
    color:喜歡的顏色;
    
    跟這個一樣,可以用「#??????」設定(顏色請參考這裡)。
  • 左右長度・上下高度


  • 長度要
    width:設定的長度px(或者%);
    
    設定。

    1 2 3 .my-form{ width:500px; }

    設定Bootstrap的輸入框的長度的時候,有用過。
    同樣的高度是
    height:設定的高度px(或者%);
    
    設定。

    1 2 3 4 .my-form{ height:200px; width:500px; }


  • 空格

  • 空格的設定有
    • 外面的空白(margin)
    • 裡面的空白(padding)

    的兩種。
    外面的空格(margin)要
    margin-空白的地方:設定的大小px(或者%);
    
    設定。
    空格的地方的設定是,上面的話用「top」,下面的話用「bottom」,右邊的話用「right」,左邊的話用「left」設定。

    1 2 3 4 5 .example{ margin-top:150px; margin-left:10px; margin-right:10px; }

    裡面的空格使用 padding。
    padding-空白的地方:設定的大小px;
    
    這樣設定。
    空白的地方跟 margin 一樣。
    例如說,像下面一樣圖像裡的文字(詳細請參考這裡Chrome posts root text center 移動到下面一點兒的話,使用 padding 在裡面作空格。 Chrome posts root
    1 2 3 .example{ padding:150px; }

    不知道要用 margin 或者 padding 的話,試試看一次吧!

還有別的CSS的設定,有興趣的話自己查查看吧!


2 : Bootstrap的設定

解釋 Bootstrap(導入等等的詳細請參考這裡)的設定。
這一次說明
  • btn(按鈕)
  • form-control(輸入框)
  • nav(遊覽列)
的內容。
  • btn(按鈕)

  • Bootstrap的按鈕用
    class="btn 喜歡的按鈕"
    
    設定。
    藍色的按鈕

    1 <a href="/" class="btn btn-primary">藍色的按鈕</a>

    按鈕有
    btn-danger btn-success btn-info 等等的種類。(別的按鈕,請參考這裡

    詳細請參考這裡
  • form-control(輸入框)

  • Bootstrap的輸入框用
    class="form-control"
    
    設定。

    1 <%= f.text_field :name, :class => "form-control" %>

    詳細請參考這裡
  • nav(遊覽列)

  • Bootstrap的遊覽列要

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav>

    這樣設定。

    左邊的文字在
    10 <a href="/posts" class="navbar-brand">myapp</a>
    設定

    右邊的文字在
    13 14 <ul class="nav navbar-nav navbar-right"> </ul>

    的之間追加,像
    13 14 15 <ul class="nav navbar-nav navbar-right"> <li><a href="/posts/new">新增投稿</a></li> </ul>

    這樣的內容,設定。

    詳細請參考這裡

有興趣的話,自己查查看吧!