bootstrap中常用的一些插件、css样式、组件

最新推荐文章于 2022-10-17 21:19:03 发布

一杯充满泡泡的可乐

最新推荐文章于 2022-10-17 21:19:03 发布

阅读量447

点赞数

分类专栏： bootstrap 文章标签： bootstrap css js

本文链接：https://blog.csdn.net/weixin_45781661/article/details/105313302

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

bootstrap中常用的一些javaScript插件、css样式、组件

css样式

流式布局容器，这是最常用的，基本上又有的响应式的结构都需要它

<div class="container-fluid">
  <div class="row">
    ...//这里写自己的布局结构
  </div>
</div>

栅格布局，最常用的是col-md-，它基本上适应大屏幕和中等屏幕，通常是和流式布局结合使用的。同时有时也会用到栅格系统的偏移量，使用使用 .col-md-offset-* ，这个常用于不够12列时，实现布局的居中显示。栅格布局是可以嵌套栅格布局

<div class="container-fluid">
  <div class="row">
  	<div class="col-ms-8">
  	</div>
  	<div class="col-ms-4">
  	</div>
    ...//这里写自己的布局结构
  </div>
</div>

在这里插入图片描述

文字对齐方式，为其加上text-center即可实现居中，同时还有其它的对齐方式

<div class="container-fluid">
  <div class="row">
  	<h1 class="text-center">你好</h1>
    ...//这里写自己的布局结构
  </div>
</div>

按钮，只要元素加上btn,即可成为按钮，bootstrap还提供了不同样式的按钮

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

图片，响应式的图片，为元素加上img-reponsive类，同时还可以设置图片是否是圆角

<img src="..." class="img-responsive" alt="Responsive image img-rounded">

元素在不同屏幕的显示和隐藏
设置字体，通过添加 .lead 类可以让段落突出显示,在大屏幕比价大，在小屏幕比较小

<p class="lead">...</p>

组件

字体图标，为元素加上红框中的类，即可实现字体图标
在导航菜单中，需要进行右浮动，可直接为元素添加puii-right,快速实现且不会产生副作用。

<li class="pull-right hidden-xs hidden-sm"><a href="#"  role="tab" data-toggle="tab">更多</a></li>

导航，基本上使用bootstrap导航都是基于这个模板改的

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 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="#">Brand</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="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

媒体对象，一般网站需要展示新闻的，都是图片、标题、内容，媒体对象正好结合这三样，实现了一个响应式的组件

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

面包屑的路径导航

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

在这里插入图片描述

徽章图标，效果如下

代码实现

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

javaScript插件

轮播图，bootstrap提供了轮播图的插件，大部分网站是基于以下代码修改的

<div id="carousel-example-generic" class="carousel slide" data-ride="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>

  <!-- 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">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

工具提示，即鼠标移入某个元素上，有个提示框，效果如下

首先在js文件中声明要使用这个插件

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

然后在需要的地方使用

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
//data-toggle="tooltip"这个是声明
//data-placement="right"信息显示的位置
//title="Tooltip on right"是要显示的内容

模态框，比如说点击登录弹出登录框这个样子

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

在这里插入图片描述

一杯充满泡泡的可乐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap中常用的一些插件、css样式、组件

bootstrap中常用的一些javaScript插件、css样式、组件css样式流式布局容器，这是最常用的，基本上又有的响应式的结构都需要它<div class="container-fluid"> <div class="row"> ...//这里写自己的布局结构 </div></div>栅格布局，最常用的是co...
复制链接

扫一扫