BootStrap开发实践 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

要用到的BootStrap元素

那么,我么要用到哪些BootStrap元素才能很好的展示我们的板块内容呢?

1.导航条

这里要用到固定在网页头部的导航条(navbar-fixed-top),并在其中整合用户登录模块,代码如下

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
       <div class="container">
         <div class="navbar-header">
          <a class="navbar-brand active" href="首页URL">顶求网</a>
          <a class="navbar-brand" href="图书页面URL">图书</a>
          <a class="navbar-brand" href="文章页面URL">文章</a>
        </div>
        <div class="btn-group" style="margin-top:10px; float:right;">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              会员登陆 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
               <LI><a href="会员登陆页面URL"  target="_top">会员登陆</a></LI>
               <LI><a href="会员注册页面URL"  target="_top">会员注册</a></LI>
            </ul>
        </div>
    </div>
 </div>

2.文章板块需要用到的BootStrap元素

1.轮换图片插件(caoursel)——解决了展示图片时图片变形的问题。

2.标签页插件(tabs)——对插件的样式进行了美化,并增加了自动切换功能。

3.信息按钮(btn-info)组件——用它列出文章分类信息。

3.图书板块需要用到的元素

1.自己开发的Jquery Tab插件

2.缩略图(thumbnail)组件

3.分类标签(仿豆瓣)

4.用户板块用到的BootStrap元素

1.BootStrap原生tab

2.圆形图片(image_circle

增加或修改导航菜单或会员登录下拉按钮,然后看看运行效果。