码迷，mamicode.com
首页 > Web开发 > 详细

沉鱼落雁的CSS ? (? ? ?)? BootStrap手册简化版本

时间：2015-07-19 21:28:20      阅读：212      评论：0      收藏：0      [点我收藏+]

标签：

快速上手

本文主要如何用漂亮的BootStrap来美化网页，并二次简化了官网版本。

注：BootStrap是依赖JQuery运行的，因此没有JQuery也是空谈。

我就是页头 标题与内容的分隔.

代码：

<div class="page-header">
  <h1>标题 <small>小标题...</small></h1>
</div>

 

巨幕 展现内容的关键主体.

效果：（直接放代码在本文效果不好，故采用图片形式）

技术分享

代码：

<div class="jumbotron">
  <h1>我是巨幕的大标题</h1>
  <p>我是巨幕的小标题</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">我是巨幕的按钮</a></p>
</div>

 

按钮 五彩缤纷，美轮美奂.

 

代码：

<button class="btn btn-primary" type="button">按钮</button>

切换状态

添加了 data-loading-text 之后，就可以使用 $.button("loading") 和 $.button("reset") 来显示和重置状态.

警告框 警告消息或反馈消息.

 

class="alert alert-success" role="alert"
class="alert alert-info" role="alert"
class="alert alert-warning" role="alert"
class="alert alert-danger" role="alert"
仔细看！ 这个警告框是可以关闭的.还可以附带个链接~

基础代码：

“成功”绿色提示：<div class="alert alert-success" role="alert">内容...</div>
“信息”蓝色提示：<div class="alert alert-info" role="alert">内容...</div>
“警告”黄色提示<div class="alert alert-warning" role="alert">内容...</div>
“危险”红色提示<div class="alert alert-danger" role="alert">内容...</div>

带关闭按钮（×）的代码：

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>小秘密！</strong> 其实关闭警告框就是从DOM中删除。
</div>

我是警告信息，我是alert.js

我可以可以为警告信息添加点击并消失的功能。当使用 .close 按钮时，它必须是 .alert-dismissible 的第一个子元素，并且在它之前不能有任何文本内容。

警告信息代码：

<div class="alert alert-danger alert-dismissible fade in"><button class="close" type="button" data-dismiss="alert"><span>×</span></button>
  <h4>我是警告信息，我是alert.js</h4>
  <p>我可以可以为警告信息添加点击并消失的功能。当使用 <code>.close</code> 按钮时，它必须是 <code>.alert-dismissible</code> 的第一个子元素，并且在它之前不能有任何文本内容。</p>
  <p><button class="btn btn-danger" type="button">错了</button> <button class="btn btn-default" type="button">错了错了</button></p>
</div>

 

提示框 和警告框比，哪个更好看呢？"o((>ω< ))o"

danger

class="bs-callout bs-callout-danger"

danger

class="bs-callout bs-callout-danger"

info

class="bs-callout bs-callout-info"

内部h4标签用作title，p标签用作content

metro

额外的添加bs-callout-metro就可以让提示框扁平化

基础代码：

<div class="bs-callout bs-callout-danger">
  <h4>标题</h4>
  <p>内容...</p>
</div>

扁平化代码：

<div class="bs-callout bs-callout-info bs-callout-metro">
  <h4>标题</h4>
  <p>内容...</p>
</div>

 

进度条 展现项目的进度，我还会动呢！

45%（可自定义显示内容）

代码：

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 60%;">
        60%
    </div>
</div>

 颜色可以自定义，只需要改变class的值：

绿：class="progress-bar progress-bar-success"
蓝：class="progress-bar progress-bar-info"
黄：class="progress-bar progress-bar-warning"
红：class="progress-bar progress-bar-danger"
60%

来点好玩的：

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%">
        <span class="sr-only">35% Complete (success)</span>
    </div>
    <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 20%">
        <span class="sr-only">20% Complete (warning)</span>
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
        <span class="sr-only">10% Complete (danger)</span>
    </div>
</div>

这里的动画可以自定义，代码是可以穿插的，比如我可以不要动，只要条纹：

这真的是太难看了！

代码：

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>

这些都是可以混搭着的，

进度条样式：progress-bar-success,progress-bar-info,progress-bar-warning,progress-bar-danger

通用写法：class="progress-bar progress-bar-warning progress-bar-striped active"

面板 把某些DOM内容放到一个盒子里.

这个面板没有标题，在 class="panel panel-default" 内的class="panel-body"里面添加内容

标题

这里是内容主体，标题放在 class="panel-heading" 里面

标题

class="panel panel-primary"

标题

class="panel panel-success"

标题

class="panel panel-success"

标题

class="panel panel-info"

代码：

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">标题</h3>
    </div>
    <div class="panel-body">
        这里是内容主体,标题部分可以根据需求去掉
    </div>
</div>

 

好！（Well） 体现出内嵌（inset）效果.

看，我很“好”。

代码：

<div class="well">内容...</div>

有三种可选样式（尺寸）：

普通：class="well"

大：class="well well-lg"

小：class="well well-sm"

Tab 酷酷的切换面板.

点击切换面板，这里是tab1，使用导航栏内a标签的 $.tab("show") 可以动态切换选项

这里是tab2，使用导航栏内a标签的 $.tab("show") 可以动态切换选项

代码：

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#tab1" role="tab" data-toggle="tab">选项1</a></li>
    <li><a href="#tab2" role="tab" data-toggle="tab">选项2</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="tab1">
        <p>选项1内容...</p>
    </div>
    <div class="tab-pane fade" id="tab2">
        <p>选项2内容...</p>
    </div>
</div>

胶囊式导航

给ul添加 .nav-pills 类，可以给选项卡标签另一种样式

媒体对象 就像QQ空间Facebook/Twitter的评论或消息一样.

  • 技术分享

    某某回复：

    呵呵

    技术分享

    某某回复：

    呵呵

  • 技术分享

    XXX说：

    我也这么想 =。=

 

轮显 像本站头部一样的漂亮\(≧▽≦)/

就像本站头部一样的漂亮~此代码来自@上位者的怜悯 再次感谢他无私分享的精神！
var slider = $("#homeBanner").slider({
    id: "homeBanner",
    imgs: [
        "http://i2.tietuku.com/e5859ff3e6487575.png",
        "http://i2.tietuku.com/884e69c2eb02316b.png",
        "http://i2.tietuku.com/f07bd295f4cdbd7a.png",
        "http://i2.tietuku.com/89e657a08f9f13f6.png",
        "http://i2.tietuku.com/0f8738e9cfbb9485.png",
        "http://i2.tietuku.com/462506e0ed7b0c25.png"
    ],
    scale: 5 / 2,
    border: true,
    x: 4,
    y: 3
});

真的好美！

黏住 在滚动的时候黏在屏幕固定位置.

方法一：使用js来实现：$(".slide-menu").affix({offset: {top:xxx} }); 这里的 top值 建议在初始化的时候动态获取

方法二：在想要浮动的标签加上 data-spy="affix" ，使用 data-offset-top="xx" 来让标签在什么高度开始浮动

注意： 无论哪一种方法，都要在style中添加 top:xxx 来设置浮动的位置

 

表格 多种样式的表格，总能满足你的需求.<在这里显示会稍有差别，我的CSS有点小出入>

基本样式

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

条纹状表格

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

带边框的表格

#First NameLast NameUsername
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

代码调用：

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

.........

</table></table></table>

说明：可以额外为表格加上鼠标悬停，紧缩和状态

鼠标悬停

只需在class上加上 .table-hover 即可让表格的每一行响应鼠标悬停状态。

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

紧缩表格

只需在class上加上 .table-condensed 即可让表格更加紧凑，单元格中的内部（padding）均会减半。

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

状态提示：

Class描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

分页 百度或Google页底的12345...

代码：

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

分页还有很多需要注意的，本站没有用到。需要的可以去官网查询。

 

关于记不记得住的问题

很多人问我，如果记不住这些代码怎么办？？其实这些都不用去记的，只要用的多，自然就记住了。

暂时先写到这，有更多的想法我会继续写下去的。

本文为半原创，作者@b1ta

无耻的求推荐：您有没有对本文章感兴趣呢？（正确答案：有? (? ? ?)?）

沉鱼落雁的CSS ? (? ? ?)? BootStrap手册简化版本

标签：

原文地址：http://www.cnblogs.com/b1ta/p/4659086.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！