ASP Core 2.0 BootStrap 4 - ASP CORE NHẤT NGHỆ
ASP.NET Core 2.0 BootStrap 4.x Lương Trần Hy Hiến hyhien@gmail.com 0989.366.990
Giới thiệu https://getbootstrap.com/ Bootstrap HTML CSS JavaScript (by Twitter) Hệ thống các class đáp ứng hầu hết yêu cầu thiết kế web Đơn giản dễ sử dụng Tương thích nhiều loại thiết bị “Responsive, mobile-first” Phổ biến, rộng rãi - dễ được support, mang tính hội nhập cao 2
Nội dung BootStrap 4 Grid System and Core Concept Responsive Layout Framework Installation: CDN vs Local Grid System 12 columns Core Concepts: Containers, Rows and Columns Columns: col-SIZE-SPAN and Multiple Columns Component Button, Form, Table, Button Dropdown Tab Navbar Alert Card List group Icons 3
Container .container Fixed-width Responsive, i.e. max-width changes based on screen size .container-fluid full-width
Grid system Bootstrap layout is based on a grid system with rows (.row) and columns (.col, .col- n , and .col- device - n ) Each row has 12 columns Example: grid.html Auto-width column Total # of columns: 12, 12, 12
Make It Responsive 5 device categories (grid breakpoints) based on screen width Extra small Small (sm) Medium (md) Large (lg) Xlarge (xl) Phone (portrait) Phone (landscape) Tablet Desktop .col- (extra small devices - screen width less than 576px) .col-sm- (small devices - screen width equal to or greater than 576px) .col-md- (medium devices - screen width equal to or greater than 768px) .col-lg- (large devices - screen width equal to or greater than 992px) .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
Make It Response col-12: 12-column wide when the device is extra small or above col-12 col-md-4: 4-column wide when the device is medium or above; 12-column wide otherwise col-12 col-md-4 col-lg-3: ?
Bootstrap 4 – Grid System and Core Concepts Grid System 12 columns https://www.w3schools.com/bootstrap4/bootstrap grid basic.asp Easy to compute column width and gutter Added predefined CSS classes Core Concepts: Containers, Rows and Columns Container: controls layout and incl. 15px padding Fixed: responds to media query break points (.container) Fluid: responds to parent width (.container-fluid) Rows: horizontal group of columns placed in container and include columns Remove padding using negative margins Columns: Gutter 30px L 15px R 15px .col-SIZE-SPAN SIZE break point becomes 1 column SPAN # columns to span SIZE: (extra small) sm md lg xl SPAN: needs to add up to 12 Multiple Columns: class "col-sm-6 col-md-4"
Bootstrap 4 – Grid System and Core Concepts Supports latest, stable releases of all major browsers (IE 9 not supported) Default font-size of 16px 1em and line-height is 1.5. Typography Bootstrap 4 Grid System 12 columns and five classes: .col- (extra small devices - screen width 576px) .col-sm- (small devices - screen width 576px) .col-md- (medium devices - screen width 768px) .col-lg- (large devices - screen width 992px) .col-xl- (xlarge devices - screen width 1200px) Tips: Each class scales up – same widths for sm and md, only need to specify sm. Easy way to create equal width columns for all devices: only use .col class. Difference between Bootstrap 3 and Bootstrap 4 Bootstrap 4 uses flexbox, instead of floats. CSS Flexbox Tutorial Grid columns without a specified width will automatically layout as equal width Extra small Small Medium Large Extra Large .col- .col-sm- .col-md- .col-lg- .col-xl- Screen width 576px 576px 768px 992px 1200px Bootstrap 3 .col-xs- .col-xs- .col-sm- .col-md- .col-lg- Extra small Small Medium Large Class prefix Bootstrap 4
Bootstrap – Grid System and Core Concepts Columns: col-SIZE-SPAN https://www.w3schools.com/bootstrap4/bootstrap grid system.asp SIZE: extra small sm md lg xl SPAN: needs to add up to 12 1 Column SPAN 12 2 Column SPAN 6 3 Column SPAN 4 4 Column SPAN 3 6 Column SPAN 2 12 Column SPAN 1 Multiple Columns: class "col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2" 2 Items class "col-xl-6" 4 Items class "col-lg-6 col-xl-3" 6 Items class "col-md-6 col-lg-4 col-xl-2" 12 Items class "col-md-6 col-lg-4 col-xl-3" 12 Items class "col-sm-6 col-md-4 col-lg-3 col-xl-2" 12 Items class "col-sm-4 col-md-3 col-lg-2 col-xl-1" Atom Editing: CTRL / and ALT F3
Bootstrap – Grid System and Core Concepts Offset Columns: col-SIZE-offset-SPAN Remember to reset offset at greater screen widths Nesting Columns: gives more layout flexibility https://www.w3schools.com/bootstrap4/bootstrap grid examples.asp Utility Classes .h1 .h6 also as inline element .small .lead Alignment: .text-left .text-right .text-center Transformation: .text-lowercase .text-capitalize .text-uppercase blockquote footer : .blockquote .blockquote-reverse Lists: .list-unstyled .list-inline Targets Some Built-In Elements mark s del ins strong em dl , dt , dd code kbd var samp pre pre class "pre-scrollable" Utilities without need for CSS https://www.w3schools.com/bootstrap4/bootstrap utilities.asp
Button button class "btn btn-default" Default /button 12
Form 13
Table table class "table Class table-hover" /table table table-bordered: có kẻ table table-striped: thay đổi màu theo hàng table table-condensed: cắt bỏ cellpading table table-hover: highlight hàng có chuột 14
DropDown Button div class "dropdown" button type "button" class "btn btn-primary dropdown-toggle" data-toggle "dropdown" Dropdown button /button div class "dropdown-menu" a class "dropdown-item" href "#" Link 1 /a a class "dropdown-item" href "#" Link 2 /a a class "dropdown-item" href "#" Link 3 /a /div /div 15
Tab ul class "nav nav-tabs" role "tablist" li class "active" a href "#home" role "tab" datatoggle "tab" Home /a /li li a href "#profile" role "tab" data-toggle "tab" Profile /a /li li a href "#messages" role "tab" datatoggle "tab" Messages /a /li /ul div class "tab-content" div class "tab-pane active" id "home" . /div div class "tab-pane" id "profile" . /div div class "tab-pane" id "messages" . /div /div 16
NavBar 17
NavBar 18
Component: Navbar . nav .navbar .navbar-expand- device Color Scheme Brand Link, image, and/or text .navbar-brand
Component: Navbar Menu ul with .navbar-nav li with .nav-item a with .nav-link Menu button and collapse behavior button with .navbar-toggler and an icon A collapsible element with .collapse and .navbar-collapse
BS4 Alert .alert-success .alert-info .alert-warning .alert-danger .alert-primary .alert-secondary .alert-dark .alert-light 21
BS4 Card div class "card" div class "card-header" Header /div div class "card-body" Content /div div class "card-footer" Footer /div /div 22
BS4 List Group ul class "list-group" li class "list-group-item active" Active item /li li class "list-group-item" Second item /li li class "list-group-item" Third item /li /ul 23
Utilities: Border and Color Border: s/ Color: / Color theme
Utilities: Margin and Padding See g/ {property}{sides}-{size} or {property}{sides}-{breakpoint}-{size}
Utility: Display y/ .d- value , .d- device - value Value could be none, inline, block, and so on
Show/Hide Elements Responsively d-none: hide on extra small or above (i.e. always hide) d-none d-md-block: display as a block element on medium or above; hide otherwise d-none d-md-block d-lg-none: ?
Using Font Awesome Icons https://fontawesome.com/get-started Include Font Awesome JavaScript code in HTML i class “ style prefix icon name [additional styling]” /i See https://fontawesome.com/how-to-use/svg-with-js for more details
Icon – using Font Awesome 5 https://www.w3schools.com/icons/fontawesome5 intro.asp h1 fab fa-bitcoin /h1 i class 'fab fa-bitcoin' /i i class 'fab fa-bitcoin' style 'font-size:24px' /i i class 'fab fa-bitcoin' style 'font-size:36px' /i i class 'fab fa-bitcoin' style 'font-size:48px;color:red' /i br p Used on a button: /p button style 'font-size:24px' Button i class 'fab fabitcoin' /i /button p Unicode: /p i style 'font-size:24px' class 'fab' /i 29
Q&A 30
Bootstrap 4 uses flexbox, instead of floats. CSS Flexbox Tutorial Grid columns without a specified width will automatically layout as equal width Extra small Small Medium Large Extra Large Class prefix Bootstrap 4.col- .col-sm- .col-md- .col-lg- .col-xl-Screen width 576px 576px 768px 992px 1200px Bootstrap 3.col -xs sm md lg
ASP.NET Core ASP.NET Core is HTTP pipeline implementation sits on top of .NET Core uses the middleware concept (but at a higher abstraction level than OWIN) comes with its own server (Kestrel) adds DI to provide services ASP.NET Core MVC is Microsoft's application framework Host.NET Core ASP.NET Core
Changes in Oracle Providers for ASP.NET in ODAC 12c Release 4 xiv Changes in Oracle Providers for ASP.NET Release 11.2.0.2 xiv Changes in Oracle Providers for ASP.NET Release 11.2.0.1.2 xv 1 Introduction to Oracle Providers for ASP.NET 1.4 Connecting to Oracle Database Cloud Service 1-1 1.1 Overview of Oracle Providers for ASP.NET 1-1 1.2 Oracle Providers for ASP.NET Assembly 1-4 1.3 System .
ASP powder metallurgy HSS HSSconventional metallurgy ASP 2004 ASP 2015 ASP 2023 ASP 2030 ASP 2052 ASP 2055 What is broaching? Broaching can be both internal or external. Internal broaches generally create complex shapes of holes in the centre of tools such as non-circular holes, internal splines, keyways and flat surfaces.
Detailed instructions on getting asp.net-identity set up or installed. ASP.NET Identity Basic information ASP.NET identity is a membership management system which allows a user to register and login into a web application. ASP.NET identity system can be used in entire ASP.NET framework, like ASP.NET MVC, Web Forms, Web Pages, Web API and SignalR.
know how to create bootstrap weights in Stata and R know how to choose parameters of the bootstrap. Survey bootstrap Stas Kolenikov Bootstrap for i.i.d. data Variance estimation for complex surveys Survey bootstraps Software im-plementation Conclusions References Outline
the bootstrap, although simulation is an essential feature of most implementations of bootstrap methods. 2 PREHISTORY OF THE BOOTSTRAP 2.1 INTERPRETATION OF 19TH CENTURY CONTRIBUTIONS In view of the definition above, one could fairly argue that the calculation and applica-tion of bootstrap estimators has been with us for centuries.
Chapter 1: Getting started with bootstrap-modal 2 Remarks 2 Examples 2 Installation or Setup 2 Simple Message with in Bootstrap Modal 2 Chapter 2: Examples to Show bootstrap model with different attributes and Controls 4 Introduction 4 Remarks 4 Examples 4 Bootstrap Dialog with Title and Message Only 4 Manipulating Dialog Title 4
Engineering Mathematics – I Dr. V. Lokesha 10 MAT11 8 2011 Leibnitz’s Theorem : It provides a useful formula for computing the nth derivative of a product of two functions. Statement : If u and v are any two functions of x with u n and v n as their nth derivative. Then the nth derivative of uv is (uv)n u0vn nC
