부트스트랩 사이트를 20분 만에 구축한다는 기사를 봤는데 내용이 좀 낡았네요. Bootstrap3을 재사용해서 관련 내용을 최대한 자세히 설명했습니다.
1. 기본 페이지 만들기
먼저 기본 HTML 템플릿 페이지를 만듭니다. 이 페이지는 sublime + emmet을 사용하여 직접 만들 수 있습니다.
1.1 새 파일 만들기, Ctrl + N
1.2 페이지 파일에 저장, Ctrl + S, 이름을 index.html
1.3 이 빈 페이지에, html:5를 입력한 다음 Tab 키를 직접 누르면 기본 HTML5 템플릿 페이지가 표시됩니다.
1.4 다시 저장하고 Ctrl + S를 누릅니다.
페이지 내용은 다음과 같아야 합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2. Bootstrap 파일 참조 추가
index.html 파일이 있는 폴더에 css 폴더를 생성하여 모든 스타일 파일을 저장하고, css 하위 폴더에 bootstrap이라는 폴더를 생성하여 bootstrap 파일을 저장합니다.
부트스트랩 공식 웹사이트에서 부트스트랩 패키지를 다운로드할 수 있습니다. 이 웹사이트에는 CSS, Font, js라는 세 개의 하위 폴더가 포함된 dist 폴더가 있습니다. 이 세 개의 하위 폴더를 css/bootstrap 폴더에 복사하세요.
페이지와 관련된 콘텐츠는 스타일과 스크립트의 두 부분으로 구성됩니다.
2.1 스타일 참조 추가
헤더에 부트스트랩 스타일 참조를 추가합니다. 경로에주의하십시오.
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
bootstrap.min.css는 모든 부트스트랩 스타일 정의를 포함하는 부트스트랩의 스타일 파일이고 bootstrap-theme.min.css는 테마 정의입니다.
2.2 스크립트 참조 추가
부트스트랩은 jQuery 스크립트를 사용하므로 jquery 스크립트 라이브러리도 다운로드해야 합니다.
index.html 파일이 있는 디렉터리에 lib라는 하위 디렉터리를 만들어 나중에 사용할 수 있도록 스크립트 라이브러리를 저장하고 다운로드한 jquery.min.js를 이 디렉터리에 복사합니다.
<script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script> </body>
3. 부트스트랩 컨테이너 추가
bootstrap의 .container 클래스는 매우 유용합니다. 페이지에 중앙 영역을 만들 수 있습니다. 다른 위치의 콘텐츠를 여기에 넣습니다. 컨테이너 클래스는 정적 너비와 magin 값이 auto인 중앙 p 상자를 만드는 것과 동일합니다. 트위터 부트스트랩 컨테이너 클래스의 장점은 반응성이 뛰어나며 현재 화면의 너비를 기준으로 최적의 너비를 계산하여 사용한다는 것입니다.
.container-fluid는 전체 너비를 사용하는 전체 너비 컨테이너입니다.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}body 태그에서 컨테이너 클래스를 사용하여 p를 생성합니다.
이제 페이지에 제목을 추가할 수도 있습니다.
Twitter Bootstrap Tutorial - A responsive layout tutorial <script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script> </body>
로그인 후 복사아직 브라우저에서는 많은 콘텐츠를 볼 수 없지만, 후속 작업을 위한 기반은 마련되었습니다.
4. 제목 및 탐색
이제 페이지에 표시되는 콘텐츠를 추가할 수 있습니다.4.1 제목
제목을 추가하는 방법은 매우 간단합니다. h1 요소만 추가하면 됩니다.<p class="container"> <h1>Twitter bootstrap tutorial</h1> </p>로그인 후 복사페이지를 새로 고치면 눈길을 끄는 제목이 표시됩니다. 다음으로 내비게이션을 살펴보겠습니다.
4.2 내비게이션
내비게이션은 nav 요소를 사용하여 생성할 수 있으며, 부트스트랩에서는 내비게이션 바를 navbar라고 합니다. 컨테이너.<p class="container"> <h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> </nav> </p>로그인 후 복사navbar는 탐색 모음을 만드는 데 도움이 됩니다. 기본 배경색은 흰색입니다. navbar-inverse는 반전으로 설정되어 배경색은 검은색, 텍스트는 흰색이 됩니다. 더 눈길을 끈다. 이제 페이지를 새로 고치면 탐색 내용이 없는 검은색 탐색 표시줄이 표시됩니다.
다음과 같이 내비게이션 콘텐츠를 추가하세요
<p class="container"> <h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> <p class="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </p> </nav> </p>로그인 후 복사ul은 실제 내비게이션 콘텐츠인데, 여기서 .nav는 이것이 내비게이션 집합임을 나타내고, .navbar-nav는 이것이 사용된다는 것을 나타냅니다. navbar의 탐색. li는 실제 탐색 항목이며 .active를 사용하여 현재 활성 탐색을 설명할 수 있습니다.
.navbar-collapse에 주목하세요. 이는 뷰포트의 너비가 768px보다 작을 때 탐색이 수직이 된다는 것을 의미합니다.
768px 이상
768px 이하
4.3 샌드위치 메뉴
변경 사항 세로 탐색도 이와 같은 대중적인 스타일이 되기를 바랍니다.
한편으로는 뷰포트가 특정 너비보다 작을 때 특정 탐색이 표시되고 추가 내비게이션 콘텐츠가 추가됩니다.
<!-- Brand and toggle get grouped for better mobile display --> <p class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </p>로그인 후 복사사실 두 부분으로 구성되어 있는데, 버튼 부분이 많이 보이는데, 오른쪽에 샌드위치 버튼을 그리는 데 사용됩니다. 다음 요소는 왼쪽의 탐색입니다.
보통은 표시되지 않습니다.
然后，我们需要制定点击三明治按钮的时候，需要显示我们原来的导航。button 元素中，我们有一个 attribute ，data-target="#navbar-menu" ，就是用来完成这一步工作的，这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。
这样，我们的导航就是这样的了。
<h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> <!-- Brand and toggle get grouped for better mobile display --> <p class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </p> <p id="navbar-menu" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </p> </nav> </p>로그인 후 복사5. 内容和边栏
主要内容部分，我们使用 p 来进行布局。<p id="content" class="row-fluid"> <p class="col-md-9"> <h2>Main Content Section</h2> </p> <p class="col-md-3"> <h2>Sidebar</h2> </p> </p>로그인 후 복사这里使用了 bootstrap 的栅格布局，栅格系统利用了12列的布局，这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。
这张表格则给出了详细的说明。
现在页面看起来是这样的。
6. 侧边栏导航
在侧边栏中添加一些导航内容。这里就是普通的导航，使用 .nav 进行声明，.nav-tabs 和 .nav-stacked 是导航的外观。<p class="col-md-3"> <h2>Sidebar</h2> <ul class="nav nav-tabs nav-stacked"> <li><a href='#'>Another Link 1</a></li> <li><a href='#'>Another Link 2</a></li> <li><a href='#'>Another Link 3</a></li> </ul> </p>로그인 후 복사看看最终的效果，一个基于 bootstrap 的响应式布局页面就完成了。
相关文章：
使用Bootstrap过渡效果Transition模态框（Modal）的方法
JS组件Bootstrap Table表格行拖拽效果实现代码
본 웹사이트의 성명본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.저자별 최신 기사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
