Bootstrap

نشر بتاريخ 2023-06-21 23:01:17

7كيلو بايت

How do I add Bootstrap to my page?

Adding bootstrap to your page is a fast process, just add the following to the <head> tags in your code.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Note: These are only examples and may change without notice. Please refer to a CDN for current links to include in your project.

Some Bootstrap components require other JavaScript files, check out the Bootstrap documentation here to find the latest scripting files.

You will also need to add the following between the body tags in your code. With bootstrap you'll be using <div> tags when using many of Bootstrap's features, e

<div class="alert alert-success" role="alert">
    <strong>Congratulations!</strong>
    <p>Bootstrap is now working on this page</p>
</div>

Congratulations!

Bootstrap is now working on this page

Installing Bootstrap with a Package Manager

A popular package manager is NPM or Node Package Manager. You will need to install Node.js, which includes the Node Package Manager. Visit Node.js and download the necessary files based on your OS, and then install them.

Once installed and setup, open up the command line or console, and type the following in the the project folder you wish to use Bootstrap with. At the time of writing this will install Bootstrap version 4.0.0

npm install bootstrap@4.0.0 --save

Once NPM has finished downloading and installing Bootstrap 4, there will be a new folder called node_modules within your project folder if it wasn't already there.

/bootstrap which contains the CSS and Sass version of our files.
/jquery which is used by Bootstrap in various components.
/tether which is a library for element positioning.

Grid System

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.

<div class="container"></div>

Row

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

<div class="row"></div>

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 Small col-1
Small col-sm-1
Medium col-md-1
Large col-lg-1
Extra Large col-xl-1

<div class="col-sm-1"></div>

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:

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-4">First Column</div>
    <div class="col-12 col-sm-6 col-lg-4">Second Column</div>
    <div class="col-12 col-sm-6 col-lg-4">Third Column</div>
    <div class="col-12 col-sm-6 col-lg-4">Forth Column</div>
  </div>
</div>

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.

   <div class="container">
	<div class="row">
		<div class="col-md-6">Content</div>
		<div class="col-md-6">Content</div>
	<div>
   </div>

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.

	<div class="container">
		<div class="row">
			<div class="example col-md-6">Content</div>
			<div class="example col-md-6">Content</div>
		<div>
	</div>

	<div class="container">
		<div class="row">
			<div class="example col-md-4">Content</div>
			<div class="example col-md-4">Content</div>
			<div class="example col-md-4">Content</div>
		<div>
	</div>

	<div class="container">
		<div class="row">
			<div class="example col-md-3">Content</div>
			<div class="example col-md-3">Content</div>
			<div class="example col-md-3">Content</div>
			<div class="example col-md-3">Content</div>
		<div>
	</div>

	<div class="container">
		<div class="row">
			<div class="example col-md-2">Content</div>
			<div class="example col-md-2">Content</div>
			<div class="example col-md-2">Content</div>
			<div class="example col-md-2">Content</div>
			<div class="example col-md-2">Content</div>
			<div class="example col-md-2">Content</div>
		<div>
	</div>

	<div class="container">
		<div class="row">
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
		</div>
	</div>

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.

الرجاء تسجيل الدخول , للأعجاب والمشاركة والتعليق على هذا!

Mobile Computing

11 useful applications and programs for an SMM specialist

In addition to creative thoughts and creative approaches, an SMM manager often needs only one...

بواسطة 2023-06-19 17:54:03 0 24كيلو بايت

Life Issues

American Beauty. (1999)

A sexually frustrated suburban father has a mid-life crisis after becoming infatuated with his...

بواسطة 2022-12-24 16:49:59 0 19كيلو بايت

Travel

ChatGPT Exploring the World Through Shopping: Where Commerce Meets Adventure

Shopping and travel are two experiences deeply intertwined with human culture. Both offer avenues...

بواسطة 2024-06-04 17:27:08 0 17كيلو بايت

Business

What Legal Mistakes Do Startup Founders Make?

Starting a business is a thrilling journey, but it comes with a fair share of challenges,...

بواسطة 2025-04-10 14:54:26 0 477

Business

Who is a COO?

1. Brief History of the COO Profession: The COO profession is relatively recent. At the...

بواسطة 2024-07-19 19:49:50 0 16كيلو بايت