您的位置：首页 > Web前端 > BootStrap

bootstrap实现页面布局效果

2016-07-27 20:01 417 查看
<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>bootstrap框架使用</title>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <style>

        #all {

            width: 100%;

            margin: 30px auto;

        }

        .center{

            margin-left: 60px;

        }

    </style>

</head>

<body>

    <div id="all">

                <div class="text-center" style="text-transform: uppercase;">sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

                   <br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,</div>

                <hr id="px" class="text-center" style="width: 30%;"/>

                <hr id="pxx" class="text-center" style="width: 20%;"/>

        <div class="text-center" style="color: grey;">

             Fusce euismod consequat ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor. Aliquam congue fermentum nisl.

            <br> Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula.

               <br>  Aliquam dapibus tincidunt metus

        </div>

        <div class="center">

        <table>

        <tr><td><img src="自适应页面效果图/pic6.jpg" class="img-thumbnail text-left" style="padding: 10px;margin: 10px"/></td>

            <td><img src="自适应页面效果图/pic7.jpg" class="img-thumbnail text-left" style="padding: 10px;margin: 10px"/></td>

            <td><img src="自适应页面效果图/pic8.jpg" class="img-thumbnail text-left" style="padding: 10px;margin: 10px"/></td>

            <td><img src="自适应页面效果图/pic9.jpg" class="img-thumbnail text-left" style="padding: 10px;margin: 10px"/></td>

        </tr>

       <tr>

           <td><img src="自适应页面效果图/pic10.jpg" class="img-thumbnail text-left" style="padding: 10px;margin: 10px"/></td>

           <td><img src="自适应页面效果图/pic11.jpg" class="img-thumbnail text-left" style="padding: 10px;margin: 10px"/></td>

           <td><img src="自适应页面效果图/pic12.jpg" class="img-thumbnail text-left" style="padding: 10px;margin: 10px"/></td>

           <td><img src="自适应页面效果图/pic13.jpg" class="img-thumbnail text-left" style="padding: 10px;margin: 10px"/></td>

       </tr>

        </table>

        </div>

    </div>

</header>

<script src="bootstrap/js/jquery-1.12.2.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航