分享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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
详解TypeScript中的类型保护
Apr 29 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
php5中类的学习
2008/03/28 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python创建学生成绩管理系统
2019/11/22 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
初二生物教学反思
2014/02/03 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
个性婚礼策划方案
2014/05/17 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
2015年保管员工作总结
2015/04/30 职场文书
公司开业致辞
2015/07/29 职场文书