부트스트랩이란 무엇입니까? BootStrap의 구조와 구성 소개-JS 튜토리얼-php.cn

부트스트랩이란 무엇입니까? BootStrap의 구조와 구성 소개

不言

풀어 주다： 2018-10-13 16:08:12

앞으로

3348명이 탐색했습니다.

이 기사에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

부트스트랩이란 무엇입니까? BootStrap의 구조와 구성 소개