English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
이 튜토리얼에서는 Bootstrap를 사용하는 방법을 배울 것입니다 3 컴파일된 버전을 사용하여 기본적인 Bootstrap 템플릿을 생성합니다.
여기서 Bootstrap를 사용하여 웹 페이지를 만드는 것이 얼마나 쉬운지 알게 됩니다. 시작하기 전에 코드 편집기와 HTML 및 CSS의 사용 지식을 갖추어야 합니다.
만약 웹 개발을刚开始하셨다면,여기서 HTML 기본 지식을 배우기 시작하세요»
그럼 바로 시작해 보겠습니다.
다운로드할 수 있는 두 가지 버전이 있습니다컴파일된 Bootstrap그리고Bootstrap 소스파일을여기서 Bootstrap 파일을 다운로드하세요
CSS와 JavaScript 파일의 컴파일 및 축소된 버전, 그리고 아이콘의 글꼴 형식을 포함한 다운로드를 통해 더 빠르고 쉽게 웹 개발을 할 수 있으며, 원본 코드는 모든 CSS와 JavaScript의 원본 소스 파일 및 문서의 로컬 복사본을 포함합니다.
좋은 이해를 위해 우리는 컴파일된 Bootstrap 파일에 중점을 둡니다. 이렇게 하면 귀하의 시간을 절약할 수 있으며, 각각의 기능을 위해 매번 파일을 관리할 필요가 없습니다. 웹사이트를 생산 환경으로 이동하기로 결정하면 HTTP 요청과 다운로드 크기가 작기 때문에, 파일을 컴파일하고 압축할 수 있어 웹사이트의 성능을 향상시키고 귀중한 네트워크 밴드를 절약할 수 있습니다.
컴파일된 Bootstrap를 다운로드한 후 압축 파일을 압축을 푸고 구조를 확인하세요. 다음과 같은 파일 구조와 내용을 찾을 수 있습니다.
bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
많이 보고 있듯이, Bootstrap의 컴파일된 버전은 컴파일된 CSS와 JS 파일(bootstrap.*），이며 컴파일된 및 압축된 CSS와 JS(bootstrap.min.*）。
폰트 파일 glyphicons-halflings-regular.*가지된 네 개의 폰트 파일()이 있습니다. 이 폰트 파일은 Glyphicon Halflings 집합에 포함된250개 이상의 아이콘.
안내:이것은 Bootstrap의 가장 기본적인 형태로, 어떤 웹 프로젝트에서도 빠르게 사용할 수 있습니다. Bootstrap의 JavaScript 플러그인은 jQuery를 포함해야 합니다. 여기서https://jquery.com/download/최신 버전의 jQuery 폼을 다운로드하세요.
지금까지 Bootstrap 파일의 구조와 용도를 배웠습니다. 이제 Bootstrap를 실제로 사용할 때가 되었습니다. 이 장에서는 파일 구조에서 언급한 모든 내용을 포함한 기본적인 Bootstrap 템플릿을 만들어 보겠습니다.
이 튜토리얼을 통해 단계별로 다음 작업을 완료해 보겠습니다. 튜토리얼의 마지막에, 웹 브라우저에서 'Hello world' 메시지를 표시하는 HTML 파일을 만들 수 있습니다.
좋아하는 코드 편집기를 엽니다. 새로운 HTML 파일을 만들어서, 공백 창에서 다음 코드를 입력한 후 데스크톱에 'basic.html'로 저장합니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>기본 HTML File</title> </head> <body> <h1>Hello, world!</h1> </body> </html>테스트를 보세요‹/›
안내:다시 말해, 문서 부분에 <meta> 태그를<head> 부분에 포함하여 터치 줌을 활성화하고 모바일 장치에서 올바르게 표시되도록 합니다. 또한 X-UA-Compatible edge 모드를 가진 meta 태그가 포함되어 있어 인터넷 익스플로러가 가장 높은 모드로 웹 페이지를 표시합니다.
이 HTML 파일을 Bootstrap 템플릿으로 설정하려면 해당 Bootstrap CSS와 JS 파일을 추가하면 됩니다. JavaScript 파일을 페이지 하단에 추가해야 합니다-를 닫기 전에표지(즉) 이전에 포함하여 웹 페이지의 성능을 개선할 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic Bootstrap Template</title> <link rel="stylesheet" type="text/css" href="/static/style/bootstrap.min.css"> !-- Optional Bootstrap theme --> <link rel="stylesheet" href="/static/style/bootstrap-theme.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="/static/script/jquery-1.11.3.min.js"></script> <script src="/static/script/bootstrap.min.js"></script> </body> </html>테스트를 보세요‹/›
모두 준비되었습니다!Bootstrap의 CSS와 JS 파일 및 필요한 jQuery 라이브러리를 추가한 후, Bootstrap 프레임워크를 사용하여 어떤 사이트나 애플리케이션도 개발할 수 시작합니다.
이제 파일을 'bootstrap'으로 저장하세요-template.html”。
주의:.html 확장명을 지정하는 것은 중요합니다-일부 텍스트 편집기(예: 노트 pad)는 자동으로 .txt 확장명을 저장합니다.
파일을 브라우저에서 엽니다. 파일로 이동한 후 파일을 더블 클릭합니다. 기본 웹 브라우저에서 열립니다. (없다면 브라우저를 열고 파일을 그 안에 드래그 앤 드롭하세요.)
자신이 다운로드하고 저장하지 않고도 CDN(CDN - Content Delivery Network)에서 제공하는 링크를 사용하여 Bootstrap의 CSS와 JavaScript 파일 및 jQuery 라이브러리 JavaScript 파일을 문서에 포함할 수 있습니다.
CDN은 전 세계에 분포된 여러 서버에 Bootstrap 파일을 저장하여 로드 시간을 줄여 성능 이점을 제공합니다. 사용자가 파일을 요청할 때 가장 가까운 서버에서 파일을 제공합니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> !-- Optional Bootstrap theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>테스트를 보세요‹/›
자원 완전성(SRI)을 구현하기 위해 Bootstrap
CDN에 완전성과 crossorigin 속성이 추가되었습니다. 이는 보안 기능으로, 웹사이트에서 얻은 파일(프롤로이드 CDN 또는 다른 위치에서)이 예상치 못한 작업 없이 전달되도록 하여, 손상된 CDN에서의 공격 위험을 줄입니다. 그 작동 방식은 얻은 파일이 일치하는 해시를 제공해야 한다는 것을 허용하는 것입니다.
속성 integrity와 crossorigin가 프롤로이드 CDN 구현에 추가되었습니다자원 완전성(SRI). 이는 파일이 CDN 또는 다른 곳에서 웹 사이트를 통해 전달될 때 예상치 못한 처리 없이 안전하게 사용할 수 있도록 보장하는 보안 기능입니다. 파일을 읽을 때 필요한 암호화 해시를 제공하여 작동합니다.
안내:如果你的站点的访问者在访问其他站点时已经从同一CDN에서 Bootstrap 파일을 다운로드한 경우, 브라우저 캐시에서 로드되며 재다운로드가 필요 없어 로드 시간을 단축할 수 있습니다.