Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Sunday, June 19, 2016

Bootstrap: Setting Up Bootstrap Using The Bootstrap CDN

"Bootstrap is the most popular HTML, CSS, and JS Framework for developing responsive, mobile first projects on the web."  - getbootstrap.com

Brief Introduction:

Bootstrap is a front-end framework using HTML, CSS and JavaScript to build menus, navigations, layouts, forms, tables, and etc.  What is special about Bootstrap is that mobile-first, and responsive design is it's default behavior.  Okay, hold on, let me put my professor's glasses on!

Okay class here goes:

Mobile-First Design:  You design your site for mobile devices first so the desktop version is second class citizen.

Responsive Design: A design that makes your site look good on all screen sizes, and does not need to degrade gracefully.  Meaning you can resize, stretch, maximize, do yoga with your site and it will still look good.  Well up to a certain threshold.

So to setup Bootstrap, you will do the following:

1. Create an HTML5 page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

</body>
</html>

2. In the element add the following four lines
  • <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    This the jQuery library that Bootstrap needs
  • <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
    his is the Bootstrap JavaScript library
  • <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    This is the Bootstrap stylesheet
  • <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    This is the Bootstrap theme stylesheet, which is optional

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
</head>
<body>

</body>
</html>
That's all there is to it, now you should be all set to go with Bootstrap. There's one thing that could throw you off when setting up Bootstrap. It might require you to have a certain version of jQuery to work. So you have to experiment a little bit with the jQuery version to make it work. I found that the jQuery version that I linked to works with the latest version of Bootstrap. But that might change in the future as Bootstrap releases new versions.

CSS: Padding Properties


padding: top right bottom left

padding:100px 75px 50px 25px;

Long hand version
padding-top:100px;
padding-right:75px;
padding-bottom:50px;
padding-left:25px;

All four sides 100px
padding:100px;


Saturday, June 18, 2016

ASP.NET MVC 5 From Scratch : Add Bootstrap Library Using NuGet

In the previous blog we've created added the JQuery library to an empty ASP.NET MVC 5 project. In this blog we will add the Bootstrap to the empty ASP.NET MVC 5 project that we've just created.

Step by Step Instructions:

1. Open the empty ASP.NET MVC 5 project that you've just created

2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages"















3.  In the search box on the right of NuGet window type "bootstrap", the search result will be displayed

4. Click on the "Install" button next to the "Bootstrap" result, it should be at the top of the list

5.  Once the Bootstrap library has been installed a green check mark is displayed, click on the "Close" button

6.  Now you should see the Bootstrap scripts in the "Scripts" folder

7.  You will also noticed that the "Contents" folder has been created, this folder was created when NuGet installed the Bootstrap library in the "MvcApp" project. This folder contains the cascading stylesheet that Bootstrap uses


























8.  Now let's test our bootstrap installation, in the "Index.cshtml" type in the following markup

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
Hello Bootstrap!
<p><a class="btn btn-primary btn-lg" href="#" role="button">Installed</a></p>
</div>

</body>
</html>

9. When you press Ctrl+F5 to run the application you should see the following in your browser

Thursday, June 4, 2015

ASP.NET MVC 5 From Scratch : Create A Responsive Layout With Bootstrap

In our previous blog we created a simple _Layout.cshtml file that does not have any markup just to make things simple.  In this blog we will use Bootstrap to make the layout look more professional and responsive, so that it can be viewed in any screen size.  The previous layout looks like screenshot below.
















The Bootstrap version will look like the screenshot below.















Step-By-Step Instructions:

1.  Open the MvcApp project
2. Open the BundleConfig.cs file in the App_Start folder and type in the following code

using System.Web;
using System.Web.Optimization;

namespace MvcApp
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/
2.1.4/jquery.min.js").Include("~/Scripts/jquery-{version}.js"));
            bundles.Add(new ScriptBundle("~/bundles/bootstrap","https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.4/js/bootstrap.min.js").Include("~/Scripts/bootstrap.js","~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/bootstrap", "https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.4/css/bootstrap.min.css").Include("~/Content/bootstrap.css"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/Styles.css"));

BundleTable.EnableOptimizations = true;
bundles.UseCdn = true;
}
}
}

The code above creates a new StyleBundle with the virtual path ~/Content/bootstrap, which is created specifically for the bootstrap css files. Then we change the StyleBundle("~/Content/css") bundle to contain stylesheets that are site specific. We will add the Styles.css file later

 3.  Now we are ready to add the header navigation to the _Layout.cshtml file, which is the layout specified as the default layout in the _ViewStart.cshtml file.

4.  Open the _Layout.cshtml file, then type in the following code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@Page.Title</title>
@RenderSection("head", required: false)
@Styles.Render("~/Content/bootstrap")
@Styles.Render("~/Content/css")
</head>

The code above defines the viewpoint as the device-width, a viewport is the width of the screen used to determine how bootstrap will display the elements on the screen. The device-width viewport means that the elements will be render to the screen's device width. The rest of the code just renders all the style bundles that we've defined in the BundleConfig.cs file.

5.  Once we have the head section defined we can define the header section of the layout.

    <body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Beverages</a></li>
<li><a href="#">Condiments</a></li>
<li><a href="#">Confections</a></li>
<li><a href="#">Dairy Products</a></li>
<li><a href="#">Grains/Cereals</a></li>
<li><a href="#">Meat/Poultry</a></li>
<li><a href="#">Produce</a></li>
<li><a href="#">Seafood</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>

</div>
</nav>
<div class="jumbotron" id="header-jumbotron">
<h2>Northwind Store</h2>
</div>
</header>

The code above looks complicated, but it's not that complicated. First we use the bootstrap class "navbar navbar-default navbar-fixed-top" to tell the browser that we want the navbar that fixes on the top of the screen even when the user scrolls. All we have to do is define the class and bootstrap does the rest for us.  The navbar class defines the top navigation of the layout like the screenshot below





6.  The following section defines the menu when the screen gets really small and the elements have to be stacked because it does not have the width to display everything horizontally.

                            <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>

The menu looks like the following when the screen gets really small































7.  Now we want to define the actual navigation bar, type in the following code to define the "Home", "About","Contact" tabs, and the "Products" drop down.


                            <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Beverages</a></li>
<li><a href="#">Condiments</a></li>
<li><a href="#">Confections</a></li>
<li><a href="#">Dairy Products</a></li>
<li><a href="#">Grains/Cereals</a></li>
<li><a href="#">Meat/Poultry</a></li>
<li><a href="#">Produce</a></li>
<li><a href="#">Seafood</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->

Like everything else in bootstrap we just have to call class "navbar-collapse collapse" and nest the div with the <ul> element with class "nav navbar-nav" and bootstrap picks it up applies the stylesheets and functionalities automatically. That's the great thing about bootstrap. It makes things easy, but the bad thing is a lot of the sites nowadays have the same bootstrapy look and feel to them. But it's great if you want to throw something together quickly and make it look decent.

So the code below defines the "Home", "About", and "Contact" tab

    <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a

And the following code defines the "Products" dropdown menu.
                                    <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Beverages</a></li>
<li><a href="#">Condiments</a></li>
<li><a href="#">Confections</a></li>
<li><a href="#">Dairy Products</a></li>
<li><a href="#">Grains/Cereals</a></li>
<li><a href="#">Meat/Poultry</a></li>
<li><a href="#">Produce</a></li>
<li><a href="#">Seafood</a></li>
</ul>
</li>


8. Now we want to add a jumbotron to make the navigation stand out a little bit.

           <div class="jumbotron" id="header-jumbotron">
<h2>Northwind Store</h2>
</div>

The code above produces the following output











9.  To style the jumbotron we have to create our own stylesheet so that it does not interfere with the default bootstrap styles.  So create a new css file in the ~/Content folder and give it the name Styles.css.

10.  In the Styles.css file type the following code

body {
}

#header-jumbotron{
background-color: #6f5499;
}
#navbar {
margin-left: 50px;
}

#header-jumbotron h2{
margin-left: 40px;
color: #fff;
margin-top: 50px;
}


The code above defines the margin for the navbar and the jumbotron, it also set the text color and background color for the jumbotron.

11. Now we want to wrap things up by calling the script bundles at the bottom of the page

        @RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

12. The complete code for the _Layout.cshtml file is the following

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@Page.Title</title>
@RenderSection("head", required: false)
@Styles.Render("~/Content/bootstrap")
@Styles.Render("~/Content/css")
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                    <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Beverages</a></li>
<li><a href="#">Condiments</a></li>
<li><a href="#">Confections</a></li>
<li><a href="#">Dairy Products</a></li>
<li><a href="#">Grains/Cereals</a></li>
<li><a href="#">Meat/Poultry</a></li>
<li><a href="#">Produce</a></li>
<li><a href="#">Seafood</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>

</div>
</nav>
<div class="jumbotron" id="header-jumbotron">
<h2>Northwind Store</h2>
</div>
</header>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
</body>
</html>


Thursday, April 16, 2015

Using Bootstrap To Make Your Form Fields Look More Professional

In this blog we will turn ordinary form fields to a more modernized and professional looking form fields by using the bootstrap library.  Let's say we have the following form fields with no formatting, or layouts applied to it with the following markup.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
</head>
<body>
<form>
First Name: <input name="First Name" type="text"><br/>
Last Name: <input name="Last Name" type="text"><br/>
E-Mail: <input name="E-Mail" type="text"><br/>
Password: <input name="Password" type="password"><br/>
Gender:
<br/><input type="radio" name="gender" value="male" checked>Male<br/>
<input type="radio" name="gender" value="female">Female<br/>
<input type="submit" value="Sign-Up"/>
</form>
</body>
</html>


As you can see the form is pretty ordinary, and if I could be politically incorrect quite ugly.
Now we are going to turn this ugly form into something that is more presentable with the use of the bootstrap components call "Input groups".  As with anything in bootstrap we will use css classes to change the look and feel of the input fields above.

The new markup looks like the following:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
<style>
.form-label-spacing{
margin-top: 15px;
}

.form-group-spacing
{
margin-left: 20px;
}
</style>
</head>
<body>
<form>
<div class="row">
<div class="form-group form-group-spacing col-lg-4 col-md-4">
<label for="firstName" class="form-label-spacing">First Name:</label>
<input class="form-control" type="text" id="firstName" placeholder="First Name">
<label for="firstName" class="form-label-spacing">Last Name:</label>
<input class="form-control" type="text" id="lastName" placeholder="Last Name">
<label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
<input class="form-control" type="email" id="E-Mail" placeholder="Email">
<label class="form-label-spacing" for="password">Password:</label>
<input name="Password" class="form-control" type="password" placeholder="Password">
<div class="form-group">
<label class="form-label-spacing" for="gender">Gender:</label>
<div class="radio">
<label><input type="radio" name="gender" id="gender">Male</label><br/>
<label><input type="radio" name="gender" id="gender">Female</label>
</div>
</div>

<button type="button" class="btn btn-default">Sign Up</button>

</div>
<div class="col-lg-8 col-md-8"/>
</div>
</form>
</body>
</html>

The new form fields look like the screenshot below in a browser:
























As you can see with just a few changes in our markup we can have a professional looking form field in our registration form.  Let's examine the code more closely.

The first thing we have to do is enclose the form fields in a "form-group" class.
<div class="form-group form-group-spacing col-lg-4 col-md-4">

form-group-spacing is just a class we created to provide some spacing for the form fields.   Then we want to limit the space of the form fields to just four columns on the bootstrap grid system.  A grid system is bootstrap's way of defining the layout in a page.  Basically it divides the page into twelve columns, with lg = large resolution (large screen), md= medium resolution (medium screen),  sm = small resolution (small screen usually mobile devices) .  So in our code we tell bootstrap to give us four large columns and four medium columns, usually I just leave the sm settings for bootstrap to handle and define just the lg and md sizes.  For more information on the bootstrap grid system go to Bootstrap Grid System.

Then we just add the <label> tag for each form labels:  For example for the first name form field we added the code <label for="firstName" class="form-label-spacing">First Name:</label>, the "for" attribute, specify with form field id the label tag is for.  Then in the <input class="form-control" type="text" id="firstName" placeholder="First Name"> tag we add the class="form-control" to make the form field pretty, the placeholder is optional, it shows the default text that is displayed to the user.   We do this for all the form fields, except for radio button fields.

The radio button fields we create another <div class="form-group"> to provide it's own spacing.  We then tell bootstrap that we are dealing with radio buttons in the <div> tag <div class="radio">.  Notice how the labeling is different for the label we just have the label on top, and then an opening and closing <label> tags around the actual radio button input fields and no attributes in the <label> tags.  This is because the radio button label is already defined with the word "Male" and "Female".

<div class="form-group">
                    <label class="form-label-spacing" for="gender">Gender:</label>
                        <div class="radio">                       
                            <label><input type="radio" name="gender" id="gender">Male</label><br/>
                            <label><input type="radio" name="gender" id="gender">Female</label>
                        </div>
                </div>

Then we define the button with the following markup

<button type="button"  class="btn btn-default">Sign Up</button>

The markup above just give the button the default button style in bootstrap.

Finally, we tell bootstrap to use up the other eight columns on the page with this tag

<div class="col-lg-8 col-md-8"/>

The reason we specify that we want bootstrap to use the other eight columns is because we don't want to have any weird layouts when the browser is resized.  All twelve columns have been defined on the page.

If you look in FireBug you will see that form fields are styled with some pretty fancy CSS styles.  But all we had to do was call the CSS class, bootstrap does all the work for us.




Friday, March 6, 2015

Bootstrap: Setting Up Bootstrap Using The Bootstrap CDN

"Bootstrap is the most popular HTML, CSS, and JS Framework for developing responsive, mobile first projects on the web."  - getbootstrap.com

Brief Introduction:

Bootstrap is a front-end framework using HTML, CSS and JavaScript to build menus, navigations, layouts, forms, tables, and etc.  What is special about Bootstrap is that mobile-first, and responsive design is it's default behavior.  Okay, hold on, let me put my professor's glasses on!

Okay class here goes:

Mobile-First Design:  You design your site for mobile devices first so the desktop version is second class citizen.

Responsive Design: A design that makes your site look good on all screen sizes, and does not need to degrade gracefully.  Meaning you can resize, stretch, maximize, do yoga with your site and it will still look good.  Well up to a certain threshold.

So to setup Bootstrap, you will do the following:

1. Create an HTML5 page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

</body>
</html>

2. In the element add the following four lines
  • <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    This the jQuery library that Bootstrap needs
  • <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
    his is the Bootstrap JavaScript library
  • <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    This is the Bootstrap stylesheet
  • <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    This is the Bootstrap theme stylesheet, which is optional

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
</head>
<body>

</body>
</html>
That's all there is to it, now you should be all set to go with Bootstrap. There's one thing that could throw you off when setting up Bootstrap. It might require you to have a certain version of jQuery to work. So you have to experiment a little bit with the jQuery version to make it work. I found that the jQuery version that I linked to works with the latest version of Bootstrap. But that might change in the future as Bootstrap releases new versions.

Thursday, August 22, 2013

CSS: Padding Properties

padding: top right bottom left
padding:100px 75px 50px 25px;

Long hand version
padding-top:100px;
padding-right:75px;
padding-bottom:50px;
padding-left:25px;

All four sides 100px
padding:100px;