农村自建房设计网站,建站收费标准,扫图片识别图片原图,网站想换个风格怎么做在上一篇旺财速啃H5框架之Bootstrap#xff08;四#xff09;做了基本的框架#xff0c;旺财速啃H5框架之Bootstrap#xff08;二#xff09;篇里也大体认识了bootstrap.css样式#xff0c;下面我们来学习常见的CSS操控内容篇幅。。。。… 在上一篇旺财速啃H5框架之Bootstrap四做了基本的框架旺财速啃H5框架之Bootstrap二篇里也大体认识了bootstrap.css样式下面我们来学习常见的CSS操控内容篇幅。。。。 一、响应式图片 基本样式 img src... classimg-responsive alt响应式图片 Bootstrap.css 937行 .img-responsive,
.thumbnail img,
.thumbnail a img,
.carousel-inner .item img,
.carousel-inner .item a img {display: block;max-width: 100%;height: auto;
} 定义类img-responsive为块元素、最大宽度100%height为自动看出来它没有指定具体宽度而是限定它的最大宽度不能大于容器的宽度高度自动是为了保证图片不变形。 当然这是正常放进页面的图片如果是从数据库取出来的图片那样的图片可是没有加class”img-responsive”类的哦大小可能就会变化了怎么办呢 OK自己附加样式例如你的内容容器类为content那么给里面的img写如下样式 .content img{
max-width:100%;
Height:auto;
} 这样图片再大也不会超出你的容器了并且会随容器变化而变化切记不要给图片加内嵌样式 图片类 .img-rounded 为图片添加圆角 (IE8 不支持) .img-circle 将图片变为圆形 (IE8 不支持) .img-thumbnail 缩略图功能 .img-responsive 图片响应式 (将很好地扩展到父元素) 二、网页显示HTML代码 要想在网站上显示html源码可以使用code或pre标记 pcodelt;headergt;/code 作为内联元素被包围。/p
p如果需要把代码显示为一个独立的块元素请使用 lt;pregt; 标签/p
pre
lt;articlegt;
lt;h1gt;Article Headinglt;/h1gt;
lt;/articlegt;
/pre 查询效果《猛点这里》 三、表单元素 Bootstrap针对表单有三种布局方式垂直表单默认、内联表单、水平表单 添加表单的步骤 1、向父 form 元素添加 roleform 2、把标签和控件放在一个带有 class .form-group 的 div 中。 3、向所有的文本元素 input、textarea 和 select 添加 class .form-control 默认表单 form roleformdiv classform-grouplabel forname名称/labelinput typetext classform-control idname placeholder请输入名称/divdiv classform-grouplabel forinputfile文件输入/labelinput typefile idinputfilep classhelp-block这里是块级帮助文本的实例。/p/divdiv classcheckboxlabelinput typecheckbox 请打勾/label/divbutton typesubmit classbtn btn-default提交/button
/form 查询效果《猛点这里》 内联表单 原理向 form 标签添加 class .form-inline form classform-inline roleformdiv classform-grouplabel classsr-only forname名称/labelinput typetext classform-control idname placeholder请输入名称/divdiv classform-grouplabel classsr-only forinputfile文件输入/labelinput typefile idinputfile/divdiv classcheckboxlabelinput typecheckbox 请打勾/label/divbutton typesubmit classbtn btn-default提交/button
/form 查看效果《猛点这里》 水平表单 原理向父 form 元素添加 class .form-horizontal form classform-horizontal roleformdiv classform-grouplabel forfirstname classcol-sm-2 control-label名字/labeldiv classcol-sm-10input typetext classform-control idfirstname placeholder请输入名字/div/divdiv classform-grouplabel forlastname classcol-sm-2 control-label姓/labeldiv classcol-sm-10input typetext classform-control idlastname placeholder请输入姓/div/divdiv classform-groupdiv classcol-sm-offset-2 col-sm-10div classcheckboxlabelinput typecheckbox 请记住我/label/div/div/divdiv classform-groupdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-default登录/button/div/div
/form 查看效果《猛点这里》 四、按钮 按钮最基本的样式bootstrap.css 2782行 .btn {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: normal;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;
} 我们在用bootstrap按钮的时候都加上class”btn”看不同的按钮效果 !-- 标准的按钮 --
button typebutton classbtn btn-default默认按钮/button!-- 提供额外的视觉效果标识一组按钮中的原始动作 --
button typebutton classbtn btn-primary原始按钮/button!-- 表示一个成功的或积极的动作 --
button typebutton classbtn btn-success成功按钮/button!-- 信息警告消息的上下文按钮 --
button typebutton classbtn btn-info信息按钮/button!-- 表示应谨慎采取的动作 --
button typebutton classbtn btn-warning警告按钮/button!-- 表示一个危险的或潜在的负面动作 --
button typebutton classbtn btn-danger危险按钮/button!-- 并不强调是一个按钮看起来像一个链接但同时保持按钮的行为 --
button typebutton classbtn btn-link链接按钮/button 查看效果《猛点这里》 还有按钮大小、按钮状态的类定义 详细请看http://noob.d8jd.com/noob/5/113.html 五、字体图标 好这个我在前面讲过说直一点就是用字体做成看上去是图标的样式好处当然是矢量可像操作普通文字那样操作图标大小、颜色什么的…。 字体图标不是bootstrap所有很多网站都有自己的一套图标。 阿里巴巴字体图标http://www.iconfont.cn/ Font Awesome: http://fontawesome.dashgame.com/(很不错的) Fontellohttp://fontello.com/ Icomoon: http://icomoon.io/app/#/select Glyphicon Halflingshttp://glyphicons.com/ 这里说一下bootstrap 3.x版本的字体图标运用方式所先要把字体图标所须要的文件放到bootstrap.css目录同级目录文件夹名为fonts里面的文字有4个。 glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff bootstrap.css与字体相关CSS说明267行 font-face {font-family: Glyphicons Halflings;src: url(../fonts/glyphicons-halflings-regular.eot);src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format(embedded-opentype), url(../fonts/glyphicons-halflings-regular.woff) format(woff), url(../fonts/glyphicons-halflings-regular.ttf) format(truetype), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(svg);
}
.glyphicon {position: relative;top: 1px;display: inline-block;font-family: Glyphicons Halflings;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
} font-face定义网页引入的字体文件 .glyphicon class 声明一个从顶部偏移 1px 的相对位置呈现为 inline-block声明字体规定 font-style 和 font-weight 为 normal设置行高为 1。除此之外使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性 使用方法 span classglyphicon glyphicon-search/span 查看效果 更多字体图标http://noob.d8jd.com/noob/5/117.html OK今天先到这里… 转载于:https://www.cnblogs.com/top8/p/6255943.html
