分享bootstrap学习笔记心得(组件及其属性)

 Bootstrap是一种web框架,是基于HTML,CSS和JS的一种目前较为流行的前端框架。

创新互联主要从事成都做网站、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务东洲,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

Bootstrap包含有丰富的组件,根据提供的组件,开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外,bootstrap还包含有众多jQuery插件:莫泰局昂、标签页、滚动条、弹出框等。

有关bootstrap的下载和文档可到bootstrap中文网:www.bootcss.com查看。

那么使用bootstrap的优势在哪里?第一、利于开发响应式网站,解决不同设备的兼容性问题。第二、提高了网站的开发速度和开发效率。

参考:如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框

Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

本篇文章将总结常用组件及其属性。

1.1栅格系统

1、栅格系统是一种行和列构成的一种布局。随着,屏幕分辨率的变大,最多可展示12个列。

PC端:

PAD端:

手机终端:

2、栅格参数:

col-lg-*:(屏幕>=1200px) PC
col-md-*:(992px-1200px)
col-sm-*:(768px-992px)小平板
col-xs-*:(小于768px)手机

3.代码示例:

靠谱研究所

我们的口号是:靠谱、有趣、有料

靠谱研究所

我们的口号是:靠谱、有趣、有料

1.2辅助类

1.文本颜色:

  

text-primary靠谱研究所

text-success靠谱研究所

text-warning靠谱研究所

text-danger靠谱研究所

text-info靠谱研究所

text-muted靠谱研究所

2、背景颜色:

  

text-primary靠谱研究所

text-success靠谱研究所

text-warning靠谱研究所

text-danger靠谱研究所

text-info靠谱研究所

text-muted靠谱研究所

3、关闭按钮&三角图标:

   
   
   
   

4、快速浮动:

左浮动:pull-left

右浮动:pull-right 清除浮动:clearfix

浮动会将块元素转换成行内元素

这是左边的内容
这是右边的内容

  5、块元素居中、文字居中:

 
  
  
 
块元素水平居中
块元素垂直居中

1.3表格

1.表格颜色:active,warning,danger,info,danger

2.鼠标悬停效果:table-hover

3.带边框表格:table-bordered

4.各行换色:table-striped

姓名: 性别: 年龄:
张三 23
张三 23
张三 23

1.4列表:

class属性:ul:list-group

li:list-group-item 徽章:span:badge                                                                                            

 列表项颜色:list-group-item-(success/warning/danger)

 
  • 靠谱研究所 10
  • IT研究所
  • 美食研究所
  • 美妆研究所

1.5表单:

表单分组:form-group

表单项:(input/span/textarea):form-control

 
 

靠谱研究所后台管理系统


网页名称:分享bootstrap学习笔记心得(组件及其属性)
网站路径:http://bzwzjz.com/article/jigdjo.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 外贸营销网站建设 企业网站建设 定制网站设计 定制网站建设多少钱 成都企业网站制作 网站设计 网站制作 做网站设计 app网站建设 成都网站制作 LED网站设计方案 重庆电商网站建设 成都网站建设 成都网站制作 成都网站制作 营销网站建设 温江网站设计 成都网站设计 成都网站制作 成都响应式网站建设 成都网站设计 网站设计制作