부트스트랩이란 무엇입니까? BootStrap의 구조와 구성 소개
- 不言앞으로
- 2018-10-13 15:51:163315검색
이 기사에서는 BootStrap이 무엇인지 설명합니다. BootStrap은 무엇으로 구성되어 있나요? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1. 소개
Bootstrap은 HTML, CSS 및 JAVASCRIPT를 기반으로 하는 프런트 엔드 프레임워크로, CSS 스타일 세트와 해당 jquery 코드가 미리 정의되어 있습니다. 가장 큰 특징은 반응형 레이아웃을 사용한다는 것입니다(여러 터미널과 호환 가능). Media Query(css3 Media Query)를 채택했기 때문입니다. (관련 무료 영상 추천: bootstrap tutorial)
II. BootStrap 구성
1.12 그리드 시스템: 화면을 12개의 열로 나누고 행을 사용하여 요소를 구성한 후 배치합니다. content in 열 내
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
2. 기본 레이아웃 구성 요소: bootstrap
에서 제공하는 다양한 기본 레이아웃 구성 요소 (1)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
소개 (2) 기본 스타일 테이블(tr은 행, td는 행의 열) , th는 제목 열이며 td)
<table class="table"> <th scope="row">1</th>
(3) Bordered table
<table class="table-bordered">
(4) Form
<form> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div>
(5) Button
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-primary">Transfer cash</button>
3.jquery: Bootstrap의 모든 JavaScript 플러그인은 종속됩니다. Jquery에서(jquery 라이브러리 소개 참고)
4.css 구성 요소: bootstrap은 우리를 위해 많은 CSS 구성 요소를 미리 구현했습니다.
5.javascript 플러그인: bootstrap은 일부 js 플러그인을 제공합니다
6 반응형 디자인: 호환 가능 여러 터미널
위 내용은 부트스트랩이란 무엇입니까? BootStrap의 구조와 구성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!