[武汉|结业弟子]JS-万晶|2019年10月20日的日报-技能树.IT修真院

发表于： 2019-10-20 22:52:23

1 1067

今天完成的事情：写出任务六的大致布局，更深入的了解了bootstrap
明天计划的事情：继续进行任务六
遇到的问题：在进行bootstrap布局时不熟练一直无法好好的应用，实际操作惨不忍睹，要继续多实际操作来应用
收获：今天深入学习了bootstrap的相关操作，比如做一个按钮下拉菜单：

<div class="dropdown">
                        <button type="button" class=" dropdown-toggle" data-toggle="dropdown">
                        Dropdown button
                        </button>
                        <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a>
                        <a class="dropdown-item" href="#">Link 2</a>
                        <a class="dropdown-item" href="#">Link 3</a>
                        </div>
                    </div>

效果

也可以做出按钮组的效果，如

<div class="btn-group">
              <button type="button" class="btn btn-primary">Apple</button>
              <button type="button" class="btn btn-primary">Samsung</button>
              <button type="button" class="btn btn-primary">Sony</button>
            </div>

效果图

也可以做出简单的列表，代码

<div class="container">
                      <h2>基础列表组</h2>
                      <ul class="list-group">
                        <li class="list-group-item">First item</li>
                        <li class="list-group-item">Second item</li>
                        <li class="list-group-item">Third item</li>
                      </ul>
                    </div>