bootstrap笔记

web

字数统计: 656阅读时长: 3 min

 2017/05/06   Share

Bootstrap

字体图标（Glyphicons）

用法

1	<xxx class="glyphicon glyphicon-xxxx">

常用图标

glyphicon-user 用户
glyphicon-home home
glyphicon-chevron-left <
glyphicon-chevron-right >
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

导航栏

切换手机适配

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">切换导航</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">网站首页</a></li>
        <li><a href="#">普通</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" data-submenu="">含有下拉框<span class="caret"></span></a>
            <ul class="two dropdown-menu">
                <li>下拉菜单</li>
            </ul>
        </li>

    </ul>
</div>

轮播（Carousel）

轮播模块

1	<div id="myCarousel" class="carousel slide" data-ride="carousel">

设置滚动条

<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

内容

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img class="first-slide" src="./sources/banner01.jpg">
        <div class="container">
            <div class="carousel-caption">
                <h3 class="wow bounceInDown animated" data-wow-delay="0.5s"
                    style="visibility: visible; animation-delay: 0.5s; animation-name: bounceInDown;">
                    XXXXXXX </h3>
                <p class="wow bounceIn animated" data-wow-delay="0.5s"
                   style="visibility: visible; animation-delay: 0.5s; animation-name: bounceIn;">
                   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
                <p class="wow bounceIn animated" data-wow-delay="0.5s"
                   style="visibility: visible; animation-delay: 0.5s; animation-name: bounceIn;"><br></p>
            </div>
        </div>
    </div>
    <div class="item"></div>

左右按钮

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

Next Post

笔记：运营之光（第0章）
Previous Post

你好！再见！

CATALOG

1. Bootstrap

