어떻게 5분 안에 부트를 사용하여 간단한 대시보드를 만듭니까?[비디오 추가]
준비 요소에서 웹 사이트를 만들시겠습니까?Bootstrap은 가장 유행하는 CSS 프레임워크 중 하나입니다.이것은 우리가 기존의 구성 요소 (예를 들어 네비게이션 표시줄이나 폼) 에서 멋진 UI를 구축할 수 있도록 한다.Bootstrap은 또한 신속한 응답을 제공하는 디자인을 제공하기 때문에 격자를 정확하게 사용하는 동시에 이동 보기를 위해 별도의 스타일링을 할 필요가 없습니다.
고급 개발자에게 CSS 프레임워크는 매우 간단한 것 같다. 왜냐하면 주로 문서를 읽는 것에 관한 것이기 때문이다. 그러나 초보자들은 가이드 구성 요소로부터 프로젝트를 구축하는 문제에 부딪힐 수 있기 때문이다.이것이 바로 내가 이 강좌를 만들고 간단한 계기판을 구축하며 점차적으로 설명하기로 결정한 이유이다.
본고에서, 나는 내비게이션 표시줄, 사이드 메뉴, 카드와 표가 있는 응답식 계기판을 만들 것이다.추가 플러그인 없이 Bootstrap을 사용할 것입니다.이 강좌에서 나는 다음과 같은 절차를 완성할 것이다.
1. 초보자 템플릿 만들기
우선 프로젝트를 시작하기 위해 간단한 HTML 파일을 만들어야 합니다.계기판이라고 불러야겠어요.html.
파일에서 기본 구조를 만들지 않습니다.Bootstrap starter 템플릿을 사용하여 모든 CDN 링크를 추가합니다.부트 페이지에서 가져오려면 검색 양식을 사용하고 Starter template를 입력합니다.다음 코드부터 시작합니다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
2. 탐색 모음 만들기
용기와 격자를 설정하기 전에, 나는 전체 창의 폭을 차지하는 내비게이션 표시줄을 추가할 것이다.이를 위해, 모든 네비게이션 표시줄 구성 요소가 안내 사이트에서 검색하는 것을 보고 싶다면, 나는 네비게이션 표시줄 구성 요소를 사용할 것이다.
나는 아래의 코드를 사용할 것이다.
<nav class="navbar navbar-dark fixed-top bg-primary flex-md-nowrap p-0 shadow">
</nav>
내 내비게이션 표시줄에는 항목 이름, 검색 표시줄, 링크 취소 등 세 가지 요소가 있다.그것들을 추가합시다.
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Duomly Dashboard</a>
<input type="text" class="form-control form-control-primary w-100" placeholder="Search..." >
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Logout</a>
</li>
</ul>
3. 맞춤형 스타일
부트 요소에 사용자 정의 스타일을 추가하려면 CSS 파일이 필요합니다.나는 나의 파일 대시보드를 호출할 것이다.css는 프로젝트와 일치합니다.이 파일을 HTML 구조에서 읽으려면 부트 링크 아래의 문서 헤더에 링크를 추가해야 합니다.
<link rel="stylesheet" href="./dashboard.css" >
.form-control-primary {
margin: 10px;
opacity: 0.2;
border-radius: 2px;
}
4. 측면 메뉴 만들기
나는 모든 사람들이 대부분의 계기판의 모양을 알고 있다고 생각한다. 그것들은 보통 보조 메뉴가 있는데, 이것이 바로 우리가 지금 해야 할 일이다.하지만 우선 용기를 추가합시다.
<div class="container-fluid">
<div class="row">
<!-- Sidear -->
</div>
</div>
<div class="col-md-2 bg-light d-none d-md-block sidebar">
<div class="left-sidebar">
</div>
</div>
<ul class="nav flex-column sidebar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">
<svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
Candidates
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
Jobs
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
Invoices
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
Reports
</a>
</li>
</ul>
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 0;
z-index: 100;
padding: 70px 0 0 10px;
border-right: 1px solid #d3d3d3;
}
.left-sidebar {
position: sticky;
top:0;
height: calc(100vh - 70px)
}
.sidebar-nav li .nav-link {
color: #333;
font-weight: 500;
}
5. 테이블 섹션 만들기
이 단계에서, 우리는 대시보드에 메인 공간을 만들고 이 부분에 응답표를 추가할 것입니다.
주 부분을 만들기 위해서 사이드 메뉴 뒤에 다음 코드를 사용합니다.
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"></main>
<h3>Candidates</h3>
<hr>
<div class="table-responsive">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Position</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>Project Manager</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>JS developer</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>Bird</td>
<td>Back-end developer</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Martin</td>
<td>Smith</td>
<td>Back-end developer</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Kate</td>
<td>Mayers</td>
<td>Scrum master</td>
</tr>
</tbody>
</table>
</div>
main {
padding-top: 90px;
}
6. 카드 섹션 만들기
이제 영수증을 대표하는 카드가 몇 장 있는 다른 부분을 추가합시다.일치하도록 다른 제목과 구분자를 추가합니다.
<h3>Invoice</h3>
<hr>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Invoice #184382</h5>
<p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<a href="#" class="btn btn-primary">Print</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Invoice #184386</h5>
<p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<a href="#" class="btn btn-primary">Print</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Invoice #184389</h5>
<p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<a href="#" class="btn btn-primary">Print</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Invoice #184391</h5>
<p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<a href="#" class="btn btn-primary">Print</a>
</div>
</div>
</div>
</div>
main .card {
margin-bottom: 20px;
}
결론
이 강좌에서 안내를 사용하여 간단한 계기판을 구축하는 방법을 배울 수 있습니다. 별도의 스타일이 필요하지 않습니다.CSS 프레임워크를 사용하는 것은 짧은 시간 내에 완전한 응답을 위한 간단한 레이아웃을 만드는 좋은 방법입니다.
Bootstrap은 대량의 기존 구성 요소와 flexbox 기반의 격자를 가지고 있어 편리한 도구입니다.초보자는 더 높은 일을 빨리 완성할 수 있지만, 프로젝트마다 CSS 기반을 재사용할 수 있는 기초를 구축하는 데 오랜 시간을 들이고 싶지 않은 고급 개발자에게도 마찬가지다.
이 강좌가 Bootstrap을 사용하여 프로젝트를 만드는 데 매우 유용하다는 것을 발견할 수 있기를 바랍니다.더 높은 레이아웃을 만드는 방법을 배우고 싶다면, Duomly의 최신 과정 Build E-commerce with Bootstrap 에 가입하세요.
읽어주셔서 감사합니다.
둘리의 안나.
Reference
이 문제에 관하여(어떻게 5분 안에 부트를 사용하여 간단한 대시보드를 만듭니까?[비디오 추가]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/duomly/how-to-create-a-simple-dashboard-using-bootstrap-in-5-minutes-plus-video-680텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
