Articles by "Bootstrap"
Showing posts with label Bootstrap. Show all posts

at 0
A unique platform to get tutorials on basic and advance computer skills like programming, blogging. Get latest technology updates,news, tutorials
Bootstrap
Bootstrap framework offers grid system with extensive use of div element which is dynamically compatible with all devices and screens. The main advantage of grid systems you get rid of the traditional HTML Tables as far as possible and use fluid div elements.
The basic architecture of the grid system is that the screen is horizontally divided into maximum 12 columns (logically).It means grid system allows up to 12 columns across the page .If you don’t want to use all 12 column individually, you can group the columns together to create wider columns.

Bootstrap Grid Classes

The Bootstrap grid system has four classes, they are xs, sm, md and lg. These provided classes are used to create each combination of columns –for each device size. Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.
The following matrix illustrates this:
Class NamesDescription
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1Classes to use to consume one column in the corresponding device size.
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2Classes to use to consume two columns in the corresponding device size.
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3Classes to use to consume three columns in the corresponding device size.
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4Classes to use to consume four columns in the corresponding device size.
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5Classes to use to consume five columns in the corresponding device size.
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6Classes to use to consume six columns in the corresponding device size.
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7Classes to use to consume seven columns in the corresponding device size.
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8Classes to use to consume eight columns in the corresponding device size.
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9Classes to use to consume nine columns in the corresponding device size.
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10Classes to use to consume ten columns in the corresponding device size.
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11Classes to use to consume eleven columns in the corresponding device size.
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12Classes to use to consume twelve columns in the corresponding device size.

Grid System Rules

Some Boot strap grid system rules,
  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use Rows to create horizontal groups of columns
  • Content should be placed within columns, and only columns may be immediate children of rows
  • Predefined classes like .row and .col-sm-4 are available for quickly making grid 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
  • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4

Structure of a Bootstrap Grid

The following is the basic structure of the Bootstrap grid,

 class="container">
  



 class="row">
    



 class="col-*-*">



  



  



 class="row">
    



 class="col-*-*">



    



 class="col-*-*">



    

 class="col-*-*">


  



  

 class="row">
    ...
Let’s see with more Examples,
Scenario: 1
Suppose we want to create three equal columns – irrespective of all device sizes. The code for this is as follows:

 class="row">
  



 class="col-xs-4 col-sm-4 col-md-4 col-lg-4">   
 Column 1: col-xs-4 col-sm-4 col-md-4 col-lg-4 
 


 
 



 class="col-xs-4 col-sm-4 col-md-4 col-lg-4">    
Column 2: col-xs-4 col-sm-4 col-md-4 col-lg-4 
 


 
 

 class="col-xs-4 col-sm-4 col-md-4 col-lg-4">  
  Column 3: col-xs-4 col-sm-4 col-md-4 col-lg-4
The output of the above code,
Bootstrap Grid Sample Example1
Note: Make sure that the sum always adds up to 12.
Scenario: 2
In the below code we are displaying only first two column in smaller screen and the third column will not be displayed. This is why we mentioned col-xs-6 in two columns, which is sum as 12.

 class="row">




 class="col-xs-6 col-sm-4 col-md-4 col-lg-4" style="background-color:#F0B2D1;">  
Column 1: display-xs,display-sm,display-md,display-lg 








 class="col-xs-6 col-sm-4 col-md-4 col-lg-4" style="background-color:#E066A3;">  
Column 2: display-xs,display-sm,display-md,display-lg  



  


 class="hidden-xs col-sm-4 col-md-4 col-lg-4" style="background-color:#D11975;">  
Column 3: hidden-xs,display-sm,display-md,display-lg
The output of the above code
Bootstrap Grid Sample Example2
Scenario 3:
In smaller screens we need all the columns to be vertical. In medium screens first two columns should consume more space while in large screens they should be equal. Here is the code,

 class="row">




 class="col-xs-12 col-sm-5 col-md-5 col-lg-4" style="background-color:#F0B2D1;">  
 Column 1: vertical display-xs,column 1: large area display-sm,column 1: large area display-md,display-lg 








 class="col-xs-12 col-sm-5 col-md-5 col-lg-4" style="background-color:#E066A3;">  
Column 2: Vertical display-xs,column 2: large area display-sm,column 2: large area display-md,display-lg  



  


 class="col-xs-12 col-sm-2 col-md-2 col-lg-4" style="background-color:#D11975;">  
Column 3: Vertical display-xs,column 3: small area display-sm,column31: small areadisplay-md,display-lg
The output of the above code,
Bootstrap Grid Sample Example3

 lang="en">

</span><span class="pln" style="color: rgb(197, 200, 198); margin: 0px; padding: 0px; border: 0px; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; font-weight: inherit; vertical-align: baseline;">Bootstrap responsive image example - JavaTechig</span><span class="tag" style="color: rgb(204, 102, 102); margin: 0px; padding: 0px; border: 0px; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; font-weight: inherit; vertical-align: baseline;">
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">

class="container">
class="row">
class="col-xs-12 col-sm-5 col-md-5 col-lg-4" style="min-height:200px;background-color:#F0B2D1;"> Column 1: vertical display-xs,column 1: large area display-sm,column 1: large area display-md,display-lg

class="col-xs-12 col-sm-5 col-md-5 col-lg-4" style="min-height:200px;background-color:#E066A3;"> Column 2: Vertical display-xs,column 2: large area display-sm,column 2: large area display-md,display-lg
class="col-xs-12 col-sm-2 col-md-2 col-lg-4" style="min-height:200px;background-color:#D11975;"> Column 3: Vertical display-xs,column 3: small area display-sm,column31: small areadisplay-md,display-lg

One of the most important points here is that the total size of the columns must always be 12 – if it is less than 12, some space will be left unused, if it is more than 12, the last placeholder will be wrapped in the next line.
As you can see in the above examples, the width (and visibility) of the three columns are being automatically controlled by the classes as per the target device and screen size. Hence, Bootstrap’s grid system enables you to create tabular layouts for all the device sizes quite effortlessly, and without any extra complex CSS/ JavaScript coding.
Continue reading

at 0
A unique platform to get tutorials on basic and advance computer skills like programming, blogging. Get latest technology updates,news, tutorials


BOOTSTRAP
In this post, we will take a look at what are the API’s Xamarin Android facilitates to support multi part upload. For the sake of simplicity, in this example we will upload an bitmap image to server.
The Multipart upload is a mechanism that enables you to upload large objects in chunks. In a mobile application context, it is useful when you capture a video or an photo using device camera and want to upload it to your server.
In a multi part request, each chunks/parts are separated by a delimiter. A delimiter is also known as boundary that separates each part of a multi part message. Each part of the message can define its own standard header such as Content Type and Content Disposition providing the name of the file whose value it contains. The multi part delimiters and header fields are always 7-bit ASCII in any case.
For more detailed information on multi part content type search for RFC1341(MIME) or visit http://www.w3.org/

1. Convert the Bitmap to stream

Let us first convert the bitmap image into byte array to send it as ByteArrayContent via multi part form upload.
public async Task<String> UploadBitmapAsync(Bitmap bitmap)
{
 //converting bitmap into byte stream
 byte[] bitmapData;
 var stream = new MemoryStream();
 bitmap.Compress(Bitmap.CompressFormat.Jpeg, 0, stream);
 bitmapData = stream.ToArray();
 var fileContent = new ByteArrayContent(bitmapData);
}
Notice that the bitmap.Compress() write a compressed version of the bitmap to the specified stream. The second integer argument indicates the compress quality ranging from 0 being low quality and to 100 maximum.

2. Add request headers

Add the following additional content header such as media content type and content disposition. The "my_uploaded_image.jpg" is the name of image sent to server.
fileContent.Headers.ContentType = MediaTypeHeaderValue.Parse ("application/octet-stream");
fileContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data")
{
    Name = "file",
    FileName = "my_uploaded_image.jpg"
};

3. Add content chunks

Now let us initialize MultipartFormDataContent and add the chunks. The boundary is a random string used as a delimiter to separate each part of the message body.
string boundary = "---8d0f01e6b3b5dafaaadaada";
MultipartFormDataContent multipartContent= new MultipartFormDataContent (boundary);
multipartContent.Add (fileContent);
//multipartContent.Add(fileContent2);
//multipartContent.Add(fileContent3);
Declare a string constant that represents the web service endpoint to upload the poi image using multi part.

4. Upload Bitmap using HttpClient

Let us now proceed to upload the form content to server using HttpClient class PostAsync() method. The following code snippet demonstrates using HttpClient class for posting data to server.
HttpClient httpClient = new HttpClient ();
HttpResponseMessage response = await httpClient.PostAsync (UPLOAD_IMAGE, multipartContent);
if (response.IsSuccessStatusCode) {
      string content = await response.Content.ReadAsStringAsync();
  return content;
}
return null;

5. Complete example code

private const string UPLOAD_IMAGE = “http://YOUR_SERVER/api/poi/upload”
public async Task<String> UploadBitmapAsync (Bitmap bitmap){
 byte[] bitmapData;
 var stream = new MemoryStream();
 bitmap.Compress(Bitmap.CompressFormat.Jpeg, 0, stream);
 bitmapData = stream.ToArray();
 var fileContent = new ByteArrayContent(bitmapData);

 fileContent.Headers.ContentType = MediaTypeHeaderValue.Parse ("application/octet-stream");
 fileContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data")
 {
  Name = "file",
  FileName = "my_uploaded_image.jpg"
 };

 string boundary = "---8d0f01e6b3b5dafaaadaad";
 MultipartFormDataContent multipartContent= new MultipartFormDataContent (boundary);
 multipartContent.Add (fileContent);
 
 HttpClient httpClient = new HttpClient ();
 HttpResponseMessage response = await httpClient.PostAsync (UPLOAD_IMAGE, multipartContent);
 if (response.IsSuccessStatusCode) {
  string content = await response.Content.ReadAsStringAsync ();
  return content;
 }
 return null;
Continue reading
Subscribe to: Posts (Atom)