bootstrap----导航栏 图片布局
今天主要想介绍一个几个好用的类,第一个就是page-header
<h1 class="page-header">welcome to my page</h1>
可以很好地凸显我们网站的网站名,当然如果另有安排的可以另做安排
list-inline将所有列表项放置同一行
nav-justified是可以把一行内的所有li里面的内容平均分
text-center很好理解就是简单的居中这三者结合就可以制作一个导航栏。
然后结合我们昨天用到的col-md-X我们可以做一个简单的页面图片展示,具体的实现代码如下可以显示
关于导航内的字体颜色不一样是因为我加了一个类具体的代码可以参考代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><link rel="stylesheet" href="css/bootstrap.css" /><style>.list-inline{background-color: goldenrod;font-size: 20px;}</style></head><body><div class="container"><h1 class="page-header">welcome to my page</h1><ul class="list-inline nav-justified text-center"><li class="text-muted">第一</li><li class="text-muted">第二</li><li class="text-muted">第三</li><li class="text-muted">第四</li><li>第五</li><li>第六</li><li>第七</li><li>第八</li></ul><div class="row"><div class="col-md-3"><img src="data:images/1.jpeg" width="100%" /></div><div class="col-md-3"><img src="data:images/1.jpeg" width="100%" /></div><div class="col-md-3"><img src="data:images/1.jpeg" width="100%" /></div><div class="col-md-3"><img src="data:images/1.jpeg" width="100%" /></div></div><hr /><div class="row"><div class="col-md-3"><img src="data:images/11.jpg" width="100%"></div><div class="col-md-3"><img src="data:images/11.jpg" width="100%"></div><div class="col-md-3"><img src="data:images/11.jpg" width="100%"></div><div class="col-md-3"><img src="data:images/11.jpg" width="100%"></div></div><hr /><div class="row"><div class="col-md-3"><img src="data:images/7.jpg" width="100%"></div><div class="col-md-3"><img src="data:images/7.jpg" width="100%"></div><div class="col-md-3"><img src="data:images/7.jpg" width="100%"></div><div class="col-md-3"><img src="data:images/7.jpg" width="100%"></div></div></div></body>
</html>
bootstrap----导航栏 图片布局相关推荐
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
- 华为底部虚拟导航栏挡住布局
问题:在实现ViewPager+Fragment+侧滑栏的界面时,华为搭载Android5.0以上操作系统的手机出现底部虚拟导航栏挡住布局.如下图所示: 问题解决后: 尝试 在实现这个功能的时候,我发 ...
- BootStrap导航栏的使用
默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
- Html 5/CSS 的学习(二) —— Bootstrap 导航栏
参考 Bootstrap 导航栏 0. 导航栏类别 (1)默认导航栏:class="navbar navbar-default": (2)响应式导航栏:要折叠的内容必须包裹在cla ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- css设置导航栏背景颜色,更改bootstrap导航栏背景颜色和字体颜色
3 个答案: 答案 0 :(得分:46) 我使用以下CSS成功设置了Bootstrap导航栏的样式.你也没有在CSS中定义任何字体,这就是字体没有改变的原因.可以在here找到使用此CSS的网站. . ...
- Bootstrap导航栏始终固定在页面顶部
Bootstrap导航栏始终在页面顶部 引入文件,这是需要自己去官网下载的 <link rel="stylesheet" type="text/css" ...
- 修改bootstrap导航栏样式(颜色,高)
提示:记录bootstrap导航栏样式(颜色,高)的修改 文章目录 前言 一.bootstrap导航栏样式 (颜色,高) 的修改 前言 在写自适应网页时想使用bootstrap实现,但与原稿的有一些差 ...
- Bootstrap导航栏
导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...
最新文章
- 聊一聊IAR的workspace文件组织
- YII2 百度富文本mini版UMEditor的使用
- mysql id in set_mysql数据库中find_in_set()和in()用法区别
- LeetCode第一刷--leetcode提交格式介绍与273. Integer to English Words
- 模板模式(Template)
- 手机游戏资源 特效 显存分析工具
- 排序 oracle,oracle排序
- @PostConstruct 注解没有初始化
- Gitlab-IDEA使用教程
- 网络安全工作及其配套法律法规和规范性文件汇总目录
- 好用的医药管理软件都有哪些特点
- bootStrap 搜索框
- 我的TLS1.3之旅
- 浅谈Nacos中的CAP
- win7系统dhcp服务器设置方法,win7设定固定ip和同时支持dhcp的方法
- 【论文笔记】Weakly Supervised Discriminative Feature Learning with State Information for Person ...
- Java并没有失去它的魔力
- H5案例分享—你的数学是语文老师教的吗?
- 2018-06-27 关于小米电力猫小猫一直黄灯闪烁不匹配的问题
- python数据处理方法
热门文章
- jquery ligerui php,jQuery LigerUI操作表格
- Mac中使用Mounty对NTFS文件进行读写操作,报错“卷不能在读/写模式下重新挂载,可能是因为先前没有完全卸载(安全删除)”问题的解决
- 市面上有哪些程序化软件?
- 用Python可视化18万条《八佰》影评,看看观众怎么说?
- java安装后为什么是英文_java用到英语多吗
- matlab sil验证,科学网—径流模拟结果校准和验证图(matlab) - 张凌的博文
- 归一化数字角频率_数字角频率ω与模拟角频率Ω的理解
- win7 64位 纯净版旗舰版202104
- Word编辑页码不从第一页开始
- 让0球平局怎么算_古迪逊公园默郡德比,平局德比丨第30轮