美文网首页我爱编程
Bootstrap中自定义的类

Bootstrap中自定义的类

作者: lvyweb | 来源:发表于2017-06-12 10:51 被阅读170次

标签（空格分隔）： bootstrap

既然项目中使用Bootstrap，那么Bootstrap本身自带的类，可以添加很多常用样式，很方便的，能用Bootstrap本身自带的，尽量不自己写

强调内容

  • 强调内容: 如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
  • “.lead”对应的样式如下：
    源码查看bootstrap.css文件第470行~480行
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型浏览器字体稍大*/
.lead {
font-size: 21px;
  }
}

强调相关的类

  • .text-muted：提示，使用浅灰色（#999）
  • .text-primary:主要，使用蓝色（#428bca）
  • .text-success:成功，使用浅绿色(#3c763d)
  • .text-info:通知信息，使用浅蓝色（#31708f）
  • .text-warning:警告，使用黄色（#8a6d3b）
  • .text-danger:危险，使用褐色（#a94442）

具本源码查看bootstrap.css文件第500行~第532行：

.text-muted {
color: #999;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}

文本对齐风格

  • .text-left：左对齐
  • .text-center：居中对齐
  • .text-right：右对齐
  • .text-justify：两端对齐
    具体源码查看bootstrap.css文件第488行~第499行：
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

特别声明：目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。

列表--去点列表

通过给无序列表添加一个类名.list-unstyled,这样就可以去除默认的列表样式的风格。
源码请查看bootstrap.css文件第580行~第583行

.list-unstyled {
padding-left: 0;
list-style: none;
}

列表--内联列表

通过添加类名.list-inline来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
源码查看bootstrap.css文件第584行~第593行

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

表格

表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。

  • [x] .table：基础表格

  • [x] .table-striped：斑马线表格

  • [x] .table-bordered：带边框的表格

  • [x] .table-hover：鼠标悬停高亮的表格

  • [x] .table-condensed：紧凑型表格

  • [x] .table-responsive：响应式表格
    eg:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基础表格</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
<h1>基础表格</h1>
<table class="table">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
<h1>斑马线表格</h1>
<table class="table table-striped">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
<h1>带边框的表格</h1>
 <table class="table table-bordered">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
<h1>鼠标悬浮高亮的表格</h1>
<table class="table table-striped table-bordered table-hover">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
 <h1>紧凑型表格</h1>
  <table class="table table-condensed">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
 <h1>响应式表格</h1>
 <div class="table-responsive">
   <table class="table table-bordered">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
</div>
</body>
</html>

表格-表格行的类

不同的类对应的样式不同的类对应的样式
其使用非常的简单，只需要在<tr>元素中添加上表对应的类名，就能达到你自己需要的效果：
eg:<tr class="active"> <td>…</td> </tr>
还有.table-hover是表格的hover效果。

基本表格

.table主要有三个作用：

  • [x] 给表格设置了margin-bottom:20px以及设置单元内距

  • [x] 在thead底部设置了一个2px的浅灰实线

  • [x] 每个单元格顶部设置了一个1px的浅灰实线

主要源码查看bootstrap.css文件第1402行～第1441行

按钮

Bootstrap框架的按钮也是一个独立部分，我们同样在不同的版本之中能找到对应的代码：
LESS版本：查看源文件buttons.less
Sass版本：查看源文件_buttons.scss
已编译版本：查看源文件bootstrap.css文件第1992行～第2353行
按钮类型

  • <button class="btn" type="button">基础按钮.btn</button>
  • <button class="btn btn-default" type="button">默认按钮.btn-default</button>
  • <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
  • <button class="btn btn-success" type="button">成功按钮.btn-success</button>
  • <button class="btn btn-info" type="button">信息按钮.btn-info</button>
  • <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
  • <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
  • <button class="btn btn-link" type="button">链接按钮.btn-link</button>
    定制风格按钮定制风格按钮

图像

图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

  • img-responsive：响应式图片，主要针对于响应式设计
  • img-rounded：圆角图片
  • img-circle：圆形图片
  • img-thumbnail：缩略图片

图标

这里说的图标就是Web制作中常看到的小icon图标，可以说这些小icon图标是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。
Bootstrap图标

相关文章

  • Bootstrap中自定义的类

    标签（空格分隔）： bootstrap 既然项目中使用Bootstrap，那么Bootstrap本身自带的类，可以...

  • bootstrap完美实现5列布局

    自定义五列的 CSS 类 这种方法相对简单的，自定义一套CSS类，尽量和Bootstrap风格保持一致。 .col...

  • 02-Bootstrap

    一、自定义bootstrap按钮 自定义bootstrap按钮 将生成对应的样式拷贝到对应样式表中，即可以使用；例...

  • 02-Bootstrap

    一、自定义bootstrap按钮 自定义bootstrap按钮 将生成对应的样式拷贝到对应样式表中，即可以使用；例...

  • Laravel 创建帮助类自定义函数

    在 laravel 里封装自定义函数其实很简单。 创建 helper 类文件 在 bootstrap\\ 目录下新...

  • 近期面试java基础部分面试题

    java部分: 常见的加载器有哪些，如何自定义一个加载器？ 类加载器:启动类加载器(bootstrap class...

  • 辅助函数

    辅助函数 必须 把所有的自定义辅助函数存放于 bootstrap 文件夹中，并在 bootstrap/app.ph...

  • 12.21bootstrap 辅助类使用

    bootstrap 辅助类使用 显示和隐藏 响应式 快速浮动 trigger 主动触发事件 简单应用 自定义事件

  • 不按照驼峰写法可能导致错误

    1.demo用springboot+freemarker+bootstrap 自定义了一个类，专门返回给前端的，和...

  • 类加载器

    两种累加载器 1.引导类加载器（Bootstrap Classloader）： 由C和C++语言实现的 2.自定义...

网友评论

    本文标题： Bootstrap中自定义的类

    本文链接：https://www.haomeiwen.com/subject/ziqlqxtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    我爱编程

    关于我们|服务条款|联系我们| Bootstrap中自定义的类|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！