分享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 相关文章推荐
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
AngularJS表单验证功能
Oct 19 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
JS实现贪吃蛇游戏
Nov 15 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
PHP学习之PHP表达式
2006/10/09 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php自定义hash函数实例
2015/05/05 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
Node.js实现文件上传的示例
2017/06/28 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
python使用正则表达式提取网页URL的方法
2015/05/26 Python
python实现移位加密和解密
2019/03/22 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
python 如何将office文件转换为PDF
2020/09/22 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
应届毕业生求职信范文
2013/12/18 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
技能培训通讯稿
2015/07/18 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python