Boostrap学习笔记
来源:互联网 发布:mid函数的使用方法vb 编辑:程序博客网 时间:2024/05/20 13:05
导航栏加链接
向右浮动: 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.分页- 1
- 2
- 3
- 默认居中
- 1
- 2
- 3
全局显示、排版和链接:
基本的全局显示:
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 中找到。
- boostrap学习笔记2
- boostrap学习笔记
- Boostrap学习笔记
- Boostrap学习笔记
- Boostrap 笔记
- Boostrap学习笔记一: popover用法
- boostrap 导航栏--笔记
- Boostrap框架学习总结
- boostrap 对话框 学习
- Datatables嵌入Boostrap使用笔记
- Boostrap
- boostrap
- Boostrap入门+样式学习--壹--
- Boostrap入门+样式学习--叁--
- Boostrap入门+样式学习--肆--
- Bootstrap学习笔记1——Boostrap下载与引用说明
- 框架学习boostrap MVC beego django laravel
- 第三章 Boostrap 框架解析--栅格系统案例 笔记1
- C语言例题
- 正则表达式
- woa鲸鱼优化算法matlab源码
- 持续更新-爬虫网上练习记录
- Tomcat优化详解
- Boostrap学习笔记
- Android主题
- mysql存储过程
- Codeforces Round #451 (Div. 2) B. Proper Nutrition
- Gym
- java设计模式学习—抽象工厂模式
- Guava篇-缓存
- 浅谈TCP socket
- 二叉树遍历