位置: 编程技术 - 正文

Bootstrap中CSS的使用方法(bootstrap css框架)

编辑:rootadmin

推荐整理分享Bootstrap中CSS的使用方法(bootstrap css框架),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap.css.map,bootstrap core css,bootstrap css,bootstrap core css,bootstrap.css.map,bootstrap css,v3.bootstrap.css,bootstrap.min.css作用,内容如对您有帮助,希望把文章链接给更多的朋友!

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型。

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

关于布局

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多列。

img-responsive 用于img元素

container 用于包裹页面上的内容的元素

行需要放在container,并用来创建列的水平组。 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。

行列可相互嵌套,嵌套后的自适应以父级元素为准,而不是设备宽度 要创建三个相等的列,则使用三个 col-xs-4,要是个列就个col-xs-1。 媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }//对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于 @screen-sm-max,则会进行一些处理。

关于排版

关于文本

Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 <abbr> title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到 <abbr>。

使用 <address> 标签,您可以在网页上显示联系信息。 使用<Blockqoute>标签作为引用 list-unstyled用于未定义样式列表ul,list-inline用于水平列表ul pre-scrollable使pre可滚动 <code>内联显示代码,<pre>显示多行代码

关于表格

Bootstrap中CSS的使用方法(bootstrap css框架)

通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 px)。当在大于 px 宽的大型设备上查看时,您将看不到任何的差别。

关于表单

在form上加上属性role="form"就会应用Bootstrap基本的表单结构,此时默认为垂直表单 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。 在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,控制它们显示在同一行上。

当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static。 禁用的输入框 input,如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性 对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。 Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。 .input-lg 和.input-sm可以改变输入框的高度样式 help-block Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,请在 <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关闭图标

关于不同设备

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

标签: bootstrap css框架

本文链接地址:https://www.jiuchutong.com/biancheng/380360.html 转载请保留说明!

上一篇:Javascript实现图片轮播效果(一)让图片跳动起来(js调用图片代码)

下一篇:Javascript实现图片轮播效果(二)图片序列节点的控制实现(javascript图片)

  • 怎么算一般纳税人
  • 劳务报酬所得税可以退税吗
  • 柴油车尾气处理液会计分录
  • 税法里面的损耗是什么
  • 制造费用在借方表示什么
  • 应交税费销项税在借方还是贷方
  • 月报和季度报的区别
  • 公司购买的电脑怎么做账
  • 向境外分派红利怎么计算缴纳企业所得税
  • 分支机构是否需要进行企业所得税汇算清缴申报
  • 怎么算应纳企业所得税
  • 出现销项负数
  • 所税税汇算补交上一年度税金如何做账务处理?
  • 专利权转让的净收益计入
  • 意外死亡公司赔偿多少标准
  • 武汉房产税多少
  • 体检合同属于什么合同
  • 空调安装费税率是6%
  • 餐饮消费,碰到商家不愿意开发票怎么办?
  • 金蝶kis迷你版操作手册
  • 对外投资的风险及对策
  • 商业企业做设备维修收入会计分录
  • 花卉租赁属于哪个税目
  • 先收到发票后到货分录
  • 本月无生产,有折旧怎么办
  • 安卓手机数据迁移到红米手机
  • PHP:session_status()的用法_Session函数
  • 企业所得税汇算清缴调增的项目有哪些
  • 增值税进项如何取得更多
  • 社保征集单是什么样子的
  • php查询今天日期
  • 最小的成像传感器
  • 企业实行股权激励的作用
  • php数组分为哪两种
  • Diffusion-GAN: Training GANs with Diffusion 解读
  • 赫尔辛基哈加赫利亚大学
  • 月末结转本年利润吗
  • 微服务框架图
  • phpcms上传视频
  • 上月购进固定资产次月退货已开具红字发票如何入账
  • 账面未分配利润等于净利润?
  • 企业其他应付款余额非常大的原因
  • 帝国cms使用手册
  • 小规模纳税人劳保用品可以抵扣吗
  • 代收代缴水费收不上来怎么办
  • 收到保险赔款入什么科目
  • 小规模小于30万之前计提的税金及附加税
  • 递延所得税资产和负债怎么计算
  • 工程材料发票备注要求
  • sqlserver2019删除
  • 股权变更如何交税
  • 应交企业所得税是什么科目
  • 残保金操作流程
  • 劳务公司在异地施工要在哪里缴税
  • 税控系统技术维护费的申报抵扣方法
  • 出口退税进项税额转出怎么申报
  • 房地产企业简易计税和一般计税的区别
  • 非居民企业股权转让特殊性税务处理
  • 什么叫做未入账金额
  • 网吧的收入怎么做账
  • 检测费专用发票会计分录
  • 发票入账是借还是贷
  • 融资租赁公司收费标准
  • 加盟费交税
  • 判断成本法核算方法
  • 建账的依据是什么
  • Windows Server 2008下共享资源访问走捷径
  • vpngui.exe是什么进程
  • 安装win7旗舰版用户名和密码是多少
  • mac上播放器
  • macbook air xcode开发
  • windows10故障
  • html中title的作用
  • jquery右击事件
  • sequelize join
  • domcer下载
  • 税务局稽查科有什么处理企业的办法
  • 美国对中国纺织服装关税
  • 河南商丘医疗保险在微信上怎么交
  • 租房税费怎么算的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设