如何同時使用Bootstrap和自己編寫的CSS

Yanwei Liu

·

Follow

3 min read

·

Jun 17, 2019

--

Share

加入以下內容

Bootstrap
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">CSS
<link rel="stylesheet" type="text/css" href="src/style.css">

產生Boostrap的row

<div class="row">
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>
            <div class="col-lg-3 col-sm-6">This is a section</div>         </div>col-lg-3代表說在大解析度裝置上會看到3列(上到下)
col-sm-6代表說在小解析度裝置上會看到6列(上到下)

CSS則依照需求編寫即可

h1
            {text-align:center;
color: red;
            }h2          
            {
color:green;
            }li          
            {color: blue;
            }p
            {
color:purple;
text-align:left;
            }