Bootstrap 4 및 CSS 속성을 사용하여 회의 웹 페이지를 구축한 방법
71135 단어 programminghtmlbootstrap4css
Microverse에서 제공하는 HTML/CSS 캡스톤 프로젝트의 사양에 따라 했습니다.
Microverse는 선불 비용 없이 소프트웨어 개발자가 되도록 교육하는 온라인 정규 풀 스택 소프트웨어 개발 프로그램을 제공합니다. Microverse는 거주 지역에 관계없이 모든 사람이 학습에 접근할 수 있어야 한다고 믿습니다. 그들의 방법론은 원격 협력 학습 및 마스터 학습을 사용하여 전 세계 학생들이 함께 배우고 서로 지원할 수 있습니다. 웹 사이트를 방문하면 더 많은 정보를 얻을 수 있습니다.
자, 이 게시물의 주요 주제로 돌아가 보겠습니다.
프로젝트 사양
컨퍼런스를 위한 온라인 웹사이트를 구축해야 합니다(제 경우에는 HTML/CSS 부트캠프를 선택했습니다). 나는 Cindy in Behance에서 주어진 디자인을 따라야 했다. 디자인은 다음과 같습니다.
프로젝트를 위해 3개의 페이지를 만들었지만 첫 번째 페이지the welcome page를 만드는 방법만 보여드리겠습니다.
Github 저장소here를 찾을 수 있습니다.
초기화
프로젝트를 초기화합시다. 먼저 머리에 필요한 모든 것을 추가합시다. 자유롭게 자신만의 방식으로 프로젝트를 구성하십시오(스타일 및 에셋용 폴더).
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>HTML/CSS Bootcamp</title>
<link rel="icon" href="https://img-a.udemycdn.com/course/240x135/3380132_0287_2.jpg?FyhZmUoQPie5OnRsiTnyOZsiC_sIEow_xOT0VH5Mm79l7I8ZOuTxapTAeMQbvhXfITlHKUVsAq4DpFELGnXU97g-ccpNYdMGSX6efVHZeZ2Az8cx3bjR9FwHzK1WqzIr">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/d86848cfe0.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
보시다시피 여기서 가장 중요한 것은 부트스트랩 설정과 외부 CSS 파일입니다. 원하는 글꼴 패밀리를 자유롭게 추가하세요. 제 경우에는 Lato와 Cocogoose를 사용했습니다.
내비게이션
자, 이제 navbars를 만들어 봅시다. 두 개의 탐색 모음이 있습니다. 하나는 소셜 미디어 링크가 있고 다른 하나는 로고와 다른 페이지에 대한 링크가 있습니다.
<body>
<header>
<!--navbars-->
<div class="d-none d-md-block">
<nav class="navbar navbar-expand-sm bg-dark-custom text-white pt-0 pb-0">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
English
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
My Page
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Logout
</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-white text-dark pt-0 pb-0">
<a class="navbar-brand p-0 m-0" href="./index.html">
<figure class="logo m-0">
<img class="img-fluid" src="https://img-a.udemycdn.com/course/240x135/3380132_0287_2.jpg?FyhZmUoQPie5OnRsiTnyOZsiC_sIEow_xOT0VH5Mm79l7I8ZOuTxapTAeMQbvhXfITlHKUVsAq4DpFELGnXU97g-ccpNYdMGSX6efVHZeZ2Az8cx3bjR9FwHzK1WqzIr" alt="Logo">
</figure>
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item pr-4 pl-4">
<a class="nav-link red" href="./index.html">
Home
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="./about.html">
About
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="./tickets.html">
Tickets
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
Join
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
Sponsor
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
News
</a>
</li>
<li class="nav-item pr-4 pl-4 red campaign">
<a class="nav-link" href="#">
Dashboard
</a>
</li>
</ul>
</nav>
</div>
</header>
</body>
환영 섹션
환영 섹션을 추가해 보겠습니다. 이 섹션에서는 이벤트 제목과 설명을 추가합니다.
일반적으로 사용자의 주의를 끌 정보를 추가하는 데 사용되는
.jumbotron를 사용합니다. 웹사이트 홈페이지의 첫 번째 섹션과 같은 영역에 사용하는 것이 좋습니다.
<section class="container-fluid jumbotron slider mb-0 pl-0 pr-0">
<div class="row">
<!--bars for small screens-->
<div class="pt-0 nav-small d-block d-md-none navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent1">
<i class="fas fa-bars"></i>
</div>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item pr-4 pl-4">
<a class="nav-link red" href="./index.html">
Home
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="./about.html">
About
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="./tickets.html">
Tickets
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
Join
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
Sponsor
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
News
</a>
</li>
<li class="nav-item pr-4 pl-4 red campaign">
<a class="nav-link" href="#">
Dashboard
</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
<div class="welcome-text col-12 pt-5 mt-5">
<h3 class="text-left red">"Hello World!"</h3>
<h1 class="image-effect text-uppercase text-left font-weight-bold red">HTML/CSS Bootcamp</h1>
</div>
<div class="col-12 mt-4 mb-4">
<p class="p-4 welcome-description">
HTML and CSS for Beginners course
will give your all the knowledge you need
to master HTML and CSS easily and quickly.
Free tutorial
</p>
</div>
<div class="event-date col-12">
<h2 class="font-weight-bold mb-3">Start now</h2>
<p>@ Microverse, the school for remote developers</p>
</div>
</div>
</section>
이벤트 제목 텍스트(특히 작은 배경 효과 추가) 및 섹션의 배경을 사용자 지정하기 위해 이러한 CSS 속성도 추가합니다.
.image-effect {
background-image: linear-gradient(rgba(236, 82, 66, 0.5), rgba(236, 82, 66, 0.5)), url(https://images.unsplash.com/photo-1570126646281-5ec88111777f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=725&q=80);
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
.nav-small {
font-size: 3rem;
top: 15%;
left: 5%;
}
.campaign {
border: 5px solid #ec5242;
}
.slider {
background: #f8f8f8;
background-image: linear-gradient(rgba(248, 248, 248, 0.7), rgba(248, 248, 248, 1)), url("https://images.unsplash.com/photo-1570126646281-5ec88111777f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=725&q=80");
background-size: cover;
}
.slider-about {
background: #f8f8f8;
background-image: linear-gradient(rgba(248, 248, 248, 0.7), rgba(248, 248, 248, 1));
background-size: cover;
}
.red {
color: #ec5242;
}
.bg-red {
background-color: #ec5242;
}
.bg-dark-light-custom {
background-color: rgba(143, 143, 143, 0.5);
}
.bg-dark-custom {
background-color: #272a31;
}
.welcome-description {
background-color: #f7f7f7;
border: 2px solid #fff;
}
주요 프로그램 섹션
다음은 이 섹션의 HTML 코드입니다.
<section class="container-fluid main-program text-white">
<div class="row pt-3 mb-5">
<div class="col-12">
<h3 class="text-center section-title">Main program</h3>
<hr class="hr-title">
</div>
</div>
<div class="row program justify-content-center">
<div class="col-12 col-md-2 pr-0 pl-0 program-block-parent">
<div class="program-block text-center row mb-5 p-4 bg-dark-light-custom">
<div class="col-sm-2 col-12 col-md-12 pr-0 pl-0">
<i class="fas fa-chalkboard-teacher text-white"></i>
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0 red section-subtitle">
Exhibition
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0">
6 hours on-demand video. You can listen to the speakers from
various countries
</div>
</div>
</div>
<div class="col-12 col-md-2 pr-0 pl-0 program-block-parent">
<div class="program-block text-center row mb-5 p-4 bg-dark-light-custom">
<div class="col-sm-2 col-12 col-md-12 pr-0 pl-0">
<i class="fas fa-chalkboard-teacher text-white"></i>
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0 red section-subtitle">
Exhibition
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0">
6 hours on-demand video. You can listen to the speakers from
various countries
</div>
</div>
</div>
<div class="col-12 col-md-2 pr-0 pl-0 program-block-parent">
<div class="program-block text-center row mb-5 p-4 bg-dark-light-custom">
<div class="col-sm-2 col-12 col-md-12 pr-0 pl-0">
<i class="far fa-comments text-white"></i>
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0 red section-subtitle">
Forum
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0">
6 hours on-demand video. You can listen to the speakers from
various countries
</div>
</div>
</div>
<div class="col-12 col-md-2 pr-0 pl-0 program-block-parent">
<div class="program-block text-center row mb-5 p-4 bg-dark-light-custom">
<div class="col-sm-2 col-12 col-md-12 pr-0 pl-0">
<i class="fas fa-laptop text-white"></i>
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0 red section-subtitle">
Workshop
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0">
6 hours on-demand video. You can listen to the speakers from
various countries
</div>
</div>
</div>
<div class="col-12 col-md-2 pr-0 pl-0 program-block-parent">
<div class="program-block text-center row mb-5 p-4 bg-dark-light-custom">
<div class="col-sm-2 col-12 col-md-12 pr-0 pl-0">
<i class="fas fa-atom text-white"></i>
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0 red section-subtitle">
CC Ignite
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0">
6 hours on-demand video. You can listen to the speakers from
various countries
</div>
</div>
</div>
<div class="row mb-5">
<div class="col-12 text-center">
<a href="#" class="text-white cta btn rounded-0 bg-red pr-5 pl-5 pt-4 pb-4">
Join CC Global Summit 2020
</a>
</div>
</div>
</div>
</section>
각 블록에 호버 효과가 있을 때 테두리를 추가하고 섹션의 배경에 대해 이러한 CSS 속성을 추가합니다.
.main-program {
background-image: linear-gradient(rgba(40, 43, 50, 0.9), rgba(40, 43, 50, 0.9)), url("https://images.assetsdelivery.com/compings_v2/floralset/floralset1905/floralset190500161.jpg");
background-size: cover;
}
.main-program i {
font-size: 3rem;
}
.program-block:hover {
border: 2px solid #fff;
}
특집 연사 섹션
이 섹션에서는 작은 화면(너비 <= 600px)에 있을 때 다음 그림과 같이 3명의 스피커만 표시하고 다른 스피커는 토글 버튼("더보기")에서 숨깁니다.
다음은 HTML 코드입니다.
<section class="container-fluid featured-speakers text-dark bg-white">
<div class="row pt-3 mb-5">
<div class="col-12">
<h3 class="text-center section-title">Featured speakers</h3>
<hr class="hr-title">
</div>
</div>
<div class="row speakers">
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/davidcomics.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author1.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 d-none d-md-block">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author4.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 d-none d-md-block">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author2.png" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 d-none d-md-block">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/davidcomics.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 d-none d-md-block">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author3.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
</div>
<div class="col-12 text-center mb-5 border d-block d-md-none">
<a data-toggle="collapse" data-target="#demo" href="#" class="text-uppercase btn rounded-0 pr-5 pl-5 pt-2 pb-2">
More <i class="fas fa-angle-down red"></i>
</a>
</div>
<div id="demo" class="collapse d-md-none row">
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author4.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author2.png" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/davidcomics.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author3.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
</div>
</section>
원하는 이미지로 자유롭게 변경하십시오.
이미지 처리를 위해 다음 CSS 속성을 추가합니다.
.speaker-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
파트너 섹션
이 섹션에서는 그리드 부트스트랩 클래스만 사용할 수 있었지만 플렉스 속성과 미디어 쿼리를 사용하고 싶었습니다. 그래서 나는 그것을했다 :
<section class="container-fluid partners-section text-white bg-dark-custom">
<div class="row pt-3 mb-3">
<div class="col-12">
<h3 class="text-center section-title">Partner</h3>
<hr class="hr-title">
</div>
</div>
<div class="partners">
<figure>
<img src="https://lh3.googleusercontent.com/proxy/FTbAIu2pEpk729jvah3twJTyNCuhr93S8ZjxPZvQEDkqWnMKyQBNBwRFSnloONly8fd-LI_gOQnQxO_dmDvfo46mP5x6bSwHznqURtfc6IuPAvW_lhs" alt="Partner">
</figure>
<figure>
<img src="https://lh3.googleusercontent.com/proxy/GVeJqWHGcVu_Sf4BiFDyqu7mD_Q3iGM_a9bIiHO9GnTrP7TrAnbrfTZDymSvuNs4Cpb55lxlsv6q8UXfYNZN8ILbD9HsN0WU6eOusrlOR6hrgao_Qrw" alt="Partner">
</figure>
<figure>
<img src="https://seattlecentralnewmedia.com/minjungyoon/wp-content/uploads/sites/312/2018/12/2000px-Naver_Logotype.svg_-1024x185.png" alt="Partner">
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Daum_Kakao_wordmark_-_2014.svg/1280px-Daum_Kakao_wordmark_-_2014.svg.png" alt="Partner">
</figure>
<figure>
<img src="https://i.pinimg.com/originals/ce/c0/5a/cec05a890ea942b3cd3f946f2e2c6433.png" alt="Partner">
</figure>
</div>
</section>
플렉스 정렬을 위해 이러한 CSS 속성을 추가하고 미디어 쿼리를 사용하여 일부 조정합니다.
.partners {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: auto;
}
.partners figure {
margin: 2rem;
}
.partners img {
filter: contrast(5);
}
@media screen and (max-width: 767px) {
.partners {
width: 90%;
}
.program .section-subtitle {
font-size: 1.2rem;
text-align: center;
}
.program i {
font-size: 2rem;
}
}
@media screen and (max-width: 320px) {
tr {
display: flex;
flex-wrap: wrap;
width: 100%;
}
td {
display: block;
width: 50%;
text-align: center;
}
td[colspan] {
width: 100%;
}
th {
width: 100%;
}
.hr-speakers {
display: none;
}
.speakers .row,
#demo .row {
display: block;
text-align: center;
}
.speaker-block {
margin: auto;
}
}
프로그램, 발표자 및 파트너 섹션을
<main></main> 태그로 래핑하는 것을 잊지 마십시오.마지막으로 바닥글을 작성해 보겠습니다.
바닥글
아주 간단하죠? 다음은 HTML 코드입니다.
<footer class="container-fluid p-4 bg-light">
<div class="row">
<div class="col-6">
<figure>
<img class="img-fluid" src="./assets/images/creative.jpg" alt="Creative Common">
</figure>
</div>
<div class="col-6">
<p>2020 Creative Commons Korea <br>
Some Rights Reserved </p>
</div>
</div>
</footer>
그게 다야! 일반적으로 마지막에는 다음과 유사한 내용이 있어야 합니다.
Reference
이 문제에 관하여(Bootstrap 4 및 CSS 속성을 사용하여 회의 웹 페이지를 구축한 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/daviidy/how-i-built-a-conference-web-page-with-bootstrap-and-css-properties-44ln텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
