Documentation
SolutionDeveloperComplianceProjects
  • Getting Started
  • Technology
    • Application Framework
    • Object-Relational Mapping
    • Security Framework
    • Architecture Pattern
    • API Management
  • Environment
    • Development Tool
    • Database Server
    • Web Server
  • PRESENTATION
    • Design Material
    • HTML Helpers
    • Icon Images
    • Custom CSS
    • JQuery Plugin
      • DataTables
      • Tabs
      • Date Picker
      • Calendar
      • Chart
      • Treeview
    • Client Script
      • Open Modal
      • Close Modal
      • Handle return data
      • Load Content
      • Change Hash
      • Change Title
      • Get actual Hash
      • Get Content
      • Update Content
      • Delete Content
      • Get Partial Content
      • Get Partial Content Async
      • Update Partial Content
      • Update Partial Content Async
      • Delete Partial Content
      • Get Action
      • Update Action
      • Delete Action
      • Cascading Dropdown
      • Display Document
    • MVC View
  • BACKEND
    • Base Controller
    • Controller
    • Base Model
    • View Model
    • Class Utility
      • Constant Values
      • Global Properties
      • Option Helper
      • Setting Helper
    • Data Repository
      • Read Columns
      • Read All Columns
      • Read First Record
      • Read by Primary Key
      • Find Record
      • Insert Record
      • Update Record
      • Delete Entity
      • Delete by Criteria
      • Delete by Primary Key
      • Counting Record
      • Check Exist
      • Generate Row-Id
    • Unit Of Work
    • Data Entity
  • Application Features
    • Account Management
    • Navigation Editor
    • Access Control
  • Examples
    • Simple Page
    • Master Detail
    • Editor Template
Powered by GitBook
On this page
  • General information
  • Bootstrap 4
  • Benefits of Bootstrap 4
  • Installation
  1. PRESENTATION

Design Material

PreviousWeb ServerNextHTML Helpers

Last updated 2 years ago

General information

"Design Material" refers to the resources used for the presentation of the data, i.e. the layout. These resources are coded in HTML, CSS or JavaScript and are used in the View files of a project.

Bootstrap 4

Bootstrap 4 is one of the latest versions of Bootstrap, which is a framework for developing responsive front end solutions by providing templates based on HTML, CSS and JavaScript. One of the main differences to its previous version is that it uses a flexbox layout by default instead of a float-based grid layout, which makes it easier to create responsive and flexible grid layouts. It also includes a variety of pre-designed components, such as forms, buttons, and navigation menus, that can be used to quickly build responsive layouts.

For more information:

Benefits of Bootstrap 4

We are using Bootstrap 4 for many reasons:

  • the installation is easy (see below)

  • it is open-source, so no need to pay anything

  • it enables a responsive design which means that the layout automatically adjusts to different screen sizes and devices, so that we do not have to prepare a layout for different cases

  • the variety of features and plugins it provides saves time and effort since we do not have to program them from scratch on our own

Installation

  1. Download the "Compiled CSS and JS"

  2. Extract the files in the place they should be stored (css-files in "Content" folder, js-files in "Scripts" folder)

  3. Add the following two lines of code in the "Layout.cshtml" file of the project:

<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<script type="text/javascript" src="~/Scripts/bootstrap.bundle.min.js"></script>

Make sure that the following two lines*** come before the bootstrap js-file line to be able to use JavaScript plugins from Bootstrap:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

Go to

https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://getbootstrap.com/docs/4.0/getting-started/download/