全国服务热线:4008-888-888

技术知识

玉林微信小程序制作_分享bootstrap学习笔记心得

分享bootstrap学习笔记心得(组件及其属性)       Bootstrap是一种web框架,是基于HTML,CSS和JS的一种目前较为流行的前端框架。本篇文章将总结常用组件及其属性,需要的朋友参考下吧

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

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

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

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

参考:

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

1.1栅格系统

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

PC端:

PAD端:

手机终端:

2、栅格参数:

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

3.代码示例:

 div 
 div 
 div 
 div 
 img src="img/codeguide.png" 
 h2 靠谱研究所 /h2 
 p 我们的口号是:靠谱、有趣、有料 /p 
 /div 
 /div 
 div 
 div 
 img src="img/codeguide.png" 
 h2 靠谱研究所 /h2 
 p 我们的口号是:靠谱、有趣、有料 /p 
 /div 
 /div 
 /div 
 /div 

1.2辅助类

1.文本颜色:

 span /span h1 text-primary靠谱研究所 /h1 
 h1 ess靠谱研究所 /h1 
 h1 text-warning靠谱研究所 /h1 
 h1 text-danger靠谱研究所 /h1 
 靠谱研究所 /h1 
 h1 text-muted靠谱研究所 /h1 

2、背景颜色:

 span /span h1 text-primary靠谱研究所 /h1 
 h1 ess靠谱研究所 /h1 
 h1 text-warning靠谱研究所 /h1 
 h1 text-danger靠谱研究所 /h1 
 靠谱研究所 /h1 
 h1 text-muted靠谱研究所 /h1 

3、关闭按钮 三角图标:

 span /span !--关闭按钮-- 
 button span × /span /button 
 !--三角图标-- 
 span /span 

4、快速浮动:

左浮动:pull-left

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

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

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

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

 !--块元素垂直居中-- 
 style 
 #div2{ 
 position:absolute; 
 left:50%; 
 top:50%; 
 transform:translate(-50%,-50%);//平移 
 /style 
 span /span !--实现块元素水平居中-- 
 div id="div1" 块元素水平居中 /div 
 !--实现块元素垂直居中-- 
 div id="div2" 块元素垂直居中 /div 

1.3表格

1.表格颜色:active,,danger

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

3.带边框表格:table-bordered

4.各行换色:table-striped

 table !--隔行换色、鼠标悬停、表格边框-- 
 thead 
 tr !--表格颜色-- 
 th 姓名: /th 
 th 性别: /th 
 th 年龄: /th 
 /tr 
 /thead 
 tbody 
 td 张三 /td 
 td 男 /td 
 td 23 /td 
 /tr 
 td 张三 /td 
 td 男 /td 
 td 23 /td 
 /tr 
 td 张三 /td 
 td 男 /td 
 td 23 /td 
 /tr 
 /tbody 
 /table 

1.4列表:

class属性:ul:list-group

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

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

 靠谱研究所 
 !--列表徽章-- span 10 /span 
 /li 
 li IT研究所 /li 
 li 美食研究所 /li 
 li 美妆研究所 /li 
 /ul 

1.5表单:

表单分组:form-group

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

 style 
 .container{ 
 width:450px; 
 height:300px; 
 background:#ffffff; 
 position:absolute; 
 left:50%; 
 top:50%; 
 transform:translate(-50%,-50%); 
 border-radius:20px; 
 /style 
 span /span form role="form" 
 h3 靠谱研究所后台管理系统 /h3 
 div 
 label for="user" 用户名 /label 
 input type="text" id="user" placeholder="请输入用户名" 
 span /span 
 /div 
 div 
 label for="pass" 密码 /label 
 input type="text" id="pass" placeholder="请输入密码" 
 span /span 
 /div 
 div 
 label 
 input type="checkbox" 请记住我 
 /label 
 /div 
 button type="submit" 提交 /button 
 /form 




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服