The Knowledge Foundation

Thursday, 3 May 2018

002 Bootstrap Get Started

Bootstrap Get Started

If you do not want to download Bootstrap library , you can include it from a CDN . CDN stands for Content Delivery Network.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Add the HTML5 doctype , Bootstrap uses HTML elements and CSS properties ,you have to used
HTML5 doctype at the top of the page with proper character set.Below is the example , how to include HTML5 doctype to the page.

<!DOCTYPE html>

<html lang="en">

          <head>

                           <meta hcharset="utf-8">

                    <title></title>

          </head>

          <body>

          </body>

</html>

Bootstrap is mobile-first ,To ensure proper rendering and touch zooming, Tag is used inside the element.Below is the example , how it is used.

    width=device-width :This code set width of page with the device  width ,for example a desktop computer dispaly with may be 800px ,so the browser window will 800px wode , a mobile display width may be 50px , the browser window will be 50px wide.

   initial-scale=1:Set the zooming level when the page is first loaded.1.0 means that the page does not zoom.

Containers container is used to wrap the site contents.Two container class mainly used

    .container -fixed width responsive container
    .container-fluid -full width responsive container ,span the entire viewport width.

My First Bootstrap Application

Code

<!DOCTYPE html>

<head>

<title>My First Bootstrap Example</title>

</head>

<body>

<div>

Bootstrap is free and open source library for website development and designing purpose. The main content of Bootstrap is HTML and CSS. Bootstrap was developed by Mark Otto and Jacob Thorn at Twitter. Bootstrap is a front end framework designing purpose only. Bootstrap 4 is the latest version Bootstrap , which is faster and responsive design for mobile first websites.

A Responsive design is that , a website automatically adjust itself on device view . A Responsive design will render different view on a desktop and a mobile phone.The design will adjust itself for larger and small screen.

</div>

</body>

</html>

Output :

Desktop

Modile

Palmtop

Layout of container and container-fluid
Code

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Container</h1>

<p>Example of Container</p>

<p><b>You will Notice , this is not full page width</b></p>

</div>

<br />

<h1>Container-fluid</h1>

<p>Example of Container-fluid</p>

<p><b>You will Notice , this is of full page width</b></p>

</div>

</body>

</html>

Output

001 Bootstrap Introduction

Bootstrap Introduction

Bootstrap is free and open source library for website development and designing purpose. The main content of Bootstrap is HTML and CSS. Bootstrap was developed by Mark Otto and Jacob Thorn at Twitter. Bootstrap is a front end framework designing purpose only. Bootstrap 4 is the latest version Bootstrap , which is faster and responsive design for mobile first websites.

A Responsive design is that , a website automatically adjust itself on device view . A Responsive design will render different view on a desktop and a mobile phone.The design will adjust itself for larger and small screen.

Advantages of Bootstrap

Save time-Bootstrap predefined design templates and classes minimise your development work.

Responsive design-You can easily create responsive designs using Bootstrap.Web pages to appear appropriately on different devices and screen size and resolution without any change in markup.

Consistent design-Bootstrap design are consistence as it use a central library for design layout.

Easy to use-Bootstrap is very easy to use , with some basic HTML and CSS knowledge, you can implement Bootstrap successfully.

Compatible with browsers-Bootstrap is compatible almost all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera). You do not need yo additional work to handle separate Browsers.

Open Source-Bootstrap is completely free , open Source , downloadable and use.

Bootstrap can be added to the project in two ways .

Download Bootstrap from getbootstrap.com

Include Bootstrap from a CDN

Download Bootstrap from getbootstrap.com

Include Bootstrap from a CDN

After you include Bootstrap in your project ,
you will be able to do

Develop responsive and mobile friendly website.

Able to do faster web development than before.

Will able to user templates for typography, forms, buttons, tables, navigation, modals, image carousels and many others based on HTML and CSS.

Your design will be compatible almost all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera).

File Structure of the Downloaded file

After you have download the file and unzip it , you will see the following file

bootstrap-3.3.7-dist

css

bootstrap.css

bootstrap.css.map

bootstrap.min.css

bootstrap.min.css.map

bootstrap-theme.css

bootstrap-theme.css.map

bootstrap-theme.min.css

bootstrap-theme.min.css.map

2.fonts

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.woff

glyphicons-halflings-regular.woff2

3.js

bootstrap.js

bootstrap.min.js

npm.js

Tuesday, 1 May 2018

027 AngularJS Routing

AngularJS Routing

AngularJS is a single page application (SPA). ngRoute directive route the application within a single page. ngRoute module help to navigate between pages , link without reloading the page.
.The routing is completely based on URL, when is specific URL are requested, ngRoute render the view defined as per routing rules.

Example :

<html>

<a href="#!C#">C# Tutorial</a>

<a href="#!Javscript">Javscript Tutorial</a>

<a href="#!AngularJS">AngularJS Tutorial</a>

var app = angular.module("myApp", ["ngRoute"]);

app.config(function ($routeProvider) {

$routeProvider

.when("/", {

templateUrl: "Home.html"

})

.when("/C#", {

templateUrl: "C#.html"

})

.when("/Javscript", {

templateUrl: "Javscript.html"

});

.when("/AngularJS", {

templateUrl: "AngularJS.html"

});

</script>

</body>

</html>

025 AngularJS Exception Handling

AngularJS Exception Handling

While executing any program , if any unwanted situation is occurred , exception occurs . Most of the programming languages & scripting has facility to handle exceptions. JavaScript use try catch finally for exception handling purpose.AngularJS $exceptionHandler detective is used to handle exceptions . $exceptionHandler write exception to the browser console , you can override this functionality. The error is written in $log.error by default.

Below is the example of exception handling

Example

<div>

<!DOCTYPE html>

<html>

<head>

angular.module("myApp", [])

.controller("myController", function ($scope, $exceptionHandler)

{

$scope.myFunction = function ()

{

try

{

throw new Error("Your have generated an exception");

}

catch (except)

{

$exceptionHandler(except.message, " : Button was Pressed");

}

});

</script>

</head>

<body>

Click Here

</button>

</div>

</body>

</html>

</div>

Output :

Error handling can be customize also.You can use factory method to create an exception.

Custom Error Handleing

<!DOCTYPE html>

<html>

var app = angular.module('myApp', []);

app.factory('$exceptionHandler', function ()

{

return function (exception, cause)

{

alert( exception.message);

};

});

app.controller('myController', function ($scope)

{

$scope.GenerateErroe = function ()

{

throw { message: 'error occurred' };

}

});

</script>

</head>

<body>

</div>

</body>

</html>

Output :

Clik Me!

The Knowledge Foundation

Thursday, 3 May 2018

002 Bootstrap Get Started

001 Bootstrap Introduction

Advantages of Bootstrap

Tuesday, 1 May 2018

027 AngularJS Routing

025 AngularJS Exception Handling

বাঙালির বেড়ানো সেরা চারটি ঠিকানা

Labels

Report Abuse