基于bootstrap的仿站练习01

最新推荐文章于 2024-08-27 15:27:32 发布

web_zhuo

最新推荐文章于 2024-08-27 15:27:32 发布

阅读量2.4k

点赞数 1

分类专栏： HTML bootstrap

本文链接：https://blog.csdn.net/web_zhuo/article/details/71774399

版权

本文是web卓的bootstrap仿站练习，通过模仿bootCDN的头部导航，详细解析了导航条的结构和关键点，包括响应式导航、搜索框的制作及其在不同设备上的显示效果。通过实例分享了bootstrap的使用技巧，如输入框的居中、placeholder的样式调整以及在不同设备上的显示控制。

摘要由CSDN通过智能技术生成

大家好,我是web卓,很高兴能和大家分享我的笔记.
话不多说,进入正题.
为了提升自己对bootstrap的使用与理解,我会
在接下来的一段时间,通过模仿优秀的页面,以
此来提升自己的技能,也希望大家能跟着我一起来学习....

优秀的程序猿不是靠看出来的,而是千万行代码
敲出来的!
这次我们要模仿的页面原网址为(http://www.bootcdn.cn/)

下面我们开始分析
第一部分:头部导航


由图片可知道,该头部的结构是:
一个大的nav
里面包裹着一个 div用于存放左边的网站标志
右边一个ul存放选项
下面一个巨幕(包裹一个标题,一个详细说明,以及一个搜索框)
因此,我们可以书写结构如下
<!--头部导航条-->
<nav class="navbar navbar-default" id="navId">
    <div class="container">
        <!--响应式导航-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span