BootStrap CSS全局样式和表格样式源码解析


Posted in Javascript onJanuary 20, 2017

CSS全局样式

1、布局容器类样式:.container 和 .container-fluid

.container 固定宽度并且具有响应式。
.container-fluid 自由宽度(100%宽度)。

这2个class是直接在body标签下建立一个div标签,class等于这2个中的一个。
然后其他内容全部写在这个div标签中即可!

例如:

<!DOCTYPE html>
<html>
<head>
 <title>BootStrap基础入门</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">

 <script type="text/javascript" src="js/jquery.slim.min.js" ></script>
 <script type="text/javascript" src="bootstrap3/js/bootstrap.min.js" ></script>
</head>
<body>
 <div class="container">
 <h1>标题H1</h1>
 <p>正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正</p>
 </div>
</body>
</html>

BootStrap CSS全局样式和表格样式源码解析

再看.container-fluid:
只修改了这里,其他地方不变

<div class="container-fluid">

BootStrap CSS全局样式和表格样式源码解析

也就是说,container-fluid这个是和页面两边是没有间隔的。
而container是有一定间隔的,而且左右两边的间隔相等。

2、标题样式: <h1>到<h6>、.h1 ~ .h6

<h1>~<h6>样式重写了,基本上做到了兼容性。
(如未加说明,则新代码是接在上面的代码后面)
下面的代码在上面代码的p标签后

<h1>标题H1</h1>
<font class="h1">标题H1</font>

BootStrap CSS全局样式和表格样式源码解析

3、行内文本样式:

<b>:加粗
<strong>加粗
<i>:斜体
<em>斜体,HTML5新标记
<del>删除线,HTML5新标记。
<s>删除线

这几个就不演示了,你自己简单的用一个就懂了。

4、文本对齐样式:.text-left、.text-center、.text-right、.text-justify

.text-left:文本左对齐
.text-right:右对齐
.text-center:居中对齐
.text-justify:两端对齐

<div class="text-left">左对齐:正文正正文正文正文正文正</div>
<div class="text-right">右对齐:正文正正文正文正文正文正</div>
<div class="text-center">居中对齐:正文正文正文正文正</div>
<div class="text-justify">两端对齐:正正文正文正文正正</div>

BootStrap CSS全局样式和表格样式源码解析

5、列表样式:

.list-unstyled(无符号):去掉前面的符号。
.list-inline(行内块)

BootStrap CSS全局样式和表格样式源码解析 

普通的列表样式:首先是前面有一定的空隙,不是和文本同间隔的。
另外的就是有小圆点,当然,你可以改这个符号。

在BootStrap中,我们只需要在ul上加一个class就可以解决这个问题。

在这里,我发现BootStrap4不支持ul在一行显示,也就是添加class=”list-inline”是无效的。
所以,我在这里就改用bootstrap3了。

<ul class="list-unstyled">
  <li>HTML</li>
  <li>Java</li>
  <li>JavaScript</li>
 </ul>
 <ul class="list-inline">
  <li>在一行</li>
  <li>HTML</li>
  <li>Java</li>
  <li>JavaScript</li>
</ul>

BootStrap CSS全局样式和表格样式源码解析

表格样式

1、.table :表格全局样式(少量padding和水平方向的分割线)。

<table class="table">
 <tr>
  <td>编号</td>
  <td>新闻标题</td>
  <td>发布者</td>
  <td>发布时间</td>
 </tr>
 <tr>
  <td>001</td>
  <td>A</td>
 <td>CHX</td>
  <td>2017</td>
 </tr>
 <tr>
 <td>002</td>
 <td>B</td>
 <td>ANYI</td>
 <td>2017</td>
 </tr>
</table>

BootStrap CSS全局样式和表格样式源码解析

2、.table-striped:有条纹的背景色行(隔行变色)

<table class="table table-striped">
...
</table>

BootStrap CSS全局样式和表格样式源码解析 

颜色很浅,不知道你们能不能看清。

3、.table-bordered:带边框的表格

<table class="table table-striped table-bordered">
...
</table>

BootStrap CSS全局样式和表格样式源码解析

4、.table-hover:鼠标悬停效果(放上变色、离开恢复)

<table class="table table-striped table-bordered table-hover">
...
</table>

BootStrap CSS全局样式和表格样式源码解析

5、.table-condensed:紧凑的表格(单元格内补会减半)

<table class="table table-striped table-bordered table-hover table-condensed">
...
</table>

BootStrap CSS全局样式和表格样式源码解析

6、行或单元格背景色:

注意:只能给tr或td添加类样式。

.active:当前样式
.success
.info
.warning
.danger

BootStrap CSS全局样式和表格样式源码解析

<tr class="active">
     <td>编号</td>
     <td>新闻标题</td>
     <td>发布者</td>
     <td>发布时间</td>
    </tr>
    <tr class="success">
     <td>001</td>
     <td>A</td>
     <td>CHX</td>
     <td>2017</td>
    </tr>
    <tr class="info">
     <td>002</td>
     <td>B</td>
     <td class="warning">ANYI</td>
     <td class="danger">2017</td>
    </tr>

BootStrap CSS全局样式和表格样式源码解析

7、响应式表格:

将.table元素包裹在.table-responsive元素内,即可创建响应式表格
当屏幕宽度小于768px时,表格会出现滚动条。
当屏幕宽度大于768px时,表格的滚动条自然消失。

也就是在table标签外再创一个div标签,div的class设置为table-responsive即可。

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed">
     <tr class="active">
      <td>编号</td>
      <td>新闻标题</td>
      <td>发布者</td>
      <td>发布时间</td>
      <td>发布者</td>
      <td>发布时间</td>
      <td>发布者</td>
      <td>发布时间</td>
     </tr>
     <tr class="success">
      <td>001</td>
      <td>A</td>
      <td>CHX</td>
      <td>2017</td>
      <td>CHX</td>
      <td>2017</td>
      <td>CHX</td>
      <td>2017</td>
     </tr>
     <tr class="info">
      <td>002</td>
      <td>B</td>
      <td class="warning">ANYI</td>
      <td class="danger">2017</td>
      <td>CHX</td>
      <td>2017</td>
      <td>CHX</td>
      <td>2017</td>
     </tr>
    </table>
   </div>

BootStrap CSS全局样式和表格样式源码解析

本节源码https://github.com/chenhaoxiang/BootStrap/tree/master/OneDay

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript如何使用bind指定接收者
May 04 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
js微信分享实现代码
Oct 11 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 #Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 #Javascript
JS中from 表单序列化提交的代码
Jan 20 #Javascript
jquery表单验证插件validation使用方法详解
Jan 20 #Javascript
jquery表单插件form使用方法详解
Jan 20 #Javascript
AngularJs上传前预览图片的实例代码
Jan 20 #Javascript
详解JavaScript中this的指向问题
Jan 20 #Javascript
You might like
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
php提取微信账单的有效信息
2018/10/01 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
Augularjs-起步详解
2016/07/08 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
webstorm添加*.vue文件支持
2018/05/08 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python多维数组切片方法
2018/04/13 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
python中JWT用户认证的实现
2020/05/18 Python
个人银行贷款担保书
2014/04/01 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
唐山大地震观后感
2015/06/05 职场文书
亮剑精神观后感
2015/06/05 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
redis 解决库存并发问题实现数量控制
2022/04/08 Redis
Python如何用re模块实现简易tokenizer
2022/05/02 Python