Your interfaces will look professional and elegant, even if you are just begin to explore the possibilities of Bootstrap. Let’s look at the CodeLobster PHP IDE functionality that provides the programmer with quick integration of Bootstrap into project and convenient follow-up work with it.
Installing Bootstrap with CodeLobster IDE
Bootstrap gives great opportunities for professionals, as well as provides a quick start for beginners. The professional version of CodeLobster IDE has a special plugin that will help you deploy a new project on Bootstrap in just a few minutes.
First, launch the IDE, go to the main menu “Project” -> “Create Project” and create a regular project.
After that, run the Bootstrap installation wizard “Plugins” -> “Bootstrap” -> “Download Framework”.
You need to select a folder with the source files of your project and click the “FINISH” button, the development environment will automatically download the current version of the framework and unpack it into the designated directory.
In this tutorial we will use an empty basic HTML5 template, it will serve as a good starter point for those examples that you will soon learn.
Let’s create a new file “index.html” and in order to add a framework to our HTML template, we will connect several files to the created document:
- bootstrap.min.css – contains all the necessary CSS styles;
- jquery.min.js – well-known jQuery library, used for JS-scripts, it can also be downloaded and added to the project folder directly from the IDE;
In the end, “index.html” should contain the following code:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Using Bootstrap in CodeLobster IDE</title>
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.min.css">
<body style="padding: 20px;">
CSS classes in Bootstrap
Classes in Bootstrap have got tremendous power, there is a strict selector naming system and when writing styles almost every aspect of the display of elements is taken into account.
Using classes, you can conveniently align and position the components of the page, adapt the design for different screens using the mobile grid system, use predefined styles and colors for a background, element borders and a text, there are even classes for rounding corners.
Enter the following few lines in the editor, add a paragraph and a link to the “body” tag of our template:
<a class="btn btn-primary" href="#" role="button">
CodeLobster IDE perfectly understands the source code of the framework, offering autocomplete for all the possible classes.
To get a quick hint on the available classes, start typing the attribute value and press Ctrl + Space, then simply select the desired class from the drop-down list.
In this example, we turned a regular link into a button and applied two classes at once. The “btn” class defines common styles for all buttons, and such classes as, for example, “btn-primary”, “btn-success”, “btn-danger” and others, define colors.
In fact, there are a huge number of classes in Bootstrap, in order not to forget their purpose, and also to always know in which case you need a particular selector, use contextual dynamic help.
Depending on which code you are working with, the IDE automatically selects links to the relevant documentation.
Look at the “Dynamic Help” tab on the right panel of the program, in this case, just click on the link to go to the official documentation and get comprehensive information about the “btn-primary” class in Bootstrap.
Scripts in Bootstrap are represented by a set of jQuery plug-ins and have got an accessory purpose, since the main functionality is implemented in pure CSS.
Thus, productive CSS engines in modern browsers are used to the maximum, so the framework works very fast and does not overload the page.
For example, let’s create a collapsible element, all you need to do is to add the class “collapse” and the unique attribute “id” to the block tag.
<div class="collapse show" id="collapsible">
<div class="card card-body">
Content of collapsible element.
To this DIV-block we also added the class “show” so that the element is displayed in the expanded state by default.
Of course, we need to somehow control the visibility of the block, for this we will use the button we created earlier.
<a class="btn btn-primary" data-toggle="collapse" href="#collapsible" role="button">Link button</a>
Now, we apply the so-called data-attributes. Add a “data-toggle” attribute to the button with the “collapse” value, and use the “href” attribute to specify the ID of the target tag.
$('#collapsible').collapse('show'); //Expand item
$('#collapsible').collapse('hide'); //Hide item
$('#collapsible').collapse('toggle'); //Change element visibility to opposite
To process the button press in our document, just type in the editor:
As you can see, all tasks are solved with the help of five lines of code. If you add this snippet to the page, the button will change color with each click on it and will always be red when the “#collapsible” element is in the closed state.
Customize the Framework for Your Own Needs
Some developers have noticed that using Bootstrap will make all your sites look the same.
But this is true only for those who do not know HTML and CSS.
Bootstrap would not be such a popular tool if there were no ways to adapt it to your own needs and even extend the functionality in accordance with the requirements of the current project.
Any styles can be redefined or you can add your own, moreover, on our pages we use only the working code, and the real source code of Bootstrap is located in files with the extension “scss”.
You can download these source files from the official site, they are not required for the framework to work under normal conditions, but if you need more control, you have to use SASS technology.
SASS is a special preprocessor for SCSS files, their syntax is a bit like JS and CSS, and the logic of operation is the same as a template engine.
For example, you can declare a variable and assign it a fixed value. After that, the variable can be used to generate your own styles.
This is very useful if you are branding a site or coloring a theme in corporate colors and it helps to keep a solid style for different user interface elements within the entire site.
There is also a convenient opportunity to enter mathematical operators for generating CSS code and calculate values dynamically using predetermined base values. For example, convert pixel values to percentages.
Start learning the SASS part of Bootstrap with the two most interesting files.
“scss/bootstrap.scss” – this file imports all the components of the framework. You can select the components by copying the necessary directives to your own source file or simply commenting out some lines directly in this file.
Thus, you really reduce the amount of code loaded on the pages of the site working in production.
To import the entire Bootstrap, it is enough to use the following @import directive in your own scss-file:
The following file “scss/_variables.scss” contains variables, by changing their values you can adjust various global styles: colors, indents, shadows, gradients and others.
For example, such expression enables the use of gradients:
In Bootstrap, mixins are used for complex generation of all code for custom UI elements.
This mixin generates CSS code for a button with any combination of colors set by your choice:
@include button-variant(#20cece, #000000, #3127be);
You can easily edit scss-files directly in CodeLobster – the SASS syntax is fully supported, also auto-completion and help system works.
The final file is generated using a simple command executed in the terminal:
sass myCustom.scss myCustom.css
Using this technique you have not to redefine styles over and over again, you just get the necessary components and a small CSS file without unnecessary elements.
If you are not yet ready to use SASS in your projects, but are a practical programmer, go to the Bootstrap official website. There is a separate opportunity to select, then merge into one file and download the code only for those components and functions that are required for your HTML template.
Bootstrap was created by several programmers from the Twitter team. Soon they realized its huge potential and Bootstrap turned into an open source project.
While the development process, particular attention was paid to accessibility of WEB-content, adaptability and compatibility of various browsers and platforms.
A fully implemented interaction with Bootstrap expands your capabilities even more. It will be convenient for you to work at all stages of creating a UI, from designing a layout to testing an interface.
This will allow you to create a markup for all possible screen sizes, you can be 100% sure that your design will be displayed correctly on any devices.
Business wants the project to start as soon as possible and Bootstrap perfectly solves this problem.
In general, this framework is a good example of professional HTML, CSS, and JS programming. Therefore, for learning is recommended not only the documentation for working with it, but also the source code of Bootstrap.