RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
bootstrap表单-创新互联

1.bootstrap表单

目前成都创新互联已为上1000家的企业提供了网站建设、域名、网页空间、网站改版维护、企业网站设计、筠连网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

(1)form 声明一个表单域
(2)form-inline 内联表单域
(3)form-horizontal 水平排列表单域
(4)form-group 表单组、包括表单文字和表单控件
(5)form-control 文本输入框、下拉列表控件样式
(6)checkbox check-inline 多选框样式
(7)radio radio-inline 单选框样式
(8)input-group 表单控件组
(9)input-group-addon 表单控件组物件样式
(10)input-group-btn 表单控件组物件为按钮的样式
(11)form-group-lg 大尺寸表单
(12)form-group-sm 小尺寸表单





表单








表单















        




bootstrap表单

2.bootstrap容器

container-fluid流体
container
。1170
。970
。750
。100%

3.bootstrap响应式查询区间:
(1)>=768
(2)>=992
(3)>=1200





container




流体容器


响应式容器

bootstrap表单

4.bootstrap栅格系统

bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统:

(1)col-lg-大于1200排成一行,小于1200分别占一行
(2)col-md-大于992排成一行,小于992分别占一行
(3)col-sm-大于768排成一行,小于768分别占一行
(4)col-xs-始终排列成一行





container







栅格系统:col-lg-,大于1200一行


col-lg-3
col-lg-4
col-lg-3
col-lg-2



栅格系统:col-md-,大于992一行

col-md-3
col-md-4
col-md-3
col-md-2



栅格系统:col-sm-,大于768一行

col-sm-3
col-sm-4
col-sm-3
col-sm-2



栅格系统:col-xs-,始终一行

col-xs-3
col-xs-4
col-xs-3
col-xs-2


bootstrap表单

5.栅格系统:响应式原理





栅格





栅格系统:响应式






bootstrap表单

6.列偏移

(1)col-lg-offset-
(2)col-md-offset-
(3)col-sm-offset-
(4)col-xs-offset-

7.栅格偏移

(1)hidden-xs
(2)hidden-sm
(3)hidden-md
(4)hidden-lg





栅格偏移





栅格系统:col-lg-,大于1200一行

col-lg-5
col-lg-5
col-lg-4
col-lg-4



栅格系统:隐藏

col-lg-4
col-lg-4
col-lg-4


bootstrap表单

8.bootstrap 按钮

(1)btn 声明按钮
(2)btn-default 默认按钮样式
(3)btn-primay
(4)btn-success
(5)btn-info
(6)btn-warning
(7)btn-danger
(8)btn-link
(9)btn-lg
(10)btn-md
(11)btn-xs
(12)btn-block 宽度是父级宽100%的按钮
(13)active
(14)disabled
(15)btn-group 定义按钮组





按钮



按钮


bootstrap表单

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


名称栏目:bootstrap表单-创新互联
文章地址:http://lswzjz.com/article/csddih.html