https://github.com/sonhm3029/bootstrap-self-learning

Last synced: 3 months ago
JSON representation
Host: GitHub
URL: https://github.com/sonhm3029/bootstrap-self-learning
Owner: sonhm3029
Created: 2021-07-26T07:55:31.000Z (almost 4 years ago)
Default Branch: master
Last Pushed: 2021-08-04T12:20:17.000Z (almost 4 years ago)
Last Synced: 2025-01-17T01:25:31.555Z (5 months ago)
Language: HTML
Size: 115 KB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

        # Bootstrap-Self-Learning

learning bootstrap my self in w3school

## Important components that need to notice

- Buttons

- Collapse and dropdown

  - For build in collapse navbar of dropdown

- Colors

- Container

- Grid

- Jumbotron:

  - For the main image of header image

- list-group

- Navbar and nav:

  - For the header of page

- pagination:

  - For the navigation bars to next of previous page

- table

- form

- input

- carousel

===================================================

## About Collapse, Dropdown and their application

### 1. Drop down

- Đầu tiên bọc tất cả trong một `
` tag hoặc `` tag tùy trường hợp với `class="dropdown"` để khi click, **dropdown** sẽ hiện ra ở chỗ button đó

- Tiếp theo là phần button **dropdown**, nó có thể là một `` hoặc là `` với `class = "dropdown-toggler"` (để nó hiện ra biểu tượng drop down ở button đó) và `data-toggle = "dropdown"`...

- Cuối cùng là phần list **dropdown** sẽ hiện ra với `` và các `` bên trong...

**Ví dụ:**

```html

  

    

      

        Header 1

          Link 1

            

            Link 2

        

  

```

- The `dropdown-header` and `dropdown-divider` class use to add header and line in dropdown menu.

That's all.

======================================================

### 2. Collapse

- A basic collapse include of 2 part:

  - Thứ nhất là một `button` tag với `data-toggle="collapse"` và `data-targer=#idTarget"`. Trong đó idTarget là id của element muốn collapse

  - Thứ hai là element muốn collapse, ví dụ một `div` tag có `class="collapse"` và `id="idTarget"`.

- Default thì nội dung của element muốn collapse sẽ hide, thêm `class="show"` thì ban đầu nội dung sẽ đc **show**.

**Ví Dụ:**

```html

  


      Hide

        This is collapsible paragraph

  

```

**Note**: Đối với `` tag thì có thể thay `data-target` = `href`


=> Việc sử dụng **Collapse** thích hợp trong việc tạo **_responsive navbar_**, menu **_navbar_** sẽ tự động collapse khi web load trên device có screen nhỏ. Hoặc sử dụng với `` để tạo `accordion`.

======================================================

### 3.Navs

- Create `nav` include:

  - `` tag với `class="nav"` với `` và ``.

  - Có thể định dạng `nav` với `` và `active` class để highligh **nav-item** đang được chọn.

  - Có thể biến `nav` thành Toggleable/Dynamic Tabs.

**Ví dụ:**

```html



  

    Home

  

  

    Menu 1

  

  

    Menu 2

  





  ...

  ...

  ...



```

=====================================================

## 4. Navbar

Từ những **component** trên ta tạo được **navbar** dùng làm header của page:

```html

  


    L a>

    

      

    

    

      

        

          Link

        

        

          Link

        

        

          Link

          

            

            

            

          

        

      

    

  



```

======================================================

## 5. Pagination

- Được tạo bởi `
`, bên trong là `` và ``

- Căn lề **pagination** bằng `class=justify-content-/center/end`.

**Ví dụ:**

```html



  

    Page 1

  

  

    Page 2

  

  

    Page 3

  



```

======================================================

## 6. Color

- Bootstrap có các class thêm color cho chữ là:

```html

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light

```

- Màu background là:

```html

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

```

======================================================

## 7.Jumbotron

- Wrap content với `
` để specify content đặc biệt.

**Ví dụ**:

```html



  Bootstrap Tutorial

  Bootstrap is the most popular HTML, CSS...



```

```html



  

    Bootstrap Tutorial

    Bootstrap is the most popular HTML, CSS...

  



```

======================================================

## 8. Grid

The Bootstrap 4 grid system has five classes:

- `.col-` (extra small devices - screen width less than 576px)

- `.col-sm-` (small devices - screen width equal to or greater than 576px)

- `.col-md-` (medium devices - screen width equal to or greater than 768px)

- `.col-lg-` (large devices - screen width equal to or greater than 992px)

- `.col-xl-` (xlarge devices - screen width equal to or greater than 1200px)

The classes above can be combined to create more dynamic and flexible layouts.

Theo sau bởi các số `col-sm-12/2/3/4/6`... ví dụ với:

- 12: 100% width

- 6: 50% width

=> Sử dụng trong responsive design.

======================================================

## 9. Form

Bootstrap provide 2 types of form layouts

- Stacked (full-width) form

- inline form

Example for stacked form:

```html

  


    Email address:

    

  

  

    Password:

    

  

  

    

       Remember me

    

  

  Submit

```

**Giải thích**: đầu tiên chúng ta sẽ tạo một `form` tag là container với `action=..` cái này có lẽ ta học sau.

- Trong `form` tag sẽ gồm các `div` tag với `class="form-group"` để có margin nhìn ok hơn.

- Trong `div class="form-group"` bao gồm:

  - một `label` tag để tạo label cho input.

  - một `input` tag với `type="email"` để ô input có định dạng là email, khi người dùng nhập sai cú pháp email sẽ có thông báo hiện ra. `class="form-control"` để có đúng định dạng của **form**, `placeholder` để thể hiện chỉ dẫn ô input.

**Với inline form**:

- thêm `class="form-inline"` vào `form` tag. Tuy nhiên nó chỉ áp dụng vs min screen=576px, nếu nhỏ hơn thì --> sẽ chuyển thành stack.

### Form Validation

Dùng để tạo thông báo khi có gì đó sai hoặc thiếu trong form khi customer dùng form trc hoặc sau khi nhấn submit:

- `.was-validated` thêm vào `class` của `form` tag để hiện thông báo thiếu hay sai gì trc khi nhấn nút submit form. Kèm theo đó là 2 `div`:

  - `
Valid`

  - `Please fill out this field
`

trong `.form-group` để hiển thị thông báo.

**ví dụ**:

```html

  


    Username:

    

    Valid.

    Please fill out this field.

  

  

    Password:

    

    Valid.

    Please fill out this field.

  

  

    

       I agree on blabla.

      Valid.

      Check this checkbox to continue.

    

  

  Submit

```

**==>** Form dùng để tạo giao diện điền mật khẩu tài khoản......

======================================================

## 10.Input

Các form control mà bootstrap support bao gồm:

- input

- textarea

- checkbox

- radio

- select

Kèm theo đó là các kiểu input : `type=`  _**text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color**_.

Như ví dụ với form, ta dùng `type=email` và `type=password`

**Note:** Inputs will NOT be fully styled if their type is not properly declared!

**Ví dụ** với `textarea` để tạo comment box:

```html

    


      Comment:

      

    

    Submit

```

**Ví dụ** với `checkbox`:

```html



  

    Option 1

  





  

    Option 2

  





  

    Option 3

  



```

**Ví dụ** với `radio` check hình tròn:

```html



  

    Option 1

  





  

    Option 2

  





  

    Option 3

  



```

**Ví dụ** với `select` list:

```html



  Select list:

  

    1

    2

    3

    4

  



```

- Đây là just one selection

- Muốn dùng multiple seclection (giữ control và chọn) thì thay `class="form-control"` trong `select` tag thành `multiple class="form-control"`

**Ví dụ** với input `file` và `range`:

```html

    


      

    

    

      

    

    Submit

 

```

- Với type `range` là thanh kéo range input

- type `file` là input = mở tệp.

======================================================

## 11. Carousel

Create a slide show:

**Ví dụ**:

```html



  

  


    

    


    


  


  

  


    

      

    

    

      

    

    

      

    

  


  

  

    

  

  

    

  



```

**Giải thích:**

| Class|Description|

| ----------------------|:-----------------------------------------------------:|

|.carousel|Creates a carousel|

|.carousel-indicators|Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)|

|.carousel-inner|Adds slides to the carousel|

|.carousel-item|Specifies the content of each slide|

|.carousel-control-prev|Adds a left (previous) button to the carousel, which allows the user to go back between the slides|

|.carousel-control-next|Adds a right (next) button to the carousel, which allows the user to go forward between the slides|

|.carousel-control-prev-icon|Used together with .carousel-control-prev to create a "previous" button

|.carousel-control-next-icon|Used together with .carousel-control-next to create a "next" button

|.slide|Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect

Add elements inside `
` within each `` to create a caption for each slide:

**Ví dụ:**

```html



  

  

    Los Angeles

    We had such a great time in LA!

  



```

======================================================

## 12. Modal
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/sonhm3029/bootstrap-self-learning

Awesome Lists containing this project

README
