Technical Tutorials,Tips and tricks,Installations,Common Errors

Wednesday, February 18, 2015

deepstutorials:Bootstrap Checkboxes/Disabled checkboxes

Checkboxes gives users ability to select multiple options.By using disabled class , we can change the state of checkbox to disabled.

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <div class="checkbox">
  <label><input type="checkbox" value="">CheckBox 1</label>
</div>
<div class="checkbox disabled">
  <label><input  type="checkbox" value="" disabled>CheckBox 2</label>
</div>
  </div>
</div>
</body>
</html>

CheckBox 1

CheckBox 2

Sunday, February 15, 2015

deepstutorials:Bootstrap:Different button sizes

Buttons in bootstrap have different sizes.They are

.btn-xs
.btn-sm
.btn-md
.btn-lg

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary  btn-lg">Large button</button>
    <button type="button" class="btn btn-primary  btn-md">Medium button</button>
    <button type="button" class="btn btn-primary  btn-sm">Small button</button>
    <button type="button" class="btn btn-primary  btn-xs">Xsmall button</button>
  </div>
</div>
</body>
</html>

Button Group

Saturday, February 14, 2015

deepstutorials:Bootstrap:Active/Disabled Buttons

Button in bootstrap can have two states
1)Active
2)Disabled/Inactive state

Active is made using .active class and .disabled makes it inactive/unclickable.

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Button1</button>
    <button type="button" class="btn btn-primary active ">Active button</button>
    <button type="button" class="btn btn-primary disabled">Disabled button</button>
  </div>
</div>
</body>
</html>

Button Group

Saturday, February 7, 2015

deepstutorials:Print contents of modal window only using bootstrap

Got a requirement in mvc which has a modal window .And i had to print the content of modal window only.After a lot of research i came up with the following solution.Hopefully,this code might help someone out there :).You can find the solution at my jsfiddle link.

Resharper keyboard shortcuts

Resharper shortcuts cheat-sheet available in their website . Follow the link below

Resharper keyboard shorcuts list

deepstutorials:bootstrap button groups example

The following code creates a button group as shown below

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">ButtonGroup1</button>
    <button type="button" class="btn btn-primary">ButtonGroup2</button>
    <button type="button" class="btn btn-primary">ButtonGroup3</button>
  </div>
</div>
</body>
</html>

Button Group

deepstutorials: Bootstrap modal popup not showing up

I tried to create a bootstrap modal wrote the following code but when i ran it on my browser and clicked the button, the popup shows only in milliseconds and then it closes again.Following is the solution.

Try this

<script src="js/bootstrap.js"></script> // This JS have all necessary files

Remove below JS from your file

<script src="js/bootstrap-modal.js"></script>

Technical Tutorials,Tips and tricks,Installations,Common Errors

Pages

Wednesday, February 18, 2015

deepstutorials:Bootstrap Checkboxes/Disabled checkboxes

Sunday, February 15, 2015

deepstutorials:Bootstrap:Different button sizes

Button Group

Saturday, February 14, 2015

deepstutorials:Bootstrap:Active/Disabled Buttons

Button Group

Saturday, February 7, 2015

deepstutorials:Print contents of modal window only using bootstrap

Resharper keyboard shortcuts

deepstutorials:bootstrap button groups example

Button Group

deepstutorials: Bootstrap modal popup not showing up

About Me

VisitorCount