Bs Become Started

-

Bootstrap Get Started

What is Bootstrap?

  • Bootstrap is a costless front-end framework for faster together with easier spider web development
  • Bootstrap includes HTML together with CSS based pattern templates for typography, forms, buttons, tables, navigation, modals, picture carousels together with many other, equally good equally optional JavaScript plugins
  • Bootstrap also gives you lot the mightiness to easily exercise responsive designs
What is Responsive Web Design?

Responsive spider web pattern is almost creating spider web sites which automatically conform themselves to await skilful on all devices, from small-scale phones to large desktops.

Bootstrap History

Bootstrap was developed past times Mark Otto together with Jacob Thornton at Twitter, together with released equally an opened upwards beginning production inward August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 projection on GitHub!

Why Use Bootstrap?

Advantages of Bootstrap:
  • Easy to use: Anybody amongst only basic noesis of HTML together with CSS tin start using Bootstrap
  • Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, together with desktops
  • Mobile-first approach: In Bootstrap 3, mobile-first styles are business office of the heart together with individual framework
  • Browser compatibility: Bootstrap is compatible amongst all modern browsers (Chrome, Firefox, Internet Explorer, Safari, together with Opera)

Where to Get Bootstrap?

There are 2 ways to start using Bootstrap on your ain spider web site.
You can:
  • Download Bootstrap from getbootstrap.com
  • Include Bootstrap from a CDN

Downloading Bootstrap

If you lot desire to download together with host Bootstrap yourself, larn to getbootstrap.com, together with follow the instructions there.

Bootstrap CDN

If you lot don't desire to download together with host Bootstrap yourself, you lot tin include it from a CDN (Content Delivery Network).
MaxCDN provides CDN back upwards for Bootstrap's CSS together with JavaScript. You must also include jQuery:

MaxCDN:

<!-- Latest compiled together with minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
One payoff of using the Bootstrap CDN:
Many users already convey downloaded Bootstrap from MaxCDN when visiting about other site. As a result, it volition endure loaded from cache when they see your site, which leads to faster loading time. Also, most CDN's volition brand certain that in ane trial a user requests a file from it, it volition endure served from the server closest to them, which also leads to faster loading time.
jQuery
Bootstrap uses jQuery for JavaScript plugins (like modals, tooltips, etc). However, if you lot only operate the CSS business office of Bootstrap, you lot don't scream for jQuery.

Create First Web Page With Bootstrap

1. Add the HTML5 doctype
Bootstrap uses HTML elements together with CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the start of the page, along amongst the lang attribute together with the right grapheme set:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>
2. Bootstrap three is mobile-first
Bootstrap three is designed to endure responsive to mobile devices. Mobile-first styles are business office of the heart together with individual framework.
To ensure proper rendering together with comport upon zooming, add together the next <meta> tag within the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width business office sets the width of the page to follow the screen-width of the device (which volition vary depending on the device).
The initial-scale=1 business office sets the initial zoom degree when the page is firstly loaded past times the browser.
3. Containers
Bootstrap also requires a containing chemical cistron to twine site contents.
There are 2 container classes to take away from:
  1. The .container cast provides a responsive fixed width container
  2. The .container-fluid cast provides a full width container, spanning the entire width of the viewport
.container
.container-fluid

Two Basic Bootstrap Pages

The next instance shows the code for a basic Bootstrap page (with a responsive fixed width container):

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is about text.</p>
</div>

</body>
</html>
The next instance shows the code for a basic Bootstrap page (with a amount width container):

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is about text.</p>
</div>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy...
Read more

Top Qualities To Look For In An IT Support Team

-
Regardless of how "state of the art" or "updated" your company's technical systems may be, they will at one time or another encounter glitches or breakdowns that will require immediate attention. A company that experiences such issues must have an IT support team that they can turn to in order to acquire fixes and upgrades. Otherwise, a company will experience substantial "down time" or may even lose clients. This could result in life-long issues for the company and could ultimately result in a loss of profit. The best solution to avoid such detrimental issues is to obtain the services of an IT support provider that can prevent such situations from arising. You will need to take advantage of IT support London services that realize that your company will grow over time, and know how to adapt and maintain your technical services to keep up and manage this growth. Additionally, you will only want to deal with an IT su...
Read more

How To Integrate Google Adwords Api Into Codeigniter?

-
Image
One blogger gave me reckon Just add together all the api documents to the third_party folder in addition to ask the library from your controller or library in addition to voilà! Figure: Google Adwords API Hierarchy After many hours of searching, reading in addition to testing I was successful to integrate AdWords API PHP Client Library into Codeigniter 2.X. Step yesteryear footstep conduct on how to integrate Google Adwords API into Codeigniter. Google Adwords API into Codeigniter # Steps Description 1. Download AdWords API PHP Client Library This customer library makes it easier to write PHP applications that programmatically access the AdWords API or DoubleClick Ad Exchange Buyer API. I accept downloaded version 4.5.1( adwords_api_php_4.5.1 ) 2. Extract the compressed archive (.zip or .tar.gz) in addition to glue the src folder within codeigniter's third_party folder. Grab solely src folder fr...
Read more