Bootstrap入门

最新推荐文章于 2024-07-16 16:43:05 发布

一屋不扫何以扫-天下

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量398

点赞数

分类专栏： JavaScript框架文章标签： bootstrap javascript

本文链接：https://blog.csdn.net/qq_39544334/article/details/77662657

版权

JavaScript框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Bootstrap

Bootstrap 简介

什么是bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。
Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

为什么使用 Bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。

Internet Explorer Firefox Opera Google Chrome Safari
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

响应式设计
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

Bootstrap使用

环境下载

下载 Bootstrap
从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。

导入时用

设置界面支持html5
```
<!DOCTYPE html>
<html>
....
</html>
```

引入js/css文件

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

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

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

本地文件导入方式（先将bootstrap文件复制到项目中）

<script type="text/javascript" src="../js/jquery-2.2.1.min.js">
</script>
<!-- 包括所有已编译的插件 -->
<script type="text/javascript" src="../js/bootstrap.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">

移动端

文档位置

http://v3.bootcss.com

案例入门，展示一个内边框的div

<div class="container">
        <div class="jumbotron">
            <h1>我的第一个 Bootstrap 页面</h1>
            <p>重置窗口大小，查看响应式效果！</p>
        </div>
</div>

案例效果

效果一展示一个表格效果

<table class="table table-striped">
        <thead>
            <tr>
                <th>Student-ID</th>
                <th>Last Name</th>
                <th>Grade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>Reddy</td>
                <td>A+</td>
            </tr>
            <tr>
                <td>002</td>
                <td>Pallod</td>
                <td>A</td>
            </tr>
            <tr>
                <td>003</td>
                <td>Sen</td>
                <td>A+</td>
            </tr>
        </tbody>
</table>

案例效果，展示按钮

    <!-- 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>

栅格系统

    <div class="container">
        <div class="row">
            <div class="col-xs-12 ">一共12列</div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
            <div class="col-xs-1 ">1列</div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-4 ">占4列</div>
            <div class="col-xs-4 ">占4列</div>
            <div class="col-xs-4 ">占4列</div>
        </div>
    </div>


    样式

    div.container div.row div {
        margin: 5px 0px;
    }

    div.container div.row div {
        background-color: lightgray;
        border: 1px solid gray;
        text-align: center;
    }

案例效果,导航栏

案例效果，轮播图

<div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../img/bb.jpg" alt="First slide">
            </div>
            <div class="item">
                <img src="../img/aa.jpg" alt="Second slide">
            </div>
            <div class="item">
                <img src="../img/aa.jpg" alt="Third slide">

            </div>

        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

 播动

        $('.carousel').carousel();

模态框

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                在这里添加一些文本
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

SSM前后端分离项目

定义导航栏效果

<div class="container">
    <div class="row">
        <div class="span8">
            <ul class="nav nav-pills">
                <li class="active"><a href="#">员工管理系统</a></li>
                <li><a href="#" onclick="showUsers()">员工管理</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

导航栏点击事件切换效果

$("li").click(function() {
    $.each($("li"), function() {
        $(this).prop("class", "");
    });
    $(this).prop("class", "active");
});

定义数据展示表格

<table id="tt" class="table table-striped">
</table>

数据展示

    $.ajax({
            type : "GET",
            url : "/Day10_EasyUI/getUser.action",
            dataType : "json",
            success : function(data) {
            var str = "<thead><tr><th>用户编号</th><th>用户名</th><th>邮箱</th><th>性别</th><th>操作</th></tr></thead>";
            $.each(data,function(index) {
            str = str
            + "<tbody><tr><td>"
            + index
            + "</td><td>"
            + this.username
            + "</td><td>"
            + this.email
            + "</td><td>"
            + this.sex
            + "</td ><td><button type='button' class='btn btn-success' onclick='editUser("
            + this.id
            + ")'>修改</button> </td></tr></tbody>"

            });
            $("#tt").html(str);
        }
    });