Bootstarp中CSS的使用方法_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Bootstarp中CSS的使用方法_javascript技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含5288字,纯文字阅读大概需要8分钟。
内容图文
Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型。...
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
//禁止页面缩放(可选)
Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
关于布局
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
img-responsive 用于img元素
container 用于包裹页面上的内容的元素
- 行需要放在container,并用来创建列的水平组。
- 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。
- 行列可相互嵌套,嵌套后的自适应以父级元素为准,而不是设备宽度
- 要创建三个相等的列,则使用三个 col-xs-4,要是12个列就12个col-xs-1。
....... //可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示,col-md-push-6按照我个人的理解,是在左面浮动了6列,然后再插入元素,col-md-pull-3则是在右边浮动了3列,然后从右往左插入元素
- 媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式。
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
//对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于 @screen-sm-max,则会进行一些处理。
关于排版
- 关于文本
本行内容是在标签内
本行内容是在标签内
本行内容是在标签内,并呈现为斜体
向左对齐文本
居中对齐文本
向右对齐文本
本行内容是减弱的
灰本行内容带有一个 primary class
蓝本行内容带有一个 success class
绿本行内容带有一个 info class
深蓝本行内容带有一个 warning class
黄本行内容带有一个 danger class
红
Bootstrap 定义 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到 。
WWW
RSS
- 使用 标签,您可以在网页上显示联系信息。
- 使用
标签作为引用
这是一个带有源标题的引用。Someone famous in Source Title
- list-unstyled用于未定义样式列表ul,list-inline用于水平列表ul
- pre-scrollable使pre可滚动
内联显示代码,
显示多行代码
关于表格
通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
响应式表格布局 产品 付款日期 状态 产品1 23/11/2013 待发货
关于表单
- 在form上加上属性role="form"就会应用Bootstrap基本的表单结构,此时默认为垂直表单
- 把标签和控件放在一个带有 class .form-group 的 中。这是获取最佳间距所必需的。
- 向所有的文本元素 、
- 在form加上类calss=form-inline,那么表单元素就会变成内联的
- 在form加上类class=form-horizontal,那么表单元素就会变成水平的
1)设置表单控件padding和margin值
2)改变“form-group”的表现形式,类似于网格系统的“row”。
3)向标签添加 class .control-label。
- 复选框和单选框
1)对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。
- 当您需要在一个水平表单内的表单标签后放置纯文本时,请在
上使用 class .form-control-static。
- 禁用的输入框 input,如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性
- 对
- Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。
- .input-lg 和.input-sm可以改变输入框的高度样式
- help-block Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,请在 后使用 .help-block。
一个较长的帮助文本块,超过一行, 需要扩展到下一行。本实例中的帮助文本总共有两行。
关于按钮
按钮的大小
- class为active表示激活按钮
- class为disabled表示禁用按钮
在a和input上使用按钮class也能弄成按钮的样子,但是考虑到跨浏览器的问题还是在button上比较好。
关于图片
关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式:
- .img-rounded 圆角图片
- .img-circle 圆形图片
- .img-thumbnail 缩略图功能
关于其它样式类
- .pull-left左浮动
- .pull-right右浮动
- center-block内容居中
- .clearfix清除浮动
- .caret显示下拉式
- .close关闭图标
关于不同设备
JavaScript热搜
- Vue利用canvas实现移动端手写板的方法
- vue2.0 移动端实现下拉刷新和上拉加载更多的示例
- 解决vue-router中的query动态传参问题
- 解决使用vue.js路由后失效的问题
- 微信小程序实现换肤功能
- JS中touchstart事件与click事件冲突的解决方法
- 完美解决axios在ie下的兼容性问题
- 在vue项目中引入highcharts图表的方法(详解)
- Vue的轮播图组件实现方法
- angular基于ng-alain定义自己的select组件示例
- 详解vue移动端日期选择组件
- JS/jQuery实现DIV延时几秒后消失或显示的方法
- 微信小程序数字滚动插件使用详解
- 详解基于vue-cli配置移动端自适应
- js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
- Swiper自定义分页器使用详解
- 深入浅出webpack之externals的使用
- 微信小程序实现简单input正则表达式验证功能示例
- Vue-Access-Control 前端用户权限控制解决方案
- 浅谈Vue SSR 的 Cookies 问题
- 结合mint-ui移动端下拉加载实践方法总结
- Angular 4根据组件名称动态创建出组件的方法教程
- 微信小程序媒体组件详解(视频,音乐,图片)
- weex里Vuex state使用storage持久化详解
- jQuery图片缩放插件smartZoom使用实例详解
- 向所有的文本元素 、