年底没什么项目做了,整理下最近做的网站使用到的bootstrap知识
一、导入bootstrap样式和脚本
1 | <link href= "css/bootstrap.min.css" rel= "stylesheet" type= "text/css" /> <script src= "js/bootstrap.min.js" type= "text/javascript" ></script>
|
Salin selepas log masuk
二、导航条
1 | <div class = "navbar navbar-fixed-top" > <div class = "navbar-inner" > <div class = "container" > <a class = "brand pull-left" href= "#" >RenderKa </a> <a class = "btn btn-navbar" data-toggle= "collapse" data-target= ".nav-collapse" > <span class = "icon-bar" ></span> <span class = "icon-bar" ></span> <span class = "icon-bar" ></span> </a> <div class = "nav-collapse collapse" > <div class = "icon_home" ><a href= "Index.aspx" target= "_blank" >CN</a>/EN</div> <ul id= "nav-list" class = "nav pull-right" > <li><a href= "#price" >Price</a></li> <li><a href= "#support" >Support</a></li> <li><a href= "#workflow" >Workflow</a></li> <li><a href= "#contact" >Contact</a></li> </ul> </div> </div> </div> </div>
|
Salin selepas log masuk
1、.navbar class 添加 class .navbar-fixed-top:表示让导航栏固定在页面的顶部
2、.brand class: 以不同的方式显示
3、.pull-left: 靠左对齐
4、为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的
中。折叠起来的导航栏实际上是一个带有 class
.navbar-toggle 及两个 data- 元素的按钮。第一个是
data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是
data-target,指示要切换到哪一个元素。三个带有 class
.icon-bar 的
创建所谓的汉堡按钮。这些会切换为.nav-collapse 中的元素。
三、布局容器
1 | <div class = "container container-fluid" > <div class = "row-fluid" id= "workflow" > <h1 class = "page-title" >Workflow <a href= "#price" class = "arrow-top" > <img src= "/static/imghw/default1.png" data-src= "img/arrow-top.png" class = "lazy" alt= "bootstrap知识小点_html/css_WEB-ITnose" > </a> </h1> <div class = "span2" style= "max-width:90%" ><img src= "/static/imghw/default1.png" data-src= "img/kefu1.jpg" class = "lazy" / alt= "bootstrap知识小点_html/css_WEB-ITnose" > contact our customer service via Skype or email to place your order </div> <div class = "span1" style= "max-width:90%" ><img src= "/static/imghw/default1.png" data-src= "img/Arrows.jpg" class = "lazy" / alt= "bootstrap知识小点_html/css_WEB-ITnose" ></div> <div class = "span2" style= "max-width:90%" ><img src= "/static/imghw/default1.png" data-src= "img/wendong1.jpg" class = "lazy" / alt= "bootstrap知识小点_html/css_WEB-ITnose" > upload your archived scene file including all materials and setups </div> <div class = "span1" style= "max-width:90%" ><img src= "/static/imghw/default1.png" data-src= "img/Arrows.jpg" class = "lazy" / alt= "bootstrap知识小点_html/css_WEB-ITnose" ></div> <div class = "span2" style= "max-width:90%" ><img src= "/static/imghw/default1.png" data-src= "img/times1.jpg" class = "lazy" / alt= "bootstrap知识小点_html/css_WEB-ITnose" > we will send testframes to confirm that everything works fine at our end after your confirmation we will proceed start rendering </div> <div class = "span1" style= "max-width:90%" ><img src= "/static/imghw/default1.png" data-src= "img/Arrows.jpg" class = "lazy" / alt= "bootstrap知识小点_html/css_WEB-ITnose" ></div> <div class = "span2" style= "max-width:90%" ><img src= "/static/imghw/default1.png" data-src= "img/xiazai1.jpg" class = "lazy" / alt= "bootstrap知识小点_html/css_WEB-ITnose" > after we received the payment we will send the files via dropbox or ftp </div> </div> </div>
|
Salin selepas log masuk
1、.container class: 用于固定宽度并支持响应式布局的容器
2、.container-fluid: 用于 100% 宽度,占据全部视口(viewport)的容器
3、1个row里最多12个span
四、滚动监听
1、引入js:
2、(1)向您想要监听的元素(通常是 body)添加 data-spy="scroll",然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target
(2)
1 | $( "#nav-list li, #scroll_up" ).click( function (e) { e.preventDefault(); $( 'html, body' ).animate({ scrollTop: $($(this).children( "a" ).attr( "href" )).offset().top },1500); });
|
Salin selepas log masuk
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
-
2025-02-26 03:58:14
-
2025-02-26 03:38:10
-
2025-02-26 03:17:10
-
2025-02-26 02:49:09
-
2025-02-26 01:08:13
-
2025-02-26 00:46:10
-
2025-02-25 23:42:08
-
2025-02-25 22:50:13
-
2025-02-25 21:54:11
-
2025-02-25 20:45:11
Topik-topik yang berkaitan
Lagi>