MVC Bài 03 2 HTML, CSS, bootstrap

Hôm nay, gửi đến cả nhà những tính năng của ASP.NET MVC từ version 3 đến version 5; nhằm cô đọng lại những tính năng cho từng phiên bản, những cải thiện mới cho developer thông qua từng phiên bản ASP.NET MVC ASP.NET MVC3 So với phiên bản ASP.NET MVC2 thì tính năng mới được hỗ trợ thêm HTML5 và CSS3; tính năng này chỉ hỗ trợ cho những trình duyệt mới; Cải thiện về Model validation; Hỗ trợ 2 View Engine: RAZOR, ASPX, kể cả Open source trong khi ASP.NET MVC2 chỉ có ASPX; Controller được cải tiến hơn như thuộc tính ViewBag và kiểu ActionResult; Cải thiện Dependency Injection với IDpendencyResolver (có 2 phần: DependencyResolver và interface IDpendencyResolver)trong ASP.NET MVC3; đây là lớp thực thi mô hình Service Locator, cho phép framework gọi DIContainer khi cần làm việc với 1 lớp thực thi từ 1 kiểu cụ thể Cách tiếp cận với JavaScript được hạn chế; Hỗ trợ caching trong Partial page;

ThS Nguyễn Nghiệm

0913.745.789 nghiemn@fpt.edu.vn songlong2k@gmail.com

 <form action=“?” method=“?”>

 Như <div> nhưng có nghĩa để dễ nhớ cho phần nội dung bên trong.

ThS Nguyễn Nghiệm

0913.745.789 nghiemn@fpt.edu.vn songlong2k@gmail.com

 Selector cơ bản

 Luật nạp chồng CSS

 Thuộc tính CSS

 CSS là viết tắt của Cascading Style Sheets

 Css làm thay đổi h1, h2 và h3

bằng cách bổ sung đặc điểm mới

hoặc ghi đè lên đặc điểm vốn có

của nó.

Styles.css

 Selector là ký hiệu được sử dụng để xác định các thẻ để áp dụng css.

 3 loại selector cơ bản

#blueli{css} redli{css}

<li>

 selector[attribute]{css}

 Các thẻ thỏa selector có thuộc tính attribute

 img[data-id]{border:1px solid red;}

tổ-tiên hậu-duệ {css} cha > con {css}

 Khi áp dụng nhiều css cho một thẻ sẽ xảy ra

Styles.css

position:absolute position:absolute

position:absolute

ThS Nguyễn Nghiệm

0913.745.789 nghiemn@fpt.edu.vn songlong2k@gmail.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ị

Phổ biến, rộng rãi -> dễ được support, hội nhập cao

 <div class=" row ">

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

 </div>

<button class="btn btn-default">Default</button>

 <table class=" table table-hover ">…</table>

 Class

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

 <span class=" glyphicon

 <div class=" btn-group ">

<button type="button" class="btn btn-default

<span class="caret"></span> </button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul>

 </div>

 <ul class="nav nav-tabs" role="tablist">

 <li class="active"><a href="#home" role="tab"

data-toggle="tab">Home</a></li>

 <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>

 <li><a href="#messages" role="tab"

data-toggle="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>

<div class="list-group">

<a href="#" class="list-group-item active"> Cras justo odio </a>

<a href="#" class="list-group-item">Dapibus ac facilisis in</a>

<a href="#" class="list-group-item">Morbi leo risus</a>

<a href="#" class="list-group-item">Porta ac consectetur ac</a>

<a href="#" class="list-group-item">Vestibulum at eros</a>

</div>

ThS Nguyễn Nghiệm

0913.745.789 nghiemn@fpt.edu.vn songlong2k@gmail.com

 Jquery là gì?

 Thao tác attribute, css và content

 Selector & filter

 Sự kiện

 Hiệu ứng

 Thư viện JavaScript

 Làm việc với content

 Làm việc với content

 Làm việc với attribute

 Làm việc với content

 Sử dụng lại toàn bộ Selector của Css