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>

Nach dem Login kopieren

二、导航条

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Verwandte Etiketten：

bootstrap知识小点

Quelle：php.cn

Vorheriger Artikel：CSS的取值radial-gradient()_html/css_WEB-ITnose Nächster Artikel：鏖战双十一-阿里直播平台面临的技术挑战_html/css_WEB-ITnose

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors