当前位置：Gxlcms > html代码 > bootstrap知识小点_html/css_WEB-ITnose

bootstrap知识小点_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：22人阅读

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

一、导入bootstrap样式和脚本

二、导航条

                                    RenderKa                                                                                                                                                CN/EN
                                                     Price
                        Support
                        Workflow
                        Contact

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：

bootstrap知识小点_html/css_WEB-ITnose

Workflow

人气教程排行