Archive

Archive for November, 2013

SharePoint Webpart title bar with background images


SharePoint Webpart title bar with background images

http://www.sharepointdesigners.net/profiles/blogs/webpart-title-bar-with

Advertisements
Categories: Uncategorized

getbootstrap responsive image


getbootstrap responsive image

img-responsive class will take care everything.

<head>

<title>Image</title>

<link href=”http://getbootstrap.com/dist/css/bootstrap.min.css&#8221; rel=”stylesheet”>
</head>
<body>
<div>
<img src=”./MyImage.jpg” class=”img-responsive” alt=”Responsive image” />
</div>
</body>

Categories: Uncategorized

Responsive Design using Bootstrap


Responsive Design using Bootstrap 

Download below files from :http://getbootstrap.com/

jquery-1.10.2.min.js
bootstrap.min.js
offcanvas.js
http://getbootstrap.com/dist/css/bootstrap.min.css

Add all above references in your html file.

All classes in the below example are out of box from bootstrap framework.
col-lg-1: Mean, 12 columns in the screen.
col-md-2: Mean, 6 columns in the screen
col-sm-3: Mean, 4 columns in the screen
col-xs-6: Mean, 2 columns in the screen
col-xs-12: Mean, 1 column in the screen.

Example:

<!DOCTYPE html>

<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Test</title>
<!– Bootstrap core CSS –>
<link href=”http://getbootstrap.com/dist/css/bootstrap.min.css&#8221; rel=”stylesheet”>
</head>

<body>
<strong>12 Equal in Mobile 2 columns</strong>
<div class=”row” style=”border: groove”>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-1</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-2</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-3</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-4</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-5</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-6</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-7</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-8</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-9</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-10</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-11</div>
<div class=”col-xs-6 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-12</div>
</div>
<br />
<strong>12 Equal in Mobile 1 column</strong>
<div class=”row” style=”border: groove”>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-1</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-2</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-3</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-4</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-5</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-6</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-7</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-8</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-9</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-10</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-11</div>
<div class=”col-xs-12 col-sm-3 col-md-2 col-lg-1″ style=”border: groove”>.col-md-12</div>
</div>
<br />
<strong>2/3rd and 1/3rd in mobile 2 columns</strong>
<div class=”row” style=”border: groove”>
<div class=”col-xs-6 col-md-8″ style=”border: groove”>.col-md-8</div>
<div class=”col-xs-6 col-md-4″ style=”border: groove”>.col-md-4</div>
</div>
<br />
<strong>2/3rd and 1/3rd in mobile 1 column</strong>
<div class=”row” style=”border: groove”>
<div class=”col-xs-12 col-md-8″ style=”border: groove”>.col-md-8</div>
<div class=”col-xs-12 col-md-4″ style=”border: groove”>.col-md-4</div>
</div>
<br />
<strong>1/4th</strong>
<div class=”row” style=”border: groove”>
<div class=”col-xs-12 col-sm-6 col-md-3″ style=”border: groove”>.col-md-3</div>
<div class=”col-xs-12 col-sm-6 col-md-3″ style=”border: groove”>.col-md-3</div>
<div class=”col-xs-12 col-sm-6 col-md-3″ style=”border: groove”>.col-md-3</div>
<div class=”col-xs-12 col-sm-6 col-md-3″ style=”border: groove”>.col-md-3</div>
</div>
<br />
<strong>1/3rd</strong>
<div class=”row” style=”border: groove”>
<div class=”col-xs-12 col-sm-6 col-md-4″ style=”border: groove”>.col-md-4</div>
<div class=”col-xs-12 col-sm-6 col-md-4″ style=”border: groove”>.col-md-4</div>
<div class=”col-xs-12 col-sm-6 col-md-4″ style=”border: groove”>.col-md-4</div>
</div>
<br />
<strong>1/2</strong>
<div class=”row” style=”border: groove”>
<div class=”col-xs-12 col-md-6″ style=”border: groove”>.col-md-6</div>
<div class=”col-xs-12 col-md-6″ style=”border: groove”>.col-md-6</div>
</div>
<br />
<br />
<br />
<!– Bootstrap core JavaScript
================================================== –>
<!– Placed at the end of the document so the pages load faster –>
<script src=”jquery-1.10.2.min.js”></script>
<script src=”bootstrap.min.js”></script>
<script src=”offcanvas.js”></script>
</body>
</html>

 

Categories: Uncategorized

bootstrap Responsive Design

Categories: Uncategorized

Best Responsive Design for Grid

Categories: Uncategorized

Responsive Design

Categories: Uncategorized

New App


HI Friends,

Just i got one idea this morning. Since most of you are from IT field, just i wann share my idea with you.

If we develop an app which will provide the best price of any product. Since holiday season is going to come, everyone will do shopping. Let’s if i want buy XBOX one, if i know where i am going to get for best price, i can go directly to that shop or i can order online. It will be cool app for everyone.

Please share your idea…

Categories: Uncategorized