| .img-container { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 ratio */ | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .img-container img { | |
| position: absolute; | |
| top: 0; |
#การใช้ Git ฉบับรีบร้อน
##Git Git เป็น revision control แบบ distributed (หมายความว่าไม่มีศูนย์กลาง) และ แบบ non-linear history (หมายความว่ามีประวัติการเปลี่ยนแปลงแบบไม่ใช่เส้นตรง) ดังนั้นทำให้คอนเซปต์ของ Git นั้นต่างจาก revision control รุ่นก่อนหน้าหลายอย่าง
ต่อไปจะอธิบายย่อๆเรื่องคำสั่ง Git โดยอิงกับการทำงานใน GitHub เป็นสำคัญ (Git มีวิธีใช้พลิกแพลงมากมาย ไปศีกษาการใช้อื่นได้ด้วยการไป Google เอาเอง)
##clone
สมมุติว่ามี repository แห่งนีงใน GitHub เช่น https://github.com/norsez/projectA
Attention: if you attempt to fork this gist, github will think that you are a spammer and you will have to confirm that you are human with them. Apparantly there are too many links in this list. Also I update it rather frequently (see revisions on the left), so it's probably wise to not fork it anyway.
In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.
| <!DOCTYPE html> | |
| <head> | |
| <title>Hover : show Nivagation</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> | |
| <link rel="stylesheet" href="css/bootstrap.css"/> | |
| <link rel="stylesheet" href="css/lab.css"/> | |
| <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script> | |
| <script> | |
| $(document).ready(function(){ |
| $(".action-a").mouseenter(function(){ | |
| $(this).addClass('action-hover'); | |
| }) ; | |
| $(".dropdown").mouseleave(function(){ | |
| $(".action-a").removeClass('action-hover'); | |
| }); |
| //ipad and iphone fix | |
| if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { | |
| $(".menu li a").click(function(){ | |
| //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event | |
| //strange | |
| }); | |
| } | |
| // credit article : http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/ |
| <div style="z-index: 5;" class="topbar-wrapper"> | |
| <div data-dropdown="dropdown" class="topbar"> | |
| <div class="topbar-inner"> | |
| <div class="container"> | |
| <h3><a href="#">Project Name</a></h3> | |
| <ul class="nav"> | |
| <li class="active"><a href="#">Home</a></li> | |
| <li><a href="#">Link</a></li> | |
| <li><a href="#">Link</a></li> | |
| <li><a href="#">Link</a></li> |
| calSize(); | |
| $(window).resize(function() { | |
| calSize(); | |
| }); | |
| function calSize(){ | |
| var head_height = $("#title-product").height(); | |
| $("aside").css("top",head_height+20); | |
| if ( $(window).width() < 768) { | |
| $("aside").css("top",0); | |
| } |