博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrap框架的使用
阅读量:6906 次
发布时间:2019-06-27

本文共 1316 字,大约阅读时间需要 4 分钟。

         bootstrap

1.首先要引入外部css文件在html中!

bootstrap.css  orbootstrap.min.css

bootstrap框架和960框架是类似的!

首先来看如何在table里面加入框架样式:

table-striped 可以使奇数行的背景色设置为灰色!

table-border 可以使边框显示!

table-hover 可以让鼠标悬停在的行的背景变为灰色!

table-condensed 可以使行间距变小!

成功或积极动作
注意
危险
姓名 年龄 职业
张三 18 程序员

active、succes、warning、danger都可以使背景发生改变!样式都不一样!

且是响应模式:

这样做在小屏幕上看的时候会出现水平滚动条,大屏幕自动消失!

2.bootstrap栅格系统和表单

栅格系统和960框加一样!

一共有四种栅格模式!分别为col-xs-12(超小屏幕),col-sm-12(小屏幕)。col-md-12(中屏幕)、col-lg-12(大屏幕)

Example block-level help text here.

以上就是用框架写得一个简单的表单!如果在div clas=“form-group”中吧group变为inline就变成了内年表单!改变成horizontal就成了水平表单!

#3.bootstrap对button的改变!

btn-lg大按钮!btn-md标准按钮!btn-sm小按钮!btm-xs小按钮!

class="btn btn-success btn-lg" 成功样式! btn-info信息样式! btn-warning警告样式! btn-danger危险样式!

如果要一行的按钮这需要加 class=“btn-block”

如果需要添加不可点击状 disabled="disabled"

4.bootstrap 对图片的处理!

——用于构建圆形的图片——用于添加简单的边框——用于构建圆角的图片

转载于:https://www.cnblogs.com/12315-/p/4777456.html

你可能感兴趣的文章
Asp.net 服务器Application,Session,Cookie,ViewState和Cache区别
查看>>
mongodb和一些前端js的小方法笔记
查看>>
记一印象深刻的编程error
查看>>
Tomcat配置管理员账号
查看>>
centos FTP服务器的架设和配置
查看>>
深度:ARC会导致的内存泄露
查看>>
【Android】第18章 位置服务和手机定位—本章示例主界面
查看>>
如何让 protected internal 跨程序集!
查看>>
结对编程作业总结2
查看>>
2018-2019-1 20165231 《信息安全系统设计基础》第七周学习总结
查看>>
转 10 个最佳的 Node.js 的 MVC 框架
查看>>
Linux学习笔记(六)-Linux服务程序的安装和卸载
查看>>
转 @JoinColumn 详解
查看>>
mysql 主从复制
查看>>
详解C/C++预处理器
查看>>
阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件
查看>>
随机产生id字符串
查看>>
(十七)SpringBoot之使用异步消息服务jms之ActiveMQ
查看>>
第19讲 | 上手搭建一条自己的智能合约
查看>>
Matlab绘制空间几何图
查看>>