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


Posted in Javascript onJanuary 11, 2017

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

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

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

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

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

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

1.1栅格系统

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

PC端:

PAD端:

手机终端:

2、栅格参数:

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

3.代码示例:

<div class="container" style="border:1px solid red;"> 
 <div class="row"> 
  <div class="col-lg-3 col-sm-4 col- xs-6"> 
   <div class="thumbnail"> 
    <img src="img/codeguide.png"> 
    <h2>靠谱研究所</h2> 
    <p>我们的口号是:靠谱、有趣、有料</p> 
   </div> 
  </div> 
  <div class="col-lg-3 col-sm-4 col- xs-6"> 
   <div class="thumbnail"> 
    <img src="img/codeguide.png"> 
    <h2>靠谱研究所</h2> 
    <p>我们的口号是:靠谱、有趣、有料</p> 
   </div> 
  </div> 
 </div>  
 </div>

1.2辅助类

1.文本颜色:

<span style="white-space:pre"> </span> <h1 class="text-primary">text-primary靠谱研究所</h1> 
  <h1 class="text-success">text-success靠谱研究所</h1> 
  <h1 class="text-warning">text-warning靠谱研究所</h1> 
  <h1 class="text-danger">text-danger靠谱研究所</h1> 
  <h1 class="text-info">text-info靠谱研究所</h1> 
  <h1 class="text-muted">text-muted靠谱研究所</h1>

2、背景颜色:

<span style="white-space:pre"> </span> <h1 class="bg-primary">text-primary靠谱研究所</h1> 
  <h1 class="bg-success">text-success靠谱研究所</h1> 
  <h1 class="bg-warning">text-warning靠谱研究所</h1> 
  <h1 class="bg-danger">text-danger靠谱研究所</h1> 
  <h1 class="bg-info">text-info靠谱研究所</h1> 
  <h1 class="bg-muted">text-muted靠谱研究所</h1>

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

<span style="white-space:pre"> </span> <!--关闭按钮--> 
  <button class="close"><span>×</span></button> 
  <!--三角图标--> 
  <span class="caret"></span>

4、快速浮动:

左浮动:pull-left

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

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

<div class="pull-left bg-primary">这是左边的内容</div> 
 <div class="pull-right bg-danger">这是右边的内容</div>

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

<!--块元素垂直居中--> 
 <style> 
  #div2{ 
  position:absolute; 
  left:50%; 
  top:50%; 
  transform:translate(-50%,-50%);//平移 
  } 
 </style> 
<span style="white-space:pre"> </span><!--实现块元素水平居中--> 
 <div id="div1" class="center-block text-center" style="width:500px;border:1px solid red;">块元素水平居中</div> 
 <!--实现块元素垂直居中--> 
 <div id="div2" class="center-block text-center" style="width:500px;border:1px solid red;">块元素垂直居中</div>

1.3表格

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

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

3.带边框表格:table-bordered

4.各行换色:table-striped

<table class="table table-striped table-hover table-bordered"><!--隔行换色、鼠标悬停、表格边框--> 
   <thead> 
    <tr class="danger"><!--表格颜色--> 
     <th>姓名:</th> 
     <th>性别:</th> 
     <th>年龄:</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>张三</td> 
     <td>男</td> 
     <td>23</td> 
    </tr> 
    <tr> 
     <td>张三</td> 
     <td>男</td> 
     <td>23</td> 
    </tr> 
    <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)

<ul class="list-group"> 
 <li class="list-group-item"> 
 靠谱研究所 
 <!--列表徽章--><span class="badge">10</span> 
 </li> 
 <li class="list-group-item list-group-item-success">IT研究所</li> 
 <li class="list-group-item list-group-item-warning">美食研究所</li> 
 <li class="list-group-item list-group-item-info">美妆研究所</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 style="white-space:pre"> </span><form role="form"> 
   <h3 class="text-center">靠谱研究所后台管理系统</h3> 
   <div class="form-group has-success has-feedback"> 
    <label for="user">用户名</label> 
    <input type="text" id="user" placeholder="请输入用户名" class="form-control"> 
    <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
   </div> 
   <div class="form-group has-error has-feedback"> 
    <label for="pass">密码</label> 
    <input type="text" id="pass" placeholder="请输入密码" class="form-control"> 
    <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
   </div> 
   <div class="checkbox"> 
    <label> 
     <input type="checkbox">请记住我 
    </label> 
   </div> 
   <button type="submit" class="btn btn-success btn-block">提交</button> 
  </form>
Javascript 相关文章推荐
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
JavaScript设计模式之原型模式详情
Jun 21 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 #Javascript
理解javascript中的闭包
Jan 11 #Javascript
javascript常用经典算法详解
Jan 11 #Javascript
总结几道关于Node.js的面试问题
Jan 11 #Javascript
微信端开发--登录小程序步骤
Jan 11 #Javascript
Vue数据驱动模拟实现1
Jan 11 #Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 #Javascript
You might like
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python自动抢红包教程详解
2019/06/11 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
Python如何发送与接收大型数组
2020/08/07 Python
Python与C/C++的相互调用案例
2021/03/04 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
2014年化验员工作总结
2014/11/18 职场文书
开学第一周总结
2015/07/16 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
2016年元旦寄语
2015/08/17 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers