bootstrap知识小点_html/css_WEB-ITnose-HTML Tutorial-php.cn

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

一、导入bootstrap样式和脚本

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />    <script src="js/bootstrap.min.js" type="text/javascript"></script>

Copy after login

二、导航条

<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>

Copy after login

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

中的元素。

三、布局容器

<div class="container  container-fluid">        <div class="row-fluid" id="workflow">              <h1 class="page-title" >Workflow                    <a href="#price" class="arrow-top">                        <img  src="img/arrow-top.png" alt="bootstrap知识小点_html/css_WEB-ITnose" >                    </a>            </h1>             <div class="span2"   style="max-width:90%"><img  src="img/kefu1.jpg" / 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="img/Arrows.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" ></div>            <div class="span2"   style="max-width:90%"><img  src="img/wendong1.jpg" / 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="img/Arrows.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" ></div>            <div class="span2"   style="max-width:90%"><img  src="img/times1.jpg" / 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="img/Arrows.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" ></div>            <div class="span2"   style="max-width:90%"><img  src="img/xiazai1.jpg" / alt="bootstrap知识小点_html/css_WEB-ITnose" >                after we received the payment we will send the files via dropbox or ftp            </div>                   </div>      </div>

Copy after login

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);    });

Copy after login

Related labels：

bootstrap知识小点

source：php.cn

Previous article：CSS的取值radial-gradient()_html/css_WEB-ITnose Next article：鏖战双十一-阿里直播平台面临的技术挑战_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn