分享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对象与打印对象分析比较
Apr 23 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 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
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
移动端界面的适配
2017/01/11 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python实现OpenCV的安装与使用示例
2018/03/30 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
python自动化发送邮件实例讲解
2021/01/04 Python
python中K-means算法基础知识点
2021/01/25 Python
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
生日寄语大全
2014/04/08 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
欢送会主持词
2015/07/01 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
python基础之类属性和实例属性
2021/10/24 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js