两个dropdown下拉菜单,一个搜索框,一个submit不需要
加上bootstrap中文官网的导航条文字内容
效果2:不同屏宽的隐藏效果:全局css样式----响应式工具中的".hidden-sm",当小屏时,隐藏
4.然后把字体颜色背景换一下,并将导航条固定在顶部:
颜色背景:导航条----反色导航条—‘navbar-inverse’:
5.导航条固定顶部:导航条-----固定在顶部-----‘navbar-fixed-top’
6.导航条内容分散两端,把container-fluid(用于 100% 宽度)改成container类(固定宽度并支持响应式布局): 全局CSS样式----概览----布局容器
7.添加巨幕:组件—巨幕
7.1把内容改成官网里的文字,再从官网那边查看背景色的设置、文字颜色和文字的加粗weight
7.2官网中有关于巨幕高度的响应式效果,当屏宽较大时,高度较高;屏宽较小时,高度较低
7.3巨幕有一个背景图片,当background同时设置颜色和背景图片,会失效,巨幕部分变成白色,只剩下一个btn:可以把背景图片设置在伪元素上;设置伪元素充满整个父级,加了背景图片默认repeat,还要center居中一下,让背景图片跟着屏宽改变而移动(屏宽改变,巨幕中心点移动,设置center,巨幕中心点与背景图片中心点一致);
7.4官网中的背景图片颜色较淡,是设置了透明度
导航栏和巨幕部分代码: