bootstrap学习笔记(网页开发小知识)

 

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown

</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
</div>

 

 

 

 

  导航条的暗中认可中度是50px,比如设置:body{ padding-top:70px}

 

  Carousel是三个用来轮播内容的零部件,也等于大家平常使用的滚动广告,只怕滚动广告

三.轮转广告图片Carousel

图片 1

源码

  标签页是一个时时采用的零部件,能够放置较多的剧情,又足以节约页面空间

注意:

 

1.导航条navbar

图片 2

5.标签页Tabs

二个优秀的栅格系统布局

  使用.col-md-*
栅格类,就能够创造1个主导的栅格系统,在二弟大和机械设备上1开端是堆叠在联合的,在桌面(>970px)显示器设备成为水平排列

源码

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BootStrap 实现图片无缝滚动</title>
<style>
.body {
    display: block;  
    margin-left: auto;  
    margin-right: auto; 
    float: none; 
    width:800px;
}
</style>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
  </head>
  <body>


<div class="body">
 <h1 class="text-center">BootStrap 实现图片无缝滚动</h1>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 轮播(Carousel)指标 -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- 轮播(Carousel)项目内容 -->
  <div class="carousel-inner" role="listbox">
    <!-- 默认显示图片 -->
    <div class="item active">
      <img src="img/1.jpg" alt="态生两靥之愁,娇袭一身之病。">
     <!-- 图片描述内容 -->
      <div class="carousel-caption">
        态生两靥之愁,娇袭一身之病。
      </div>
    </div>
    <div class="item">
      <img src="img/2.jpg" alt="泪光点点,娇喘微微。">
      <div class="carousel-caption">
        泪光点点,娇喘微微。
      </div>
    </div>
     <div class="item">
      <img src="img/3.jpg" alt="闲静似娇花照水,行动如弱柳扶风。">
      <div class="carousel-caption">
        闲静似娇花照水,行动如弱柳扶风。
      </div>
    </div>
     <div class="item">
      <img src="img/4.jpg" alt="心较比干多一窍,病如西子胜三分。">
      <div class="carousel-caption">
        心较比干多一窍,病如西子胜三分。
      </div>
    </div>

  </div>

   <!-- 轮播(Carousel)导航(控制左右移动) -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">


    Previous
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

    Next
  </a>
</div>

</div>

  </body>
</html>

7.弹出框(模态框)Modal

瞩目:能够经过data属性API就能选取全部的Bootstrap插件,无需写1行JavaScript代码。这是Bootstrap中的一等API,也相应是您的首要采用办法。

6.打开标签页

图片 3图片 4

 弹出框是一个平日使用的机件,1般用来弹出提醒音讯,确认音讯,表单等剧情

那是本身在学习Boostrap网页开发时遇到的要害知识点:

四.栅格系统布局

  添加.navbar-fixed-top类能够让导航条固定在顶部,固定的领航条会遮住页面上的此外故事情节,除非给<body>成分设置了padding。

图片 5图片 6

 

                      图片 7

图片 8

 

  行(row)必须含有在.container(固定宽度) 或
.container-fluid(百分百肥瘦)中

2.下拉菜单

图片 9 

 

图片 10

图片 11

相关文章