栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

《深入理解Bootstrap》学习笔记(五)

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

《深入理解Bootstrap》学习笔记(五)

第四章 CSS组件
——4.1 小图标
——4.2 下拉菜单
——4.3 按钮组
——4.4 按钮下拉菜单
——4.5 输入框组
——4.6 导航
——4.7 导航条
——4.8 面包屑导航
——4.9 分页导航
——4.10 标签
——4.11 徽章
——4.12 大屏幕展播
——4.13 页面标题
——4.14 缩略图
——4.15 警告框
——4.16 进度条
——4.17 媒体对象
——4.18 列表组
——4.19 面板
——4.20 洼地

4.1 小图标
任何元素标签引入class样式glyphicon glyphicon-*均可获取小图标

    
    
    
    

4.2 下拉菜单
下拉菜单要配合下拉菜单Js插件使用,这里只讲解下拉菜单写法,第五章Javascript插件会详细讲解下拉菜单配合Js的用法。

    
 
    

下拉菜单默认左对齐(pull-left),样式pull-right可使下拉菜单右对齐。
4.3 按钮组

基本用法

    
 
 
 
    

按钮工具栏

    
 
     
     
     
 
 
     
     
     
 
 
     
     
     
 
    

按钮尺寸设置
bootstrap提供了四种按钮组尺寸:btn-group-lg、普通、btn-group-sm、btn-group-xs
嵌套分组
将下拉菜单与按钮组结合。

    
 
 
 
 
     
     
 
    

垂直分组

   
   
   

自适应分组

    
 
 
 
    

4.4 按钮下拉菜单
将按钮和下拉菜单结合。

  
  

默认下拉菜单为向下显示,将最外层的dropdown换位dropup样式就可向上显示。尺寸大小问题与按钮大小一致。
4.5 输入框组
注意按钮组(btn-group)和输入框组(input-group)的不同。

    $
    
    .00

input-group-addon样式也可以放按钮、单选框、复选框、小图标等元素。
4.6 导航
导航特效也需要和Js插件配合才可实现导航选项卡功能,这里只展示导航的样式。
选项卡导航

胶囊式选项卡导航

堆叠式导航
堆叠式导航尽量只在胶囊式导航的基础上实现。

自适应导航
在之前两种导航的基础上添加nav-justified样式。
二级导航
可以再一级导航的基础上添加下拉菜单特效实现二级导航。

4.7 导航条
区别导航(nav)和导航条(navbar)。
基础导航条

导航中的表单

导航条顶部固定或底部固定
使用navbar-fixed-top和navbar-fixed-bottom将导航条固定在顶部和底部。
响应式导航条
需要和Js插件配合使用。
导航条总结:导航条组件涉及部分较多,几乎和所有的组件都有关联,下拉菜单、按钮、导航、响应式、图标、颜色、浮动、文本等都可用在导航条中,并且导航条几乎在每个网站都会用到,所以,一定要联系各种导航条的组合使用。
4.8 面包屑导航

4.9 分页导航

页码分页

  • «上一页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 下一页»

翻页

  • 上一页
  • 下一页

4.10 标签

Default
Primary
Success
Warning
Danger
Info

4.11 徽章

Inbox 42

4.12 大屏幕展播
.jumbotron样式的应用。
4.13 页面标题

  Example page header Subtext for header

4.14 缩略图
给图片等内容加上边框样式。
4.15 警告框
警告框需要和Js插件配合使用。

    
    Warning!
    

Best check yo self, you're not looking too good.

4.16 进度条
progress、progress-bar、progress-striped等样式的配合使用。
4.17 媒体对象
内容略。
4.18 列表组

  • Javascript编程精解
  • Javascript设计模式
  • Javascript启示录
  • 当前你正在读的书
  • 正在构想的书

可与徽章、标签、下拉菜单等组件结合使用。
4.19 面板

    面板header
    
 这里是面板内容
    
    面板footer

面板可做弹出框,可与表格、列表组嵌套使用。
4.20 洼地

    

Some default panel.

注意,这里是引用内容!

不是很明白用在什么地方,可以做展示用。

CSS组件总结: CSS组件是Bootstrap三大基础部分之一,针对网站常用模块设置,要想掌握熟练不仅要熟记bootstrap设定的各种样式组合,还要进行大量的联系。笔记做到这里其实已经有凑数的嫌疑了,因为我发现不论我笔记写成什么样都没有完整做一个网站掌握的快。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243464.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号