bootstrap
Showing posts with label bootstrap. Show all posts
Showing posts with label bootstrap. Show all posts

Thursday, 12 May 2016

How Twitter Bootstrap Works

03:55 No Comments

Twitter Bootstrap is very well known CSS framework today . It is easy to Use CSS framework that helps in Creating Responsive Web pages . I am going to give a Brief Overview of How Bootstrap Differentiate between Different Screen Sizes

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Media queries

Bootstrap Uses Media Queries To Differentiate Between Screen Sizes . See Below What is code behind these media queries

/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px){
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px){
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px){
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px){
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px){
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px){
}



Bootstrap Grid Options On Different Screens












Bootstrap Grid Options






























            

          

          

        

Thursday, 30 April 2015


          

        









Bootstrap dropdown menu not working 






18:03


No
Comments












Today Twitter Bootstrap has become a basic need of the Website Development . Today i am giving some explanation regarding a common mistake while using Twitter Bootstrap . This mistake will happen only when you are trying to create a Navigation Bar for your website / webapplication using Bootstrap NavBar .



So , In order to create a NavBar we must require 3 files -



1. Bootstrap.css file

2. Jquery.js file

3. Bootstrap.js file



So Bootstrap.css file is used for Design and look of Navbar and Now the most important thing due to this you may suffer from an error -





Bootstrap dropdown menu not working 







So , Ever you suffer from this a simple solution is you must first include the jquery.js file or any version of jquery.js file as you wish as shown in example below and then after jquery file you can include bootstrap.js file 







If it still does not work just include the following script code after including the above two js files







<script>

    $(document).ready(function () {

        $('.dropdown-toggle').dropdown();

    });

</script>











A Simple Example of Twitter Bootstrap Navbar is Below :-









<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

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

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





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

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

<script>

    $(document).ready(function () {

        $('.dropdown-toggle').dropdown();

    });

</script>









    

    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>

</head>

<body>

    <form id="form1" runat="server">

    <div>



        

         <nav class="navbar navbar-default">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

        <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="#">Brand</a>

    </div>



    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Manage Users <span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">

  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>

  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>

  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>

</ul>

        </li>

      </ul>

    <div class="btn-group">

  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

    Action <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" role="menu">

    <li><a href="#">Action</a></li>

    <li><a href="#">Another action</a></li>

    <li><a href="#">Something else here</a></li>

    <li class="divider"></li>

    <li><a href="#">Separated link</a></li>

  </ul>

</div>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">Link</a></li>

      

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>





    </div>

    </form>

</body>

</html>


























            

          

          

        

Sunday, 25 January 2015


          

        









Crud Operation in AngularJS With Bootstrap






09:15


No
Comments
























In My Previous Article I explored about How to setup angularjs in Visual Studio and also Explored concepts of What , why and when To use AngularJS . In this article I am going to do CRUD Operation in AngularJS . CRUD operations means Insert , view , Update and Delete Data In Database . CRUD operations are most important thing that you must practice to create Applications either simple or complex in AngularJS or in any other Language or Technology . I am giving a simple code and easy sample that you can use to Perform CRUD operations in AngularJS using .NET technology 







Download the Sample Code from Link Below .







Download Code





How to setup/Run this sample 





1. First Download the code 

2. Then Open Web.config file and update the connection string to your sqlserver connection string by first making database in you sql server .

3. You need to Deal with CODE First Data migration Commands you can see these command in  link below :-



Data Migration 











Snapshots 






















View Data From Database AngularJS














Insert Data In Database AngularJS










Delete Data from Database AngularJS










Update Data From Database AngularJS


























            

          

          

        

Tuesday, 14 October 2014


          

        









How To Create Printable Bootstrap Page






10:13


1
Comments















Every Day Is a New Learning Day . Today, I learnt a new thing with bootstrap When We use the page becomes responsive it will adapt its width and height and change it accordingly to the screen on which we are viewing that webpage that's the magic of Bootstrap .

 BUT there is one thing need to be noticed that is When we print that page . Like i needed to give one functionality in my web application to the client . Client wants a button when client click on that button a print preview of current page is given to client and page will be downloaded as .PDF file 



But Now you may face some problem as below :-

Bootstrap - Print layout and breaks after each grid column

Grid stacks when printing Bootstrap page

you may search How to Create Printable bootstrap page So solution is below


when you see in your print preview or .PDF file you can see bootstrap  layout will be not there . This is because bootstrap make the columns and rows by using some inbuilt classes these classes are by default included in bootstrap.min.css file but you have to set them to be allowed in all media As bydefault it is set to screen only


When you try code below in your html page you can see it is not printing your page with bootstrap enabled 

<!DOCTYPE html>


<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>




    <!-- Bootstrap -->


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




    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->


    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->


    <!--[if lt IE 9]>


      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>


      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>


    <![endif]-->


  </head>


  <body>


   <div class="container">


  <div class="row">


  <div class="col-md-6">Column1</div>


    <div class="col-md-6">Column2</div>


  </div>


</div>




    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->


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


    <!-- Include all compiled plugins (below), or include individual files as needed -->


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


  </body>


</html>











Steps To Create your Bootstrap Webpage Printable



1. Replace every col-md- with col-xs-

 e.g. :- replace every col-md-6 to col-xs-6 

This is the thing that worked for me to get me rid of this problem you can see what you have to replace









Replace following code 





   <div class="container">


  <div class="row">


    <div class="col-md-6">Column1</div>


    <div class="col-md-6">Column2</div>


  </div>


</div>





With this code in our given example 


<div class="container">
  <div class="row">
    <div class="col-xs-6">Column1</div>
    <div class="col-xs-6">Column2</div>
  </div>
</div>





















            

          

          

        

Saturday, 27 September 2014


          

        









BootStrap Technology For Responsive Websites






22:10


No
Comments










Bootstrap is very good  and simple to use technology for making your website Mobile Compatible . It helps to make your website compatible with every you open it . Regardless of the screen size where we opens the website it provides full Responsiveness



Bootstrap File Structure




bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff






BootStrap Online File Links






 For Making your website Responsive using Bootstrap Technology You require some css , js coded files you can then use classes defined in these files to make your website responsive  you can either download these files from links below or you can directly provide these links in <head > </head> Tag of your Html or jsp or aspx file .






 For using Offline files :- 




 Go to links below one by one and this will open css code save the files with their respective names and then reference them in your page <head></head> Tag


For using Online Files :- 




Just include the following code lines in your page's <head></head> Tag


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



A Simple Sample of Bootstrap Html Page  Below :-






<!DOCTYPE html>
<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>

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

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>







Grid System In Bootstrap


Grid systems are used for creating page layouts through a series of rows and columns that house your content. Bootstrap's Grid system has done a lot of ease for developers Instead of doing calculations for div's like they do before bootstrap technology they can easily divide the page into columns and rows and design the page according to it .



 Here's how the Bootstrap grid system works:


    

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. A container will contain all your divs
    • 





    

  • Use rows to create horizontal groups of columns.
    • 

  • Content should be placed within columns, and only columns may be immediate children of rows.
    • 





    

  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
    • 





    

  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
    • 

  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
    • 





    

  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
    • 





    

  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
    • 





    

  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
    • 





Reference Links

1. http://getbootstrap.com/
2. http://getbootstrap.com/css/


















        

      












Subscribe to:
Posts (Atom)