- 1、本文档共9页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
bootstrap中文手册南bootstrap中文手册指南bootstrap中文手册指南bootstrap中文手册指南
Bootstrap简易指南
看完使用手册后所作的笔记,可以当做简易使用指南使用。
1.框架
1.1全局样式
使用HTML5的doctype,scaffolding.less中定义全局样式,从2开始使用normalize.css,并使用reset.less进行简化
1.2默认栅格系统
940px宽12列栅格,使用row与span[NUM]的class来控制,使用offset[NUM]来控制偏移,于non-fluid可以直接嵌套,提供了四种响应式方案
1.3流动栅格系统
基于百分比,将row改为row-fluid即可使用,内嵌注意宽度是按照父列的百分比进行计算的
1.4自定义栅格
于variables.css中改变变量,默认列12,宽60px,间隔20px,要保证响应性还得修改responsive.less中内容
1.5布局
container为940px居中,container-fluid则为流体布局
1.6 响应式设计
responsive.less中提供了一组media query:
智能手机《=480px;流式列,非固定宽度
垂直平板《=767px;流式列,非固定宽度
水平平板》=768px;42px 20px
默认》=980px; ? ? ?60px ?20px
大分辨率》=1200px;70px 30px
要求添加meta标签,meta name=”viewport” content=”width=device-width, initail-scale=1.0″
有诸如.visible-phone等支持类
2.基础CSS
2.1 排版
整个排版单位基于variables.less中@baseFontSize与@baseLineHeight两个变量;
强调:string加粗,em倾斜,abbr缩写【title属性存放显示信息,.initialism会减小缩略词字体】,address【使用br换行】
引用:blockquote【cite属性存放来源URL,.pull-left或right决定内容居左右】,small用于引言作者【会在内容前加入破折号】
列表:ul无序号有黑点,ul.unstyled无样式,ol有数字序号,dl描述,dl.dl-horizontal水平描述
2.2代码
code行级代码,pre块级【需要转义,.pre-scrollable可以设置350px最大高度】,应用.prettyprint和.linenums来美化代码【使用google prettify】
2.3表格
table thead【tr】 tbody【tr】tr【td或th】th【必须在thead之内】 caption;
.table行之间有水平线分割【2.0开始为默认】 .table-borderd 【边角为圆角】.table-striped 奇偶分开【使用:nth-child ie7-8不支持】 .table-condensed 紧凑竖直方向padding减半 几个可以组合使用
2.4表单
四种表单:.form-vertical【2.0后默认,控件标签文字左对齐】.form-inline【左对齐,控件inline-block】 .form-search【文本框圆化】 .form-horizontal【左浮动,标签与控件居于同一行且文字右对齐】
支持控件:文本输入框,单选,复选,下拉,多选,上传,文本域
控件组:.control-group .control-label以及.controls【默认label应该与控件在同一行?】
设计了各种控件状态【如focus,disabled,去除webkit的outline】,包含.error .warning .success验证样式
扩张控件:.span*来指定输入框大小,使用.input-mini或small或medium或big来指定input和select控件大小,2.0开始对.checkbox或.radio应用.inline即可实现行级,用label.checkbox包含input[type=checkbox]即可罗列,前置或后置文本保证.add-on与input在同行, .help-inline与.help-block设置帮助文本
2.5 按钮
可以应用到a button及input标签上,.btn .btn-primary .btn-info等样式【ie9不兼容】,.btn-large small mini等尺寸,.disabled类或disabled属性可以禁用
2.6 图标
使用.icon-前缀设置,用ix显示图标,
您可能关注的文档
- apqp培训2.ppt
- apt-1000s污水硫化测定仪apt-1000s污水硫化物测定仪apt-1000s污水硫化物测定仪apt-1000s污水硫化物测定仪.doc
- app代理介绍.ppt
- apqp表单大全apqp表大全单大全.doc
- apqp全套表样apqp全表样套表样.doc
- arc gis 10.0破教程arc gis 10.0破解教程arc gis 10.0破解教程arc gis 10.0破解教程.doc
- arcgis英汉对照arcis英汉对照arcgis英汉对照arcgis英汉对照.doc
- ards的诊断与治疗ard的诊断与治疗ards的诊断与治疗ards的诊断与治疗.ppt
- apqp管理程序apqp管程序理程序.doc
- ards诊断和治疗指南ars诊断和治疗指南ards诊断和治疗指南ards诊断和治疗指南.ppt
- 2024年中国钽材市场调查研究报告.docx
- 2024年中国不锈钢清洗车市场调查研究报告.docx
- 2024年中国分类垃圾箱市场调查研究报告.docx
- 2024年中国水气电磁阀市场调查研究报告.docx
- 2024年中国绿藻片市场调查研究报告.docx
- 2010-2023历年初中毕业升学考试(青海西宁卷)数学(带解析).docx
- 2010-2023历年福建厦门高一下学期质量检测地理卷.docx
- 2010-2023历年初中数学单元提优测试卷公式法(带解析).docx
- 2010-2023历年初中毕业升学考试(山东德州卷)化学(带解析).docx
- 2010-2023历年初中毕业升学考试(四川省泸州卷)化学(带解析).docx
最近下载
- 初中历史_中华民国的创建教学设计学情分析教材分析课后反思.doc
- H7车组合仪表内部参数调节方法 (1).pdf VIP
- 重汽豪沃(HOWO)T5G SAC仪表、驾驶室过度线针脚定义驾驶室电器部件讲解.pdf VIP
- T5T7NanoBCU TFT仪表服务站维修培训手册.pdf VIP
- 钢琴谱学习Parla Piu Piano 降E-降G.pdf
- T7H TFT仪表、NanoBCU系统简介.ppt VIP
- 《生活饮用水卫生标准》(GB5749-2022).pdf
- 2024年监理工程师继续教育试题及答案(74分)-延续注册-必修课.docx
- 杭州银行测评笔试题目.pdf
- 危险化学品安全管理条例.ppt
文档评论(0)