导航栏加链接
向右浮动: navbar-right
给navbar 内容居中,用 class=”container”包裹
加个搜索栏
向上面的元素添加 role=”navigation”,有助于增加可访问性。
1、主要进行了内部区域的划分,如:head、其他区域;以及导航条位置的定位
2、折叠器实现(在4.0已移除),也就是navbar-collapse类,代替的是collapse,在按钮上面弹出隐藏层
2.1、Navbar-collapse:在大于breakpoint时,会强制显示(由于collapse默认是隐藏的)
3、内容支持nav、brand、form、toggler
4、Navbar-toggler(4.0移除):设定在屏幕小于breakpoint值时(768)显示,而在4.0则直接用collapse来展示此按钮,没有屏幕大小的限制,navbar-toggle的应用也要结合collapse使用
5、Navbar-static-top:只是增加了zIndex,去掉了圆角、边框宽度等内容。
6、Navbar-fixed-top/bottom:都是定位在上方、下方,有浮动影响
7、Navbar-brand:品牌,可以放网页名称、公司Logo等内容
8、Navbar-toggle:用于收缩的单击的图片,他会在小于breakpoint时显示,大于此值就隐藏(并且,toggle显示是右浮动,且作为相对定位元素):
9、Navbar-nav:原nav的基础进行了一些兼容设置,主是在breakpoint-max下的样式调整,以及在breakpointg下的样式调整,还是去掉默认的背景色,shadow等内容
10、Navbar-form:主要调整所有form都为行内元素
11、Navbar-text、navbar-btn:都在默认的基础上做了相就的兼容设置
12、Navbar提供了default、inverse两种主题,各主题下对其各自的部件都做了相应的样式兼容处理
13、导航条本身的样式不多,本身只提供了toggle、brand两个内容,主要提供了两种主题,以及将dropdown、collapse、form、nav四个部件的组合。
面板panel
样式:panel-default panel-warning panel-primary panel-success panel-error 使footer中字体变小,变淡: 将问题用text-multed的div套起来 表格table —-奇数行和偶数行颜色不同 table-hover table-bordered加边框 给tr td加类名,改变样式 其他 1.分页 另一种 用active表示当前页 显示文章当前路径 随大容器变化 提示信息 投票列表全局显示、排版和链接:
基本的全局显示:
Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。
排版::
使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
链接样式:
通过属性 @link-color 设置全局链接的颜色。
对于链接的默认样式,如下设置:
`a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
`
所以,当鼠标悬停在链接上,或者点击过的链接,颜色会被设置为 #2a6496。同时,会出现一条下划线。
除此之外,点击过的链接,会呈现一个颜色码为 #333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽,且对于基于 webkit 浏览器有一个 -webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为 -2 像素。
以上所有这些样式都可以在 scaffolding.less 中找到。