Bootstrap基本使用
Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码)。Bootstrap提供了全面的基本及组件样式并自带了13个jQuery插件(模态对话框、标签页、滚动条、弹出框等),可满足常用开发需要,而且还根据需要定制。另外,Bootstrap提供了优雅的HTML和CSS规范,使用者也可以参考学习。本文作者(jawidx)仅在结构层面对Bootstrap进行介绍。
工具/原料
- Bootstrap
全局样式
- 1
Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型,即在页面顶部添加“<!DOCTYPE html>”
- 2
布局容器:Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid(占据全部视口viewport的容器)容器。
- 3
栅格系统,Bootstrap 提供了一套最多12列的流式栅格系统,通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。
- 4
Bootstrap 排版、链接样式设置了基本的全局样式。
font-size 设置为 14px,line-height 设置为 1.428。
<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
END
基础样式
- 1
【排版】,
1. 标题,可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式,标题内通过<small> 标签或带.small 类的元素标记副标题。
主体文本:.lead 类让段落突出显示。
2. 内联文本,使用<mark> 标签表示标注文本,<del>删除,<s>无用,<ins>插入,<u>下划线,<small>小号(父容器字体大小的 85%),<strong>着重,<em>斜体。
3. 文本对齐类,text-left,text-center,text-right,text-justify,text-nowrap
4. 文本大小写类,text-lowercase,text-uppercase,text-capitalize
5. 缩略语类,为 <abbr> 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例:<abbr title="attribute" class="initialism">attr</abbr>
6. 地址,以日常使用的格式呈现,在行结尾加 <br> 保留需要的样式即可。
7. 引用,将 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用,建议用 <p> 标签。
8. 列表,list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。list-inline类通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。dl-horizontal类让 <dl> 内的短语及其描述排在一行。
- 2
【代码】
<code> 标签包裹内联样式的代码片段,
<kbd> 标签标记用户通过键盘输入的内容,
<pre> 展示代码块 。可用pre-scrollable 类设置最高350px带垂直滚动条。
<var> 标签标记变量,
<samp> 标签标记程序输出的内容。
- 3
【表格】
.table 类指定基本样式,
.table-striped 条纹样式,
.table-bordered 类为边框样式,
.table-hover 类带鼠标悬停样式,
.table-condensed 类紧凑样式。
状态类(行或单元格设置颜色):active,success,info,warning,info。
将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其
响应式表格: 会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
- 4
【表单】
1. 基本实例,所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
不要讲表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
form-group,input-group,control-group,
2. 内联表单,<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
在内联表单中单选/多选框控件的宽度设置为 width: auto;
如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label 设置 .sr-only 类将其隐藏。
3. 水平排列的表单
通过为表单添加 .form-horizontal 类改变 .form-group 的行为,使其表现为栅格系统中的行(row)
4. 多选和单选框
.radio、.radio-inline、.checkbox、.checkbox-inline 。
5. 静态控件
水平布局的表单中,如需将一行纯文本和 label 元素放置于同一行,为 <p> 元素添加 .form-control-static类即可。
6. 控件状态
.disabled类禁用控件,为<fieldset> 设置disabled 时则禁用包含的所有控件。
a标签不受此类影响。
readonly 属性可以禁止用户输入
.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
你还可以针对校验状态为输入框添加额外的图标(注意依赖于label标签)。只需设置相应的 .has-feedback 类并添加正确的图标即可。
7. 控件尺寸
通过 .input-lg .input-sm类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度
通过添加 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
用栅格系统中的列(column)包裹输入框或其任何父元素,都可很容易的为其设置宽度。
8. 辅助文本
help-block类,针对表单控件的“块(block)”级辅助文本。
- 5
【按钮】
1. 基本样式,btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active
2. 展现形式,btn-link、btn-block、close
3. 尺寸样式,.btn-lg、.btn-sm 、.btn-xs 。
可通过 <a>、<button> 或 <input> 元素应用按钮类,但建议用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。
- 6
【图片】
图片形状,img-rounded,img-circle,img-thumbnail,IE8 不支持 CSS3 中的圆角属性。
- 7
【辅助】
text-muted、text-primary、text-success、text-info、text-warning、text-danger
bg-primary、bg-success、bg-info、bg-warning、bg-danger、
三角符号,caret
浮动
居中
END
组件样式
- 1
【图标】
200个来自 Glyphicon Halflings 的字体图标,
图标类只能应用在空元素上,且不可与其它组件联合使用。
<span class="glyphicon glyphicon-search"></span>
- 2
【菜单】
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里
菜单对齐:默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐
菜单分组:dropdown-header表描述项,.disabled 表禁用项
向上弹出: .dropup 类就能使触发的下拉菜单朝上方打开
- 3
【按钮组】
按钮组.btn-group,通过.btn-group-* 指定组中按钮尺寸。
按钮栏.btn-toolbar
钮垂直堆叠排列显示btn-group-vertical
两端对齐排列的按钮组btn-group-justified
- 4
【导航】
标签页.nav-tabs 类依赖 .nav 基类。
胶囊式标签页.nav-pills 类,添加 .nav-stacked 类改为垂直堆叠。
.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。
navbar navbar-default
对于不包含在 <form> 中的 <button> 元素,加上 .navbar-btn 后,可以让它在导航条里垂直居中。
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐,
.navbar-text
.navbar-link
.navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。
.navbar-fixed-top 类可以让导航条固定在顶部
.navbar-fixed-bottom 类可以让导航条固定在底部
.navbar-static-top 类可让导航条随着页面向下滚动而消失。
.navbar-inverse 类可以改变导航条的外观。
breadcrumb 创建带有层次的导航结构(面包屑)。
- 5
【分页】
pagination,并根据情况对页码使用.disabled 类、 .active 类。
.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
pager上一页和下一页的简单翻页。并可通过previous,next类标示。
- 6
【标签】
label标签基类,可通过label-default, label-primary, label-success, label-info, label-warning, label-danger改变标签的外观。
badge,可以很醒目的展示新的或未读的信息条目。
- 7
【其它】
缩略图
提示框
进度条
媒体对象等
END
定制样式
- 1
BootStrap提供了根据自己需要的组件及jquery插件进行定制,使用者也可以直接修改Less源码。
END
总结
本篇经验仅从全局简单介绍Bootstrap的内容,细节部分并不具体,Bootstrap的使用非常灵活,可以对各种组件进行合并使用(如:为标签页项 添加带下拉菜单),建议使用过程中实时参考官方文档,官方文档有更详细的下载及使用说明,针对具体样式有直观样例,而且有丰富的主题案例。
转载于:https://www.cnblogs.com/jymz/p/4053613.html
Bootstrap基本使用相关推荐
- SpringCloud配置文件 application.yml和 bootstrap.yml区别,执行顺序
说在前面 SpringBoot默认支持properties和YAML两种格式的配置文件.前者格式简单,但是只支持键值对.如果需要表达列表,最好使用YAML格式.SpringBoot支持自动加载约定名称 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
- Bootstrap 栅格系统 理解与总结
Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
- 基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理...
在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率.我在较早时期的EasyUI的Web框架上, ...
- Bootstrap学习的点点滴滴
1)网站: http://www.bootcss.com/ http://v3.bootcss.com/getting-started/#download https://github.com/twb ...
- bootstraptable 汇总_JS组件系列——表格组件神器:bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- bootstrap跟vue冲突吗_知道微服务,但你知道微前端吗?
在 toB 的前端开发工作中,我们往往就会遇到如下困境: 工程越来越大,打包越来越慢 团队人员多,产品功能复杂,代码冲突频繁.影响面大 内心想做 SaaS 产品,但客户总是要做定制化 不同的团队可能有 ...
- bootstrap 新闻列表_kuapingUI 2.2 版本发布,跨屏 UI-bootstrap 大组件 UI 框架
kuapingUI 2.2 版本发布,增加了一个比较实用的工具栏web组件,是由分享按钮组 + 联系按钮组构成,分享按钮组包含了 QQ空间.朋友圈.QQ.微信.微博等分享:联系按钮组包含了 微信.QQ ...
- Bootstrap框架和inconfont、font-awesome使用
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
- Bootstrap笔记
Bootstrap使用: 下载Bootstrap,用于生产环境的 Bootstrap不需要安装 解压文件到任意目录 创建index.html,在该页面编写代码 页面起始位置添加<link rel ...
最新文章
- 二维前缀和+差分 HDU6514 Monitor
- 中国计算机学会CCF推荐国际学术会议和期刊目录-数据库/数据挖掘/内容检索
- TortoiseGit for windows安装与配置
- python-数据结构-栈
- elk中kibana中如何显示写入elasticsearch的数据
- safe-rm替换系统的rm
- Linux基础之文件权限详解
- python调用shell该引用到什么类_python调用shell, shell 引用python
- C++ 文本文件的读取和写入
- uniapp App权限开启
- 淘宝类目运营方法 怎么快速获取流量和销量
- java网络游戏后台管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
- PDD订单详情接口解密,需要有anti_content(crawlerInfo)
- 2021-06-10
- linux下使用ffmpeg将amr转成mp3(转)
- 趣谈唯一邀请码生成方法
- 专利申请需要缴纳的费用
- INFORMATIC 7 server 服务启动后自动关闭
- 万物皆可 Hook,探究 Xposed 框架 Hook 原理
- 这几款实用的电脑软件推荐给你
热门文章
- VisualStudio使用GIT
- 大学生毕业如何选择职业?
- [转]Javascript 中 String.replace( ) 的妙用
- ubuntu下用postfix搭建邮件服务器
- 解决问题--修改weblogic密码后无法启动以及如何解密weblogic的3DES密文
- 流行的Spring Boot + Vue架构整合开发的网易云,附源码!
- 沸腾!阿里又开源了一项自研核心技术!
- Spring知识点简介
- 开发者的盛宴Google I/O 2016
- pygame 文字输入交互_如何在pygame中创建交互式对象?