Rumah > hujung hadapan web > html tutorial > bootstrap知识小点_html/css_WEB-ITnose

bootstrap知识小点_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:28:09
asal
1477 orang telah melayarinya

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

一、导入bootstrap样式和脚本

    <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

二、导航条

<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
中的元素。

三、布局容器

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

$("#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

 

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan