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

加入以下內容

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;
}

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store