bootstrap知识小点_html/css_WEB-ITnose

程序员文章站 2022-05-16 14:29:20

...

年底没什么项目做了，整理下最近做的网站使用到的bootstrap知识

一、导入bootstrap样式和脚本

二、导航条

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

中的元素。

三、布局容器

                      Workflow                                                        
             
                contact our customer service via Skype or email to place your order            
            
            
                upload your archived scene file including all materials and setups            
            
            
               we will send testframes to confirm that everything works fine at our end after your confirmation we will proceed start rendering            
            
            
                after we received the payment we will send the files via dropbox or ftp

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）

$("#nav-list li, #scroll_up").click(function(e) {        e.preventDefault();         $('html, body').animate({                scrollTop: $($(this).children("a").attr("href")).offset().top         },1500);    });