By Steve Smith Bootstrap is presently the most popular web framework for developing responsive network applications. It offers a number of features and benefits that can improve your users ’ experience with your web web site, whether you ’ re a novice at front-end design and development or an technical. Bootstrap is deployed as a determined of CSS and JavaScript files, and is designed to help your web site or application scale efficiently from phones to tablets to desktops. If you ’ re going to be using any of Bootstrap ’ s jQuery plugins, you will besides need to reference jQuery. If you ’ ra referencing your own local versions of Bootstrap, you ’ ll need to reference them in any pages that will use it. In product you should reference bootstrap using a CDN. In the default ASP.NET site template, the _Layout.cshtml file does sol like this :

The commend manner to install client-side dependencies like Bootstrap in ASP.NET Core is via Bower ( using bower.json, as shown above ). The use of npm/NuGet are shown to demonstrate how easily Bootstrap can be added to other kinds of web applications, including earlier versions of ASP.NET. You can besides install bootstrap using one of respective software managers, such as arbor, npm, or NuGet. In each case, the process is basically the lapp : There are several ways to get started with Bootstrap. If you ’ re starting a new world wide web application in Visual Studio, you can choose the default starter template for ASP.NET Core, in which lawsuit Bootstrap will come pre-installed :
The most basic Bootstrap template looks very much like the _Layout.cshtml file shown above, and plainly includes a basic menu for navigation and a invest to render the rest of the page .

Basic Navigation¶

The default template uses a set of

elements to render a top navbar and the main body of the page. If you ’ re using HTML5, you can replace the first gear

rag with a

tag to get the same effect, but with more precise semantics. Within this foremost

you can see there are several others. First, a

with a class of “ container ”, and then within that, two more

elements : “ navbar-header ” and “ navbar-collapse ”. The navbar-header div includes a button that will appear when the shield is below a certain minimal width, showing 3 horizontal lines ( a alleged “ hamburger icon ” ). The picture is rendered using pure HTML and CSS ; no prototype is required. This is the code that displays the icon, with each of the tags rendering one of the white bars:

 < release  type = `` button ''  class = `` navbar-toggle ''  data-toggle = `` collapse ''  data-target = `` .navbar-collapse '' >
   < bridge  class = `` icon-bar '' > < /p 

span

>

<

span

class

=

"icon-bar"

>

span

>

<

span

class

=

"icon-bar"

>

span

>

button

>

It besides includes the lotion mention, which appears in the top leave. The main navigation menu is rendered by the

    component within the second div, and includes links to Home, About, and Contact. Additional links for Register and Login are added by the _LoginPartial agate line on line 29. Below the navigation, the main body of each page is rendered in another

    , marked with the “ container ” and “ body-content ” classes. In the simple nonpayment _Layout file shown here, the contents of the page are rendered by the specific View associated with the foliate, and then a elementary

    is added to the end of the

    element. You can see how the built-in About foliate appears using this template :
    ../_images/about-page-wide.png
    The collapse navbar, with “ hamburger ” release in the top right, appears when the window drops below a sealed width :
    ../_images/about-page-hamburger.png
    Clicking the icon reveals the menu items in a upright draftsman that slides toss off from the top of the page :
    ../_images/about-page-hamburger-open.png

    Grids¶

    One of the most popular features of Bootstrap is its power system layout system. Modern web applications should avoid using the

    tag for layout, rather restricting the use of this component to actual tabular data. alternatively, columns and rows can be laid out using a series of

    elements and the allow CSS classes. There are several advantages to this access, including the ability to adjust the layout of grids to display vertically on narrow screens, such as on phones .
    Bootstrap ’ s grid layout organization is based on twelve column. This phone number was chosen because it can be divided evenly into 1, 2, 3, or 4 columns, and column widths can vary to within 1/12th of the vertical width of the screen. To start using the grid layout system, you should begin with a container

    and then add a row

    , as shown here :

     < div  class = `` container '' >
       < div  class = `` row '' >
    
       < /p 

    div

    >

    div

    >

    next, total extra

    elements for each column, and specify the number of columns that

    should occupy ( out of 12 ) as part of a CSS class starting with “ col-md- ”. For exemplify, if you want to plainly have two columns of adequate size, you would use a class of “ col-md-6 ” for each one. In this case “ mendelevium ” is short for “ medium ” and refers to standard-sized desktop calculator display sizes. There are four different options you can choose from, and each will be used for higher widths unless override ( so if you want the layout to be fixed regardless of sieve width, you can barely specify x classes ) .

    CSS Class Prefix Device Tier Width
    col-xs- Phones < 768px
    col-sm- Tablets >= 768px
    col-md- Desktops >= 992px
    col-lg- Larger Desktop Displays >= 1200px

    When specifying two columns both with “ col-md-6 ” the resulting layout will be two columns at background resolutions, but these two columns will stack vertically when rendered on smaller devices ( or a narrower browser window on a background ), allowing users to easily view subject without the want to scroll horizontally .
    Bootstrap will constantly default to a single-column layout, so you entirely need to specify column when you want more than one column. The alone meter you would want to explicitly specify that a

    take up all 12 columns would be to override the behavior of a larger device tier. When specifying multiple device tier classes, you may need to reset the column rendering at certain points. Adding a clearfix div that is merely visible within a certain viewport can achieve this, as shown here :
    ../_images/narrow-and-wide-viewport-grid.png
    In the above case, One and Two contribution a row in the “ mendelevium ” layout, while Two and Three contribution a row in the “ xs ” layout. Without the clearfix

    , Two and Three are not shown correctly in the “ xs ” scene ( note that only One, Four, and Five are shown ) :
    ../_images/grid-without-clearfix.png
    In this case, merely a single course

    was used, and Bootstrap placid largely did the right thing with respect to the layout and stack of the column. typically, you should specify a row

    for each horizontal row your layout requires, and of course you can nest Bootstrap grids within one another. When you do, each nested grid will occupy 100 % of the width of the chemical element in which it is placed, which can then be subdivided using column classes .

    Jumbotron¶

    If you ’ ve used the default ASP.NET MVC templates in Visual Studio 2012 or 2013, you ’ ve probably seen the Jumbotron in action. It refers to a large full-width section of a page that can be used to display a large setting trope, a margin call to military action, a rotator, or like elements. To add a jumbotron to a page, simply add a

    and give it a classify of “ jumbotron ”, then place a container

    inside and add your contented. We can easily adjust the standard About page to use a jumbotron for the chief headings it displays :
    ../_images/jumbotron.png

    Buttons¶

    The default clitoris classes and their colors are shown in the human body below .
    ../_images/theme-buttons.png

    Badges¶

    Badges refer to small, normally numeral callouts next to a seafaring detail. They can indicate a number of messages or notifications waiting, or the presence of updates. Specifying such badges is angstrom simple as adding a containing the text, with a class of “badge”:

    ../_images/theme-badges.png

    Alerts¶

    You may need to display some kind of presentment, alert, or error message to your application ’ south users. That ’ second where the standard alarm classes come in. There are four different severity levels, with associated discolor schemes :
    ../_images/theme-alerts.png

    Additional Elements¶

    The nonpayment theme can besides be used to present HTML tables in a nicely format style, including confirm for leach views. There are labels with styles that are alike to those of the buttons. You can create custom Dropdown menu that support extra style options beyond the standard HTML chemical element, along with Navbars like the one our default option appetizer locate is already using. If you need a advancement bar, there are several styles to choose from, vitamin a well as List Groups and panels that include a deed and content. Explore extra options within the standard Bootstrap Theme here :
    hypertext transfer protocol : //getbootstrap.com/examples/theme/

    Leave a Reply

    Your email address will not be published.