字体图标,响应式图片,导航条

最新推荐文章于 2021-03-07 02:28:27 发布
最新推荐文章于 2021-03-07 02:28:27 发布
阅读量380 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43167531/article/details/86485268
版权

字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体图标</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        .glyphicon-music{
            color: yellow;
            font-size: 20px;
        }
        .edit{
            color: red;
            font-size: 20px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <div class="container">
        <h1>字体图标</h1>
        <button class="btn btn-primary">
            音乐
            <span class="glyphicon glyphicon-music" aria-hidden="true"></span>
        </button>
        <br>
        <br>
        <p><span class="glyphicon glyphicon-pencil edit" aria-hidden="true"></span>这是一个段落</p>
    </div>
</body>
</html>

响应式图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式图片</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        div[class*='col-']{
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <img src="img/location_bg.jpg" alt="" class="img-responsive">
            </div>
            <div class="col-md-9">右边</div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <img src="img/location_bg.jpg" alt="" class="img-responsive img-rounded">
            </div>
            <div class="col-md-4">
                <img src="img/location_bg.jpg" alt="" class="img-responsive img-circle">
            </div>
            <div class="col-md-4">
                <img src="img/location_bg.jpg" alt="" class="img-responsive img-thumbnail">
            </div>
        </div>
    </div>
</body>
</html>

导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <!-- navbar声明导航条，navbar-default默认样式 -->
    <div class="navbar navbar-default">
        <div class="container">
            <!-- navbar-header声明Logo的容器 -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">LOGO</a>
            </div>
            <!-- 定义导航条中的菜单 -->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">公司新闻</a></li>
                <li><a href="#">行业动态</a></li>
                <li><a href="#">招贤纳才</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </div>
    </div>
    <br>
    <br>
    <!-- 反白导航条 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <!-- navbar-header声明Logo的容器 -->
            <div class="navbar-header">
                <!-- data-toggle指以什么事件触发，data-target指事件的目标 -->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#togglemenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">LOGO</a>
            </div>

            <!-- collapse navbar-collapse包裹的内容在屏宽缩小时可以隐藏 -->
            <div class="collapse navbar-collapse" id="togglemenu">
                <!-- 定义导航条中的菜单 -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">公司新闻</a></li>
                    <li><a href="#">行业动态</a></li>
                    <li><a href="#">招贤纳才</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>

                <!-- <button class="btn btn-default navbar-btn">按钮</button> -->

                <form action="" class="navbar-form navbar-right">
                    <div class="form-group">
                        <!-- 表单控件组 -->
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <!-- 字体图标按钮控件组 -->
                            <span class="input-group-btn" id="basic-addon1">
                                <button class="btn btn-default">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                              </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <br>
    <br>
    <!-- 路径导航 -->
    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
      <li class="active">Data</li>
    </ol>
</body>
</html>
冷暖自知···
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap(响应式，进度条，标题栏，字体图标，分页等等)
docwangsir的博客
11-10 1484
有HTML，css,js基础去学bootstrap十分的容易，做如下笔记： var 文本样式= { 标题样式：[.h1,.h2,.h3], 加深加重：[&lt;mark&gt;&lt;/mark&gt;&lt;strong&gt;&lt;/strong&gt;], 删除线：[&lt;del&gt;&lt;/del&gt;], 下划线：[&lt;ins&gt;&lt;/ins&
纯CSS的响应式图标字体 - Cikonss
weixin_33943347的博客
06-15 114
为什么80%的码农都做不了架构师？>>> ...
⑨bootstrap组件 按钮式下拉菜单 输入框 使用基础案例
weixin_34336526的博客
10-02 125
View Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v...
Bootstrap_文档_04_下拉菜单_按钮_输入框_导航
pre_eminent的JAVA学习园地
05-31 1385
组件无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。Glyphicons 字体图标所有可用的图标包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 Glyphicons 添加一个友情链接。如何使用出于性能的考虑，...
响应式网页字体图标
liulangdeyue的专栏
02-02 2331
响应式设计中主要面对的问题之一是如何缩放图标来适应用户界面，不仅仅是针对于物理尺寸，而且还需要根据屏幕的尺寸和每英寸的像素比例来显示。一般情况之下，都是通过内联块元素标签来添加图标。另一种常见的技术是依赖于网格图标和状态——CSS Sprites，并将其保存为.gif或.png文件。 然而，更糟糕的是图片根据响应式内容不断的放大，对于位图图像会产生锯齿，而且会越明显。更糟糕的是，CSSSpr
jquery图标文字动画切换导航条
06-06
2. **CSS样式**：定义导航条的样式，包括背景色、字体、图标和文字的位置等。使用CSS3的`transition`属性为动画效果做准备，例如： ```css #navBar li { position: relative; } .icon, .text { transition: all ...
纯css3响应式竖直图标导航下拉菜单代码
11-19
CSS3允许我们使用`background-image`或`content`属性结合字体图标库（如Font Awesome或Ionicons）来插入图标。竖直布局则意味着导航项在垂直方向上排列，这种布局常见于侧边栏或顶部导航条。 下拉菜单则是导航菜单...
bootstrap响应式红橙渐变风格综合娱乐
07-13
3. 图片和图标：Bootstrap提供了一系列预先设计的图标，如glyphicons，同时支持响应式的图片处理。 4. 响应式表格和卡片：表格（table）和卡片（card）组件会根据屏幕大小进行调整，保持内容清晰易读。 5. 弹出框和...
移动优先的响应式侧边栏导航菜单界面设计
12-12
在这个"移动优先的响应式侧边栏导航菜单界面设计"中，我们主要关注以下几个关键知识点： 1. **侧边栏导航**：侧边栏导航是网页布局中常见的一种元素，通常包含网站的主要链接和子菜单。在响应式设计中，侧边栏可能...
滑板轮滑运动响应式网页模板
01-23
5. 视频和图像的响应式处理：确保视频和图片在不同设备上能以最佳比例显示，不会因屏幕尺寸变化而失真。 接下来，关于压缩包内的文件，我们可以看到以下几个重要资源： 1. ReadMe.txt：这是一个文本文件，通常包含...
Bootstrap响应式布局
你好啊cbw
03-07 2308
目录 1.什么是 Bootstrap？ 2.为什么使用 Bootstrap？ 3.Bootstrap 包的内容 4.Bootstrap的安装与使用 5.Bootstarp Css 5.1.Bootstrap-按钮 5.1.1.按钮样式 5.1.2.按钮大小 5.1.3.按钮状态 5.1.4.按钮标签 5.2.Bootstrap-表格 5.2.1.表格类 5.2.2., 和 类 5.2.3.基本的表格 5.2.4.条纹表格 5.2.5.边框表格 5.2.6.悬停表格 5.2
div或img图片高度随宽度自适应
热门推荐
Rey
04-08 13万+
该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。二、我这次主要是用css来实现图片高度的自适应问题。下面是所需要的代码（这种方法是可以在图片上方垂直...
CSS3小图标菜单导航
w1366352655的博客
12-02 479
CSS3小图标菜单导航 在线演示 本地下载 posted @ 2018-12-02 10:41 栖息地 阅读(...) 评论(...) 编辑 收藏
img 图片自动适应div的方法
qq_31404277的博客
12-08 1万+
我们在写页面的时候经常会遇到需要图片自适应容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。 1.简单的做法 &lt;div&gt; &lt;img src="1.jpg" alt=""&gt; &lt;/div&gt; 备注一下这里的图片大小为200x200px div { width: 400px; height: 400px; b...
HTML如何在图片上添加内容（如文字，菜单栏，按钮等）
dengdengda的博客
09-26 9万+
HTML如何在图片上添加内容     最近做的一个效果是网页头部有一张大图，菜单栏漂浮在图片之上。我看到网上讲的很简单，大致原理就是图片定为相对定位，文字定为绝对定位即可。不过我实现的并不顺利，花了几个小时才让菜单栏漂浮在图片上。以下是效果图。 首先布好局： 以下是代码：               nav{         width: 100%;
响应式布局 导航条为例
宿海仁太的博客
03-12 2031
响应式布局根据屏幕的不同尺寸，应用不同的CSS规则。让不同尺寸的设备显示不同的效果。我们可以通过媒体查询实现响应式布局，CSS3提供了媒体查询，可以判断当前的可视区域的大小。大屏和超大屏幕效果图：即（电脑屏幕尺寸-----大于等于992px）小屏和超小屏幕效果图：（即手机屏幕尺寸----小于768px 和平板屏幕尺寸-----大于等于768px小于992px）点击按钮后：移动端效果图：HTML代码...
Bootstrap组件（小图标、下拉菜单、输入框、导航和导航条、媒体对象、列表组、分页导航、缩略图）
六月星海的博客
04-01 4744
1.小图标 1.1小图标的用法： &lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;； 所有的小图标都是以glyphicon-开头的。 1.2小图标使用的注意事项： 1）图标类不能和其他组件直接联合使用，它们不能在同一个元素上与其他类同时存在，应该创建一个嵌套的span元素，并将图标应用到这个span上。 2）...
财务报表，项目费用支出明细.xlsx
最新发布
08-09
工资表，财务报表，对账表，付款申请，财务报告，费用支出表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
精通Bootstrap：打造响应式网站实战指南
导航条是Bootstrap的一个重要组件，它可以包含链接、表单和导航菜单，同时支持面包屑式导航来显示当前位置。分页导航则用于在大量内容间进行跳转，而标签和圆标签则可用于标记和分类内容。最后，排版相关的元素如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值