Bootstrap Training in plain language (Part One)

If we want to introduce bootstrap in a short sentence, it is a framework that is used to develop the websites appearance (Front-End). Bootstrap was one of the Twitter’s projects and when working on a big project, the Twitter developers came to the conclusion that if they use a Unit Framework, the jobs and developing can be done faster and easier. In 2011, the first version of this framework was introduced to the world.

If you are a web designer, you are familiar with the Word “ Responsive”. For responsive design you must use the Media Query, but an easier and faster way is using the frameworks. Bootstrap Framework Helps you Design a Responsive Site with a Basic Familiarity of Html AND CSS.

To start, we need an editor. I use the “Sublime Text”, which you can get from this link.

You Can Also Use Other Editors, such as “Brackets” or “Aptana”, or etc.

So Why Should We Work Responsive And What Is a Responsive Design?

To put it in simple words, a Responsive Design Means That Your Web Design (including the elements position and their size) responds to the change in the browser size and reconciles itself. And therefore, the site That You see on Your Laptop Browser Is Different From the one on your Tablet Browser in terms of the position or the size of elements. For Example, if Your Site has a Section to Show 4 Images Side By Side In a Row (Width of Each Image Is 25% Of The Total Page) and You view This Section on a Mobile, You Can’t See Four Images Side By Side, because the width of the mobile screen is different from the laptop Screen, and the 4 Images don’t have a Proper Display Side By Side. Therefore, We Want To for example Put 2 Images Together Side by Side In mobile Mode.

Now that We Know How important it is for a site to be Responsive, let’s see in what ways we can design a Responsive site.

Also Read:   Reduce your exposure to toxins from grilled meats

There Are Two Ways To Design a Responsive Website:

1 : Using Media query

2 : Using Framework

Each of These Methods Have Their Advantages and Disadvantages. Correct And Accurate Use Of Media Query Is a little Hard and very Time Consuming. But you can implement any idea with Media Query.

Unlike Media Query, Implementing With Framework Is Very Easy And Reduces Time And Cost, and You Can Also Do It as a Team.

But if you don’t Have Creativity in Your Projects, they may end up having Similar Structures.

In Simple Terms, Framework provides us with Features That by using them, And In one Framework We Can Increase the Work Speed in Our Project And Have Fewer Bugs. Also, Framework Manufacturers are always developing And Adding New Features To it.

By new Features, we mean For Example You Add a Special And Pre-defined Class (by Framework) To a Tag Rather Than Writing Several CSS Code Lines.

There Are Many Existing Frameworks For Responsive Design. But the current Best And most Comprehensive Framework in my opinion is Bootstrap, because It Gives You a lot of Features.

Now We Must Install Bootstrap, so first You Must Go To the Bootstrap Web Site And Download the Latest Version of Bootstrap (From This Link).

First, Click On “Download Bootstrap” and wait for the bootstrap with zip extension to be downloaded. Now We Look at the Content of the Downloaded Zip File.

bootstrapfiles

CSS :

Bootstrap has an important file Called Bootstrap.css. In this File, all The Classes That Will Be Used In Bootstrap Are Defined.

To use Bootstrap Defined Classes, We Should Put This File in the Project.

Note That You Should Not Make Changes Within Booststrap CSS File and You Should Add Your Own Style In a Separate file. Like the image below:

bootstrapimage

In the CSS Folder, there is Another File Called Bootstrap.min.css, which is a Compressed and low-size Version of the Previous Css File, but with the same content.

Also Read:   3 Important Myths And Facts About Sleep

IF You Have Another Special Css File, You Must Call It After the main Css Bootstrap.

Maybe you tell yourself that The Size Of Bootstrap File Is Large, but from the Customize section of the Bootsrap Website, you Can Get Only Those Classes That You Need in the Form Of an exclusive and free file.

However, we don’t Know What Classes We Need To Use at the beginning of a project, so You Must Put the Original Bootstrap Css In Your Site.

JS :

Bootstrap has a Super Feature, Called Component. Components Provide To You Many Features With Several Lines Of Ready Code. For Example, You Don’t Need to Design A DropDown Menu And You Just Copy That Component Code To Your Html Code.

To do this, You Should Just Put Bootstrap.Js Into Your Project.

In Addition, Functions In Bootstrap.js or Bootstrap.min.js also Need To Use JQuery, thus You Should Add Jquery File Address To Your Site.

Fonts :

For Example, if You Assign A Span Tag To glyphicon And glyphicon-heart, Bootstrap Puts a Shape Of Heart In Your Tag Content with the Help of these Fonts.

Well, Now It’s Time To Run Bootstrap. First, Create A Folder Called With the name of your project and Copy All the Bootstrap Folders To this folder. Now Create Index.html File On Its Side.

Now You Must just Put That Files in Index.html:

-Bootstrap.min.css

-Your Css File For Example Your own Style.css

-Jquery.min.js

-Bootstrap.min.js

Well, Bootstrap is launched

Now For Bootstrap Test, Create <p> Tag Between <body> Tag, And Write A Text Within And Then Assign Text-Center Class To <p> Tag.

 

In the Next Session, I’ll Explain How To Arrange Columns In Bootstrap.

No votes yet.
Please wait...
Naser Olia

Naser Olia

Software Engineer, Programmer and web designer. I am passionate about healthy lifestyle, Science and knowledge in general and Personal development is one of the most important things to me.

Leave a Reply

1 Comment on "Bootstrap Training in plain language (Part One)"

avatar
Sort by:   newest | oldest | most voted
trackback
[…] In the previous tutorial, we got familiar with the responsive design and realized that we can design a responsive website with Bootstrap. Today we want to know about the “Grid System”, the most important concept in Bootstrap…. Stay with HardText. […] No votes yet. Please wait...
wpDiscuz
More in Computer Technical Issues, HardText +, Science and Technology
A comfortable sleep and a calm nerves with 4 miraculous herbs

1 : Lavender tea as a natural sedative Lavender is a sedative wild herb to treat types of headaches, insomnia

Close