Contoh Bootstrap Terbaik

Bootstrap adalah rangka depan yang popular untuk pembangunan web. Ia mengandungi komponen pra-binaan dan elemen reka bentuk untuk menggayakan kandungan HTML. Penyemak imbas moden seperti Chrome, Firefox, Opera, Safari, dan Internet Explorer menyokong Bootstrap.

Bootstrap merangkumi sistem grid responsif untuk susun atur yang berbeza-beza. Ini adalah titik permulaan yang baik untuk membina laman web mesra mudah alih. Ini juga termasuk fungsi JavaScript pilihan, seperti konten yang dapat dilipat, karusel, dan modal.

Mengapa Menggunakan Bootstrap?

Bootstrap menyediakan penyelesaian mudah untuk reka bentuk dan responsif. Ini dipenuhi dengan elemen indah yang dapat digayakan lebih lanjut dengan CSS tersuai anda sendiri, serta sistem grid penuh untuk memastikan laman web anda responsif di semua skrin sambil menggunakan sintaks yang bersih dan mudah difahami. Anda boleh membina laman web yang kelihatan profesional tanpa CSS atau JavaScript dan menyesuaikan elemen dengan mudah jika diperlukan

Sejarah Versi

Twitter pada mulanya mengembangkan kerangka Bootstrap sebagai alat dalaman. Mereka mengeluarkannya sebagai projek sumber terbuka pada bulan Ogos 2011.

Bootstrap 2 dilancarkan pada Januari 2012. Salah satu ciri utama adalah pengenalan sistem grid responsif 12 lajur. Bootstrap 3 muncul pada bulan Ogos 2013, beralih ke reka bentuk rata dan pendekatan pertama yang mudah alih. Bootstrap 4 tersedia dalam versi beta mulai Ogos 2017, dan kini merangkumi Sass dan Flexbox.

Bootstrap 4 sedang dikembangkan selama dua tahun sebelum mengeluarkan beberapa versi beta pada tahun 2017, sementara pelepasan stabil pertama dikeluarkan pada bulan Januari 2018. Beberapa perubahan yang ketara termasuk:

Berpindah dari Kurang ke Sass;
Pindah ke Flexbox dan sistem grid yang diperbaiki;
Menambah kad (menggantikan sumur, gambar kecil, dan panel);
Dan banyak lagi!

Pada masa penulisan, keluaran terbaru Bootstrap adalah 4.1.3. Sekiranya anda ingin mengikuti berita pengumuman, ikuti mereka di sini.

Ciri Boostrap

Bootstrap 3 menyokong versi terbaru Google Chrome, Firefox, Internet Explorer, Opera dan Safari (kecuali pada Windows). Ia juga menyokong kembali ke IE8 dan Firefox Extended Support Release (ESR) terbaru. [12]
Sejak 2.0, Bootstrap menyokong reka bentuk web responsif. Ini bermaksud susun atur halaman web disesuaikan secara dinamis, dengan mempertimbangkan ciri-ciri peranti yang sedang digunakan (desktop, tablet, telefon bimbit).
Bermula dengan versi 3.0, Bootstrap menggunakan falsafah reka bentuk pertama yang mudah alih, menekankan reka bentuk responsif secara lalai.
Versi 4.0 menambah sokongan Sass dan flexbox.
Versi 4.1 Menambah kawalan bentuk julat khas baru.
Bootstrap tidak membataskan anda ke format CSS yang tetap tetapi membolehkan anda mengembangkan dengan cepat membenarkan gaya menimpa menggunakan lata untuk menambah / mengedit gaya lalai.

Bermula

Bootstrap adalah kerangka sumber terbuka dan bebas yang dikembangkan oleh Twitter yang menyediakan pelbagai templat untuk digunakan dengan pengembangan web front-end. Menggunakan Bootstrap memudahkan untuk merancang laman web yang responsif sepenuhnya dan merupakan rangka kerja yang patut dipelajari.

Bagaimana saya menambah Bootstrap ke halaman saya?

Menambah bootstrap ke halaman anda adalah proses yang pantas, cukup tambahkan yang berikut ke tag dalam kod anda.

Catatan: Ini hanya contoh dan boleh berubah tanpa notis. Sila rujuk CDN untuk pautan semasa untuk disertakan dalam projek anda.

Beberapa komponen Bootstrap memerlukan fail JavaScript yang lain, lihat dokumentasi Bootstrap di sini untuk mencari fail skrip terkini.

Anda juga perlu menambahkan yang berikut antara bodytag dalam kod anda. Dengan bootstrap, anda akan menggunakan tag ketika menggunakan banyak ciri Bootstrap, e

Congratulations!Bootstrap is now working on this page

Tahniah!

Bootstrap kini berfungsi di halaman ini

Memasang Bootstrap dengan Pengurus Pakej

Pengurus pakej yang popular ialah NPM atau Pengurus Pakej Node. Anda perlu memasang Node.js, yang merangkumi Pengurus Pakej Node. Lawati Node.js dan muat turun fail yang diperlukan berdasarkan OS anda, dan kemudian pasangnya.

Setelah dipasang dan disiapkan, buka baris arahan atau konsol, dan ketik yang berikut di folder projek yang anda mahu gunakan Bootstrap. Pada masa penulisan ini akan memasang Bootstrap versi 4.0.0

npm install [email protected] --save

Setelah NPM selesai memuat turun dan memasang Bootstrap 4, akan ada folder baru yang disebut node_modulesdalam folder projek anda jika belum ada.

/bootstrap yang mengandungi versi CSS dan Sass dari fail kami.
/jquery yang digunakan oleh Bootstrap dalam pelbagai komponen.
/tether yang merupakan perpustakaan untuk penentuan kedudukan elemen.

Sistem Grid

In a nutshell, the Bootstrap grid system helps you create responsive layouts, and it is comprised of a system of rows and columns that helps you structure your content.

Rows are horizontal groups of columns, and each page has a maximum of 12 columns per row. Within each row, the content is placed inside the columns and it can span anywhere between 1 to 12 columns.

Bootstrap has five different types of grid tiers: Extra small, Small, Medium, Large and Extra large. There is a breakpoint defined for each of these grid tiers. Bootstrap uses pixels to define the grid tier breakpoints.

Container

The container is the outer most element that contains your grid. Use container for a fixed-width container in the middle of the screen (add an extra margin on larger screens) or container-fluid for full width.

Row

Use row to group your columns. This will keep everything lined up properly and help you structure your grid.

Columns

Column classes indicate the number of columns you’d like to use out of the possible 12 per row. For example col-sm-6 would mean your columns use up half the width of the row on a small screen, and col-lg-4would use up a third on a large screen.

Here is how you would define a class prefix to use up one column width on the various screen sizes:

Extra Smallcol-1
Smallcol-sm-1
Mediumcol-md-1
Largecol-lg-1
Extra Largecol-xl-1

Example

A full width grid that has four columns, each taking up a full row on xs screens, half a row on sm and md screens, and a quarter of the width of the row on screens that are large and above:

 First Column Second Column Third Column Forth Column

Note that col-md and col-xl are not defined, where a size is not defined, it will default down to the next smaller size that has been specified.

Bootstrap provides a ready-made 12 column grid system for use in layouts. Consider the following code.

 Content Content

where:

- col = column - md = screen size - 6 = column width

As a 12 column grid system, all user defined grid column widths must add up to 12.

Screen size values can be assigned as follows:

xs - < 768px Phones
sm - < 992px Tablets
md - < 1200px Laptops
lg - > 1200px Desktops

The following code and image shows what is possible using different column widths.

 Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content

Buttons

The Bootstrap framework provides you with various styling options for buttons. These styles help you provide a visual representation to the user of what the button may do.

How To Use

To use bootstrap buttons you need to follow the same steps that you would to create a button in HTML, except that you also apply the applicable CSS class to the button. A code example has been provided below.

Code Example:

Primary

You can also use bootstrap buttons with the and elements as shown in the examples below. As per the Bootstrap documentation,

When using button classes on elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button"to appropriately convey their purpose to assistive technologies such as screen readers.

This button is a link

Button Class List

This is a list of the CSS classes that bootstrap provides for buttons. They give the background color to the buttons.

.btn This is bootstrap's basic button. It is a prerequisite if you want other bootstrap buttons to work properly.

Basic

.btn-primary Bootstrap's primary button. Default color displays #007bff.

Primary

.btn-secondary Bootstrap's secondary button. Default color displays #6c757d.

Secondary

.btn-success Bootstrap's success button. Default color displays #28a745.

Success

.btn-info Bootstrap's info button. Default color displays #17a2b8.

Info

.btn-warning Bootstrap's warning button. Default color displays #ffc107.

Warning

.btn-danger Bootstrap's danger button. Default color displays #dc3545.

Danger

.btn-link Bootstrap's link button.

Link

.btn-light Bootstrap's light button.

Light

.btn-dark Bootstrap's dark button.

Dark

.btn-dark This is bootstrap's dark button.

.btn-secondary This is bootstrap's secondary button.

Button Sizes

This is a list of the CSS classes for different size of the buttons.

.btn-lg Bootstrap's large button.

Large

.btn-md This is bootstrap's medium button.

Medium

.btn-sm Bootstrap's small button.

Small

.btn-md This is bootstrap's medium button.

.btn-xs This is bootstrap's extra small button.

Extra Small

.btn-block This is bootstrap's full width button.

Disabled Button State

This is used to show that the button is disabled by fading the button. This can be achieved through adding "disabled" to the tag.

.btn-block This is bootstrap's block level button. They actually span the entire width of their parent element. For example, a form element with a width of 200px, that means the btn-block button would have a width of 200px.

Outlined Buttons

It is possible to also have outlined buttons rather than fully colored buttons. This is achieved by placing the mid fix outline between the button class you want. A sample usage would be as follows:

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Outlined buttons are a part of Bootstrap since version 4 - please be sure that you are using the right version if you are unable to get them to work.

Inline Buttons

You can create inline button row by adding .d-inline-block class to the element which sets the display of the button to inline block. For example :

Grouping of Buttons

It is possible to group more than one button for certain uses like pagination. Grouping buttons can be done by making a parent div for all buttons you want to group, using the .btn-group class on this div:

 Left Middle Right

Dropdowns

Bootstrap provides Dropdowns as a plugin for displaying lists of links. A dropdown is a button which toggles displaying a list of links.

Bootstrap’s dropdowns are designed to be generic and applicable to a variety of situations. For instance, it is possible to create dropdowns that contain search fields or login forms.

 Dropdown example Action Another action Something else here

The .dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown attribute.

The .caret class creates a caret arrow icon (▼), which indicates that the button is a dropdown.

Add the .dropdown-menu class to a unordered list element to actually build the dropdown menu.

Navigation Bar

The Bootstrap framework provides you with a feature called navigation bars. In short, a navigation bar (also referred to as a navbar) is a header at the top of the page to display navigational information.

How To Use

To use Bootstrap Navigation Bars you add a element to the top inside the element of your webpage. There are various styles you can add to customize the display of your navbars.

This is the code needed to make a basic navbar:

 Site Name 
    
     Home
     Page 1
     Page 2
     Page 3

Navbar Styles

Bootstrap provides a set of classes in the Bootstrap framework to style your navbars. These classes are as followed:

navbar navbar-default This is the default style for your navbars.
navbar navbar-inverse This is similar to the default style except the colors are inverted.

Adding drop-down menus to the navbar

You can include a drop-down menu inside a navbar. This feature requires you to include Bootstrap's javascript file for it to work.

 Drop down 
     
      Item 1
      Item 2
      Item 3

Adding buttons to the navbar

You can add buttons on the navbar. The existing Bootstrap Button classes work however you'll need to include the class navbar-btn to the end of the class list.

Button

Adding brand logo or name to the navbar

The navbar-brand class can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

  Navbar

  Navbar

Adding forms to the navbar

You can also add forms to the navbar. This could be used for tasks such as a search field, quick login field, etc.

 Search

Aligning elements to the right on the navbar

In some cases you might want to align elements in a navbar to the right (for example a login or sign-up button.). To do this you'll need to use the navbar-right class.

 Site Name 
    
     Home
     Page 1
     Page 2
     Page 3
    
    
     Action Link #1
     Action Link #2

Displaying the navbar independent of scrolling

In some cases you might want to keep the navbar at the top or bottom of the screen regardless of scrolling. You will need to add either the navbar-fixed-top or navbar-fixed-bottom class to the element.

 Site Name 
    
     Home
     Page 1
     Page 2
     Page 3

Collapsing the navbar

On a small screen (such as a phone or tablet) the navbar is going to take up too much space. Luckily the option to collase the navbar exists. You can accomplish this using the following example.

 Site Name 
    
     Home
     Page 1
     Page 2
     Page 3

Jumbotron

Jumbotron is Lightweight, flexible component for showcasing hero unit style content. Jumbotron is a responsive component which the main goal is to focus visitor's attention or highlight the special piece of information.

Jumbotron make use of almost any other bootstrap code to additionally increase its engagement value. It's operate with images,enlarged fonts,different backgorund styles etc.

Most Attracting features of jumbotron

Showcase the marketing messages on your site
Project presentation
Article introduction
Image showcase

How to use

Use a element with class .jumbotron to create a jumbotron:

Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
 Learn more

Fluid jumbotron

To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add a .container or .container-fluid within.

Fluid jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent.

Forms

Bootstrap framework provides a form feature which you can use to create beautiful HTML forms easily. Using the Bootstrap form gives each individual form element a unified global style. Bootstrap form adds the right spacing and look to each element.

Each Bootstrap form element should have a class form-control. This class is how Bootstrap knows which elements to style. All textual elements like input, textarea and select that have the form-control class will have 100% width by default.

There are two types of Bootstrap forms, which are:

Inline form - creates the form on a single line. Useful for login forms in a nav bar
Horizontal form - creates a form with each element in a different row

Example of a basic form

 Email address Password File input  Example block-level help text here.
 Check me out Submit

Example of an inline form

 Name Email Send invitation

Example of horizontal form

 Email Password Remember me Sign in

Form Inputs

Bootstrap supports the following form controls:

input
textarea
checkbox
radio
select
range

1. Input

Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

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

The following example contains two input elements; one of type text and one of type password:

 Name: Password:

2. Textarea

The following example contains a textarea:

 Comment:

3. Checkboxes

Checkboxes are used if you want the user to select any number of options from a list of preset options.

The following example contains three checkboxes. The last option is disabled:

 Option 1 Option 2 Option 3

Use the .checkbox-inline class if you want the checkboxes to appear on the same line:

Option 1 Option 2 Option 3

4. Radio Buttons

Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

The following example contains three radio buttons. The last option is disabled:

 Option 1 Option 2 Option 3

Use the .radio-inline class if you want the checkboxes to appear on the same line:

Option 1 Option 2 Option 3

5. Select (List)

Select lists are used if you want to allow the user to pick from multiple options.

The following example contains a dropdown list (select list):

 Select list:  1 2 3 4

6. Range

Select lists are used if you want to allow the user to pick from multiple options.

The following example contains a dropdown list (select list):

 Example Range input

How to make Bootstrap Inputs Accessible

Input fields should have labels or some other form of identifier such as WAI-ARIA tags to meet the Web Content Accessibility Guidelines or WCAG for short. In order for screen readers to accurately convey to a user what labels are associated with which inputs the labels should reference the corresponding input.

Ini dapat dilakukan dengan memanfaatkan forparameter dalam HTML:

Enter Email

forAtribut label selalu merujuk medan input dengan IDnya . Ini memberitahu pembaca skrin bahawa label ini pasti untuk medan input ini yang akan mengurangkan kekeliruan bagi mana-mana pengguna yang menggunakan pembaca skrin untuk mengunjungi laman web. Dalam contoh di atas, jika pengguna mengklik pada kata sebenarnya "Masukkan e-mel", pengguna akan dapat menaip. Sekiranya atribut 'untuk' tidak dilampirkan pada label, maka jika pengguna mengklik kata-kata 'Masukkan e-mel', tidak akan terjadi. Pengguna perlu mengklik pada medan input e-mel yang sebenarnya untuk dapat menaip.

Jadual

Jadual Asas

Untuk mencapai contoh gaya asas tambahkan kelas asas .tableke mana-mana

unsur.

...

Ketua Meja

Anda boleh menentukan bahagian tajuk berasingan dalam struktur jadual anda. Ini adalah contoh

#	First	Last	Handle
1	Bob	Robo	@bro

Meja Bergaris

Untuk mencapai kesan baris bergaris (zebra-striping) dalam jadual gunakan .table-stripedselain .tablepada mana-mana

:nth-child

unsur. Jadual bergaris digayakan melalui pemilih CSS, yang tidak terdapat di Internet Explorer 8.

...

Jadual Bersempadan

Untuk mencapai penggunaan meja bersempadan .table-borderedsebagai tambahan .tablepada mana-mana

unsur.

...

Jadual Hover

Untuk mencapai kesan baris hover pada meja, gunakan .table-hoversebagai tambahan .tablepada mana-mana

unsur.

...

Jadual Pekat

Untuk mencapai penggunaan meja yang padat .table-condensedsebagai tambahan .tablepada mana-mana

unsur.

...

Jadual responsif

In order to achieve the responsive table by wrapping any .table table in a .table-responsiveelement.

Developers are able to change the style of each individual row and/or cell by using contextual classes.

.active - Applies the hover color to a particular row or cell
.success - Indicates a successful or positive action
.info - Indicates a neutral informative change or action
.warning - Indicates a warning that might need attention
.danger - Indicates a dangerous or potentially negative action