bootstrap基础

最新推荐文章于 2020-06-25 10:33:58 发布

BusyMonkey

最新推荐文章于 2020-06-25 10:33:58 发布

阅读量629

点赞数 1

分类专栏： JavaScript 文章标签： bootstrap

本文链接：https://blog.csdn.net/Dopamy_BusyMonkey/article/details/53078761

版权

JavaScript 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1、网格选项

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

2、响应式网络

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.1.1.slim.js"></script>
</head>
<body>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
</div>
</body>
</html>

3、偏移列

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-md-offset-2 col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>

4、嵌套列

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1" style="background-color: #adadad; border: 1px solid black">3</div>
    </div>

5、列排序

<div class="row">
    <div class="col-sm-4 col-sm-push-8" style="background-color: #adadad; border: 1px solid black">First</div>
    <div class="col-sm-8 col-sm-pull-4" style="background-color: #adadad; border: 1px solid black">Second</div>
</div>

6、表格

点击打开链接

7、导航栏，与切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/eventtrigger.js"></script>
</head>
<body>
<script>
    $(document).ready(function () {
        var test = new EventTrigger();
        test.homePage();
    })

</script>
<p>两端对齐的导航元素</p>
<ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>
</body>
</html>

/**
 * Created by Hou on 2016/11/11.
 */
function EventTrigger() {}

EventTrigger.prototype.homePage = function () {
    $('ul.nav > li').click(function (e) {
        e.preventDefault();
        $('ul.nav > li').removeClass('active');
        $(this).addClass('active');
    });
}

面包屑导航：

<ol class="breadcrumb">
    <li class="active"><span style="color: red">Home</span></li>
    <li><span style="color: black">2013</span></li>
    <li><span style="color: black">十一月</span></li>
</ol>