我的第一个Bootstrap实例

最新推荐文章于 2023-05-02 18:54:39 发布

weixin_30482383

最新推荐文章于 2023-05-02 18:54:39 发布

阅读量218

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sunmarvell/p/9012839.html

版权

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8"> 
    <title>Bootstrap 实例</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
 <div class="container">
   <h1>最近好吗？</h1>
   <div class="row">
     <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
       <h4>第一列</h4>
       <p>不打扰是我最后的温柔 不知道 不明了 不想要 为什么 我的心 明明想靠近 却孤单到黎明 谢谢你 如此温柔 捧着笑容在等我 但我能给你什么 我只是一个他遗忘的我</p>
     </div>
     <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
       <h4>第二列，分为四个盒子</h4>
       <div class="row" >
         <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
           <p >我想我已经开始想念你，可是我刚刚才遇见了你。多么痛的领悟，你曾是我的全部,情的枷锁</p>
         </div>
          <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;" >
           <p >早安，午安加晚安，喵喵喵。</p>
          </div>
       </div>
       <div class="row" >
       <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>多热烈的白羊，多善良，多深刻，多想再次遇见你，哪怕只是一秒，哪怕没有结果，一眼就好</p>
       </div>
         <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;" >
           <p>你说呢 明知你不在还是会问 空气却不能代替你出声 把照片能给你保存多留一本 毛巾也为你准备多一个</p>
         </div>
       </div>
     </div>
   </div>
 </div>

    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
    <!-- 可选: 包含 jQuery 库 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

</html>

效果图：

布局有两个列，第二列被分为两行四个盒子。

转载于:https://www.cnblogs.com/sunmarvell/p/9012839.html

weixin_30482383

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的第一个Bootstrap实例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Bootstrap 实例</title>  <meta name="viewport...
复制链接

扫一扫