Bootstrap②

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

VIP文章花江夏树

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

阅读量253

点赞数

本文链接：https://blog.csdn.net/onepunchmen00/article/details/78369144

版权

网格系统常用的布局

1.列组合

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
 </div>
</div>

结果

2.列偏移

<div class="container">
<h4>列向右移动四列的间距</h4>
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-2 col-md-offset-4">列向右移动四列间距</div>
    <div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>

</div>

3.列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。

我们来看一个简单的示例：

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
</div>

效果如下

“col-md-4”居左，“col-md-8”居右，如果要互换位置，需要将“col-md-4”向右移动８个列的距离，也就是8个offset ,也就是在“<div class=“col-md-4”>”添加类名“col-md-push-8”，调用其样式。

也要将“col-md-8”向左移动４个列的距离，也就是4个offset，在“<div class=”col-md-8”>”上添加类名“col-md-pull-4”：

div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">.col-md-4</div>
<div class="col-md-8 col-md-pull-4">.col-md-8</div>
</div>

效果如下

4.列的嵌套

<div class="container">
    <div class="row">
        <div class="col-md-8" style="border: 1px solid #0000ff;background-color: red">

            <div class="row">
                <div class="col-md-8">col-md-8</div>
                <div class="col-md-4">col-md-4</div>
            </div>
        </div>
        <div class="col-md-4" style="border: 1px solid #ffff00;background-color: blue" >
            <div class="col-md-9">col-md-9</div>
            <div class="col-md-3">col-md-3</div>
        </div>
    </div>
结果如下

下拉菜单

在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。

关键.dropdown-toggle

tips：role属性有利于语义化

tabindex和tab键有关

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        选择你喜欢的水果
        <span class="caret"></span>//小三角
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="0" href="#">苹果</a></li>
        <li role="presentation"><a role="menuitem" tabindex="0" href="#">香蕉</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
    </ul>
</div>

结果如下

给选项加下划线

在想要加的地方添加这一句

<li role="presentation" class="divider"></li>


给菜单加标题
加上
<li role="presentation" class="dropdown-header">第一组水果</li>
结果

下拉菜单对齐方式   （默认是最左对齐）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <title>h</title>
    <style>
        body{
            padding: 50px 100px;
        }
        .dropdown{
            float: left;
        }
        h4{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h4>使用dropdown-menu-right类使下拉菜单与父容器右边对齐</h4>
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    </ul>
</div>
<br />
<br />
<h4>下拉菜单与父容器左边对齐</h4>
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"

最低0.47元/天解锁文章

花江夏树

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap②

网格系统常用的布局1.列组合 4">.col-md-4 8">.col-md-8 4">.col-md-4 4">.col-md-4 4">.col-md-4 3">.col-md-3 6">.col-md-6 3">.col-md-3 结果2.列偏移列向右
复制链接

扫一扫

Bootstrap②

“相关推荐”对你有帮助么？