CSS设定一览

Header9

0 : 这个章的目的

 解释适用CSS的方法。
在这里解释,普通的CSS适用Bootstrap设定的「class两个设定。
※ CSS的写法请参考这里


1 : CSS的设定

首先解释,普通的CSS的
  • 文字的大小・颜色・背景色
  • 左右长度・上下高度
  • 空格
这个三个设定的方法。
  • 文字的大小・颜色・背景色


  • 文字的大小要
      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>

    这样的內容,设定。

    详细请参考这里

有兴趣的话,自己查查看吧!