分享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 相关文章推荐
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
详解js静态资源文件请求的处理
Aug 01 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
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
php模板函数 正则实现代码
2012/10/15 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python3判断url链接是否为404的方法
2018/08/10 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
python操作toml文件的示例代码
2020/11/27 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
村官学习十八大感想
2014/01/15 职场文书
工地安全检查制度
2014/02/04 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
化妆品促销活动总结
2015/05/07 职场文书
民事辩护词范文
2015/05/21 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
vue首次渲染全过程
2021/04/21 Vue.js
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript