Landy Blog
0%

發表於 更新於 分類於

上一篇的Bootstrap筆記，是大略的紀錄一下，Bootstrap的格線系統用法。
這篇筆記是用來記錄，如何將Bootstrap的scss檔案引入進你的專案檔，
並修改Bootstrap scss的檔案，將裡面的元件樣式改成自己想要的樣子。

引入Bootstrap的scss檔案

  1. 首先，你先去Bootstrap的github下載他們釋出的scss檔案。
    Bootstrap_github連結

    你可以去下載，Bootrap釋出的最新版本的sourcecode，它就在github頁面的右邊的Release的地方，就可以看到了。

    接著，你點進去之後，在該頁面的最下方，有這個Source Code的載點。

    下載完之後，再將這個bootstrap的資料夾，放到你的scss檔案裡面。
    記得!!你要將這個下載的資料夾放在跟你的all.scss同樣目錄底下。

    閱讀全文 »

發表於 更新於 分類於

Bootstrap 格線系統

  1. 首先，要使用bootstrap的話，一定要先引入它們家的css CDN。

  2. Bootstrap是設計給行動優先的框架。所以，他們的斷點大部分都是使用min-width來設計。
    所以，他們的格線系統是先從手機板型往PC往上寫。

  3. Boostrap的格線系統

    上圖，是Bootstrap整體區塊的架構。
    首先，在最外面一定要放一個.container，如果沒放.container的話，格線系統會變怪怪的。

    .container的下一層是 .row，要注意的是 .row的內層的第一層必須是 .col-。
    接著，你要撰寫的內容就要放在 .col-的區塊裡面。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h2>菜單</h2>
            </div>
            <div class="col-md-9">
                <h2>表單</h2>
            </div>
        </div>
    </div>

    另外，Bootstrap的欄位總數預設是12欄。
    上面這個範例，3個欄位加上9個欄位是12欄位。

  4. 不要對.col- 和 .row 使用 padding-right, padding-left, margin-right, margin-left，
    因為，Bootstrap的格線系統就是專門針對水平的樣式作處理的，如果自己加上這些水平方向的
    推擠的話，會影響原本的布局。

  5. 雖然，上面一點說不要對格線系統使用水平推擠的功能。但是，你是可以對.row使用
    margin-top 和margin-bottom的上下推擠的功能。

  6. .container-fluid 可以用來當版型需要滿版的時候使用
    另外，你也可以將.container放在.container-fluid裡面使用。

發表於 更新於 分類於

在第二週上的課程 和 作業中遇到的重點與問題 紀錄

第二週

  1. 在.product-list中的li和其slogon的position之間的關係

父元素的position屬性的值設為relative，
子元素的position屬性設為absolute，接著，再用left, right, top, bottom之類的屬性去設定你要的位置。

  1. 垂直文字的css樣式寫法
    writing-mode: vertical-lr
    對於向左對其的內容而言，vertical-lr和vertical-rl的差別在於下一行是會在上一行的左邊或右邊

由上面的語法，就可以達成以下圖片中，本日精選的垂直的文字寫法囉

  1. letter-spacing文字間隔設定
    以上的css樣式設定，可以決定文字與文字間的間隔距離，語法的寫法如下
    letter-spacing: 10px;

這上面的語法是運用在第二週作業中的本日精選，這四個字彼此的間隔的設定。

  1. 作業中搜尋框的作法

以下這一段程式碼是實作出搜尋框的html結構

1
2
3
4
5
6
7
8
9
<div class="footer-search-frame">
    <div class="input-section">
        <div class="input-icon"><i class="fas fa-envelope"></i></div>
        <div class="input-content-section">
            <input class="input-content" type="text">
        </div>    
    </div>
    <button class="input-button"><i class="fas fa-arrow-right"></i></button>
</div>

主要是先由最外層元素.footer-search-frame包起來，
接著，第二層又兩個元素input-section和input-button構成。

先講.footer-search-frame，就是利用display:flex的屬性設定將上面這兩個子元素弄成水平的，
然後，在讓這兩個子元素自己定義自己的寬度要多少，來達成版面要得設計效果。

接著，第二層
input-button
它就是一個button元素，裡面就只有放一個fontawesome的樣式在裡面
input-section
裡面有放兩個div元素，分別為input-icon和input-content-section
它的屬性一樣有加上display:flex;，來讓裡面的元素水平排列

接著，第三層
input-icon
裡面就只有放一個fontawesome的元素而已

input-content-section
裡面就只有放一個input元素input-content

接著，第四層
input-content
它是一個input元素，然後可以利用height元素來決定輸入文字的大小，順便也可以調整整體.footer-search-frame
的高度大小，也可以說.footer-search-frame是由這個input元素的height數值所決定的。

  1. a連結使用a:mail 和 a:tel
    當你的a連結中是要放mail的地址或電話的時候，
    你可以先寫出a:mail，接著，按下tab鍵就會跑出以下的內容
    <a href="mailto:"></a>
    接著，你再那個mailto的旁邊加入你想要填入的email網址，並將eamil的內容加到a連結的內容，就可以讓這個a連結連動到你的email囉~
    即
    <a href="mailto:randychen510.gmail.com">randychen510.gmail.com</a>

發表於 更新於 分類於

在第一週上的課程 和 作業中遇到的重點與問題 紀錄

第一週課程

  1. html內容的快速寫法

    h2.title{學歷}>span{EDUCATION}

    上面這個寫法，在你按下tab鍵後，就會變成下面的html內文

    1
    2
    3
    4
    <h2 class="title">
        學歷
        <span>EDUCATION</span>
    </h2>

  2. 有關line-height屬性的特性
    假設在html文件中有一個p段落

    1
    2
    3
    4
    p{
        font-size: 12px;
        line-height: 24px
    }

    上面這段程式碼的內容，呈現的畫面就會像下面這樣。

    所以，如果這個p段落，是包裹在某個父容器裡面，那在計算這個父容器的高度時，
    就必須要連p段落的line-height，也算進去。

  3. <img>元素的天生bug
    <img>元素有個天生的bug，就是在<img>的下方會多一個2px左右的留白。

    那要消除這個<img>的bug，就只要將它的display屬性改成block，就ok了~

  4. 父類別使用display:flex，讓子元素的高度被拉長填滿父元素，造成子元素的圖片長寬比不正確的問題
    ex:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    ---html文件---
    <div class="container">
      <img class="image" src="https://upload.cc/i1/2020/12/22/xPVBgS.jpg" alt="">    
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, provident. Quis porro obcaecati rerum consequuntur accusantium ab error qui exercitationem.</p>
    </div>

    ---css文件---
    .image{
      width: 300px;
    }
    .container{
      display: flex;
      height: 600px;
    }

    上面這個例子，你就會看到在.container的父元素裡面的子元素img的圖片高度會完全填滿父元素的高度，進而造成該圖片的比例很怪，
    解法是 在這個img的外面再套一個div，這樣就可以看到img的圖片回到正常的長寬比了。而css的樣式，是不需要做任何修改的囉~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---html文件---
<div class="container">
  <div>   // 新增這個div包在img外面
    <img class="image" src="https://upload.cc/i1/2020/12/22/xPVBgS.jpg" alt="">    
  </div> 
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, provident. Quis porro obcaecati rerum consequuntur accusantium ab error qui exercitationem.</p>
</div>

---css文件---
.image{
  width: 300px;
}
.container{
  display: flex;
  height: 600px;
}
閱讀全文 »