AT WACHEMO UNIVERSITY DURAME CAMPUS THE SECOND

ASSIGMENT

IN THE SECOND SEMESTER    IN 2015 E.C                                                                             

INDIVIDUAL ASSIGMENT    ON DATA    INTERNET PROGRAMMING

NAME:TESHOME GEBEYEHU                                                                                                                      
ID:2127

                                                                                              
submission date:13-05-2015

Bootstrap is a free and open-source web development framework.

 It’s designed to ease the web development process of responsive, mobile-first websites by
providing a collection of syntax for template designs.

 In other words, Bootstrap helps web developers build websites faster as they don’t need to
worry about basic commands and functions.

 It consists of HTML, CSS, and JS-based scripts for various web design-related functions and
components.

Basic Functions of Bootstrap

 primary objective is to create responsive, mobile-first websites. It ensures all interface elements
of a website work optimally on all screen sizes.

 is available in two variants ‒ precompiled and based on a source code version. Experienced
developers prefer the latter since it lets them customize the styles to suit their projects.

 For example, the “source code” version of Bootstrap lets you access the Sass port. This means it
creates a custom stylesheet that imports Bootstrap, allowing you to modify and extend the tool as
needed.

 You can also install Bootstrap with a package manager ‒ a tool that manages and updates
frameworks, libraries, and assets.

 Some of the most popular package managers include npm, Composer, and Bower. Npm manages
server-side dependencies, while Composer focuses on the front-end. If you work on PHP-based projects,
consider using Bower instead.

 Due to its popularity, more and more Bootstrap communities emerge. These are great places for
web developers and web designers to share knowledge and discuss the latest versions of Bootstrap
patches.

Why Should You Use Bootstrap?

 Some of Bootstrap’s interface components include navigation bars, grid systems, image
carousels, and buttons.

 If you’re still not convinced whether Bootstrap is worth a try, here are the advantages of using it
compared to other web development frameworks.

Ease of Use
 First and foremost, Bootstrap is easy to learn. Due to its popularity, plenty of tutorials and online
forums are available to help you get started.

 One of the reasons why Bootstrap is so popular among web developers and web designers is
that it has a simple file structure. Its files are compiled for easy access, and it only requires basic
knowledge of HTML, CSS, and JS to modify them.

 You can also use themes for popular content management systems as learning tools. For
example, most WordPress themes were developed using Bootstrap, which any beginner web developer
can access.

 To increase the site’s page load time, Bootstrap minifies the CSS and JavaScript files. Additionally,
Bootstrap maintains consistency across the syntax between websites and developers, which is ideal for
team-based projects.

Responsive Grid
 Bootstrap comes with a predefined grid system, saving you from creating one from scratch. The
grid system consists of rows and columns, letting you make a grid inside the existing one instead of
entering media queries within the CSS file.

 Additionally, Bootstrap’s grid system makes the data entry process more straightforward. It
contains lots of media queries, allowing you to define each column’s custom breakpoints based on your
web project needs.

 The default settings are usually more than enough. After creating a grid, you only need to add
content to the containers.

 The Bootstrap grid system has two container classes to better accommodate both desktop and
mobile-based projects ‒ a fixed container (.container) and a fluid container (.container-fluid).

 The first container class provides a fixed-width container, while the latter offers a full-width
container capable of adjusting your project to all screen sizes.

Browser Compatibility
 Making your website accessible via different browsers helps reduce the bounce rate and rank
higher in search results. Bootstrap fulfills that requirement by being compatible with the latest versions
of popular browsers.

 Despite not supporting lesser-known browsers like WebKit and Gecko, websites with Bootstrap
should function correctly on them as well. However, there may be limitations regarding modals and
dropdowns on smaller screens.\

Bootstrap Image System

 Bootstrap handles the image display and responsiveness with its predefined HTML and CSS rules.

 Adding the .img-responsive class will automatically resize images based on the users’ screen size.
This will benefit your website’s performance, as reducing image sizes is part of the site optimization
process.

 Bootstrap also provides additional classes like .img-circle and .img-rounded, which help to
modify the images’ shape.

Bootstrap Documentation
 Bootstrap provides documentation for developers who want to learn to use this framework for
the first time. Here are several topics you can find on the Bootstrap documentation page :-

 Content ‒ covers the precompiled Bootstrap source code.

 Browsers and devices ‒ lists all the supported web and mobile browsers and mobile-based
components.

 JavaScript ‒ breaks down various JS plugins built on jQuery.

 Theming ‒ explains built-in Sass variables for easier customization.

 Tools ‒ teaches you how to use Bootstrap’s npm scripts for various actions.

 Accessibility ‒ covers Bootstrap’s features and limitations regarding structural markup,

components, color contrast, content visibility, and transition effects.

 The documentation also includes code samples for basic practices. You may even copy and
modify the code samples for your projects, saving you time from having to code from scratch.
Why You Shouldn’t Use Bootstrap
 Despite its advantages, Bootstrap has certain limitations that are not suitable for specific types
of projects.

 Since Bootstrap has a consistent visual style, it needs heavy customization and style override to
make one project different from another. Otherwise, all websites built with this framework will have the
same navigation, structure, and design components, making them look unprofessional.

 Having a sheer number of functions means comprising large-sized files.

 Using Bootstrap on your project can slow down the website’s load time and burden your server
if you’re not careful. To avoid this issue, make sure to only add the classes you need and use the minified
version of the files.

 While Bootstrap is compatible with the latest version of popular browsers, this isn’t the case
with the older versions. This means your website’s look will entirely depend on users’ diligence in
updating their browsers.

 Another downside is that Bootstrap styles are relatively bulky. This can result in unnecessary
HTML output, wasting central processing unit resources.

 Although it’s easy to use, Bootstrap has a slight learning curve at first. It takes time to learn the
available classes and components, which can be complicated for someone with no technical knowledge.

F
Primary iles of Bootstrap

 Bootstrap consists of a collection of syntax compiled in three primary files ‒ Bootstrap.css,

Bootstrap.js, and Glyphicons. Keep in mind that Bootstrap requires a JS library called jQuery to run JS
plugins and components.

 Here are the three primary framework files that manage the user interface and functionality of a
website.

Bootstrap.css

 CSS framework that arranges and manages the layout of a website. While HTML works with the
content and structure of a web page, CSS deals with the layout itself. For that reason, both structures
need to coexist together to perform a particular action.

 Bootstrap.css and its functions help a developer create a uniform look on as many pages as they
need. As a result, the web developer won’t have to spend hours on manual editing.

Instead of coding from scratch, you only need to refer a web page to a CSS file. Any necessary alteration
can be done in that file alone.
 CSS functions are not limited to text styles only as you can use them to format other aspects
within a website, such as tables and image layouts.Since CSS has a lot of declarations and selectors,
memorizing all of them can take some time. Refer to our CSS cheat sheet to ease your learning process.

Bootstrap.js

 This file is the core part of Bootstrap. It consists of JavaScript files that are responsible for the
website’s interactivity.

To save time from writing JavaScript syntax numerous times, developers tend to use jQuery ‒ a popular
open-source, cross-platform JavaScript library.

Here are a few examples of what jQuery can do:

 Perform AJAX requests like subtracting data from another location dynamically.

 Create widgets using a collection of JavaScript plugins.

 Create custom animations using CSS properties.

 Add dynamics to the website’s content.

While Bootstrap with CSS properties and HTML elements can function just fine, it needs jQuery to create
a responsive design. Otherwise, you can only use the bare, static parts of the stylesheet language.

Therefore, every software engineer should learn about jQuery as it’s an essential part of web
development.

Glyphicons

 Icons are an integral part of the front-end of a website, as they often display actions and data
within the user interface.

 Bootstrap uses icons called Glyphicons, which include a Glyphicons Halflings set. Although the
design is basic, they perform their essential functions, and they’re free to use.

If you want to find more stylish icons, Glyphicons sells various premium sets for niche-specific sites.

You can also download individual and theme-specific icons for free on various websites such as Flaticon,
GlyphSearch, and Icons8.

 To change the size of Glyphicons, you need to override the default style with the CSS font-size
property.

How to Use Bootstrap in Web Development

To get a better picture of how to use bootstrap, take a look at the example below.
<html lang="en">

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

<h1>Hello, world!</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></
script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

We’ll explain some of the lines in more detail.

meta charset="utf-8"

States the character set that is used to write the website. In this case, UTF-8 refers to Unicode.

meta http-equiv="X-UA-Compatible"

Determines the version of Internet Explorer that should render the page. Using Edge mode, it’s set to
use the highest mode available.

meta name="viewport"

Ensures that the page has a 1:1 ratio with the viewport size.

link href="css/bootstrap.min.css" rel="stylesheet"

This is where we add the Bootstrap core CSS.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

Loads jQuery via Google CDN. It’s better to load it from the CDN via HTTP as the files can be cached for a
year.

src="js/bootstrap.min.js

Adds the Bootstrap core JavaScript. This syntax must be below the jQuery syntax to function properly.
The addition process can be done via Google’s URL or a manual download.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-

DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/
tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Bootstrap provides a JavaScript bundle to simplify the process. However, the bootstrap.bundle.js and
bootstrap.bundle.min.js include Popper instead of jQuery. Popper is a positioning engine for calculating
elements’ positioning.

<nav class="navbar navbar-expand-lg navbar-light bg-light">

    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-
label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

        <div class="navbar-nav">

            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

            <a class="nav-item nav-link" href="#">Features</a>

            <a class="nav-item nav-link" href="#">Pricing</a>

            <a class="nav-item nav-link disabled" href="#">Disabled</a>

        </div>

    </div>

</nav>

An example of how to use the Bootstrap navbar navigation links to create sites’ menus.
Conclusion
 Bootstrap is a free front-end framework that is popular among developers today, particularly
those who work in the web design world. It’s easy to use and saves developers a lot of time from having
to write HTML, CSS, and JavaScript code manually.

 The Bootstrap framework is flexible and robust enough to accommodate almost every need for
front-end website development. Its best feature is the design templates that make web pages work
optimally on all screen sizes.

 Despite having a slight learning curve, it comes with plenty of resources to help you get started.
Some of the best learning platforms include the Bootstrap documentation page and IT-centered forums
like Stack Overflow.

We hope this article answered the question of what bootstrap is and helped you understand the benefits
of using it in web development and web design.