Boostrap常用属性记录

最新推荐文章于 2022-11-08 10:42:16 发布

Python_Heaven

最新推荐文章于 2022-11-08 10:42:16 发布

阅读量345

点赞数

分类专栏：其他技术文章标签： html5

本文链接：https://blog.csdn.net/qq_36710311/article/details/116867197

版权

本文介绍了Bootstrap的一些常用属性和组件的使用，包括导航条、下拉菜单、滚动广告、栅格系统、横线、标签页、文字样式、版权设置、弹出框模态框以及菜单定位。内容详细，适合后端开发者学习前端美化。

摘要由CSDN通过智能技术生成

作为一个后端开发人员，前端头疼，学习学习bootstrap，能美化一点页面。自己也不觉得难受了。学习地址：
https://www.imooc.com/video/3346

1导航条

正常就用boostrap页面的代码拷贝过来。修改js文件路径。

navbar 居中显示，navbar-fluid整行左右对齐
navbar-inverse类可以改变导航条的外观，变成黑底显示。
navbar-fixed-top固定导航栏在顶部，相应固定在左右下也有。

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">现代浏览器博物馆</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">综述 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">简述</a></li>
        <li><a href="#">关于</a></li>
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

注意事项：添加固定导航栏会遮住页面的其他内容，除非给<body>元素设置了padding，导航条的默认高度为50px,比如body{ padding-top:70px; }

2下拉菜单

dropdown-toggle类和data-toggle=“dropdown”

 <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
          </ul>
        </li>

dropdown-toggle类和data-toggle=“dropdown”
ul是下拉菜单的内容。
注意：bootstrap 只需要设置data属性,就能调用bootstrap插件，无需写JavaScript代码。

3滚动广告

https://v3.bootcss.com/javascript/#carousel
Carousel
包含左右切换的箭头，轮播的内容，轮播的导航小圆圈
代表这是个滚动广告：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

ol class ="carousel-indicators"对应轮播的导航小圆圈。如下：

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

轮播的内容，里面img的src就是轮播图片地址，：

<!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">