前端框架BootStrap学习01-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_58635769/article/details/124279380

1.首先新建一个html页面，并且引入jquery和bootstrap相关文件：

 <script src="../lib/jquery-3.2.1.js"></script>
    <link href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

2.设置一些简单的css样式：

 <style>
        .container .row div{
            background: #2aabd2;
            border:1px solid #b9def0;
            text-align: center;
        }

    </style>

（1）以下分别是让hello world居中，因为默认是划分为12份，自身占有6份并向右移动三份，所以居中了。

（2）嵌套了，第二个六份里又嵌套两行，每行又各占六份。

（3）第三个相对于之前的交换了一下位置，push可以理解为向右推，pull可以理解为向左拉。

<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
       <h1> Hello World</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3" >HTML</div>
        <div class="col-md-3" >CSS</div>
        <div class="col-md-3" >JS</div>
        <div class="col-md-3" >BOOTSTRAP</div>
    </div>
    <div class="row">
        <div class="col-md-3" >Spring</div>
        <div class="col-md-3" >SpringMvc</div>
        <div class="col-md-6">
            <div class="row">
            <div class="col-md-6" >SpringBoot</div>
            <div class="col-md-6" >SpringCloud</div>
            </div>
            <div class="row">
                <div class="col-md-6" >MyBatis</div>
                <div class="col-md-6" >Vue.js</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-push-6" >HTML</div>
        <div class="col-md-3 col-md-push-6" >CSS</div>
        <div class="col-md-3 col-md-pull-6" >JS</div>
        <div class="col-md-3 col-md-pull-6" >BOOTSTRAP</div>
    </div>
</div>
</body>