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

快速上手

本文主要如何用漂亮的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>

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

btn default primary info warning danger

代码:

<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 Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

条纹状表格

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

带边框的表格

# First Name Last Name Username
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 Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

紧缩表格

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

状态提示:

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

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

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »

代码:

<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

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

有! 没有

×

(●‘?‘●)?♥

那么点右下方的推荐吧...~\(≧▽≦)/~

就这么愉快的决定了!

×

(┳_┳)...

我会再努力的...(?﹏?)

那么,为了鼓励我,点右下方的推荐如何?? (? ? ?)?

好呀好呀!

时间: 2024-08-24 22:15:46

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

python web框架企业实战详解(第六期)\第三课时-css&amp;bootstrap

raw css: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/3

css中判断IE版本的语句

css中判断IE版本的语句<!--[if gte IE 6]> Only IE 6/+ <![endif]-->: 1. <!--[if !IE]> 除IE外都可识别 <!--<![endif]--> 2. <!--[if IE]> 所有的IE可识别 <![endif]--> 3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--> 4. <!--[if IE 5]&

No mapping found for HTTP request with URI [/crmcrmcrm/css/bootstrap.min.css] in DispatcherServlet with name &#39;springMvc&#39;

先把错误贴上来 No mapping found for HTTP request with URI [/crmcrmcrm/css/sb-admin-2.css] in DispatcherServlet with name 'springMvc'DEBUG [http-bio-8080-exec-6] - Successfully completed requestDEBUG [http-bio-8080-exec-7] - Did not find handler method for [

DevExpress ASP.NET Bootstrap v19.1版本亮点:Scheduler控件

行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Bootstrap Controls中Rich Text Editor.Scheduler.新的响应项目模板中新增及改进的性能,欢迎下载v19.1试用,点击立即下载>> Rich Text Editor 客户端打印 Rich Text Editor支持客户端打印,现在可以轻松打印屏幕上的布局. Scheduler 增强Date Navigator UI

CSS参考手册

CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby 语音 表格 文本 2D/3D 转换 过渡 用户界面 "CSS" 列指示该属性是在哪个 CSS 版本(CSS1.CSS3 或 CSS3)中定义的. CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属

css HACK之浏览器版本判断【转】

<!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见 <!--[if lte IE 7]> <![endif]--> IE7及其以下版本可见 <!--[if IE 6]> <![endif]--> 只有IE6版本可见 <![if !IE]> <![endif]> 除了IE以外的版本 <!--[if lt IE 8]> <![endif]--> IE8以下

精简CSS bootstrap、flat-ui等

眼下随着CSS框架的广泛使用,尤其是bootstrap这样的主流CSS.如果在不使用CDN的情况下, 就存在网站或者项目部署生产环境,考虑流量和带宽的问题,其中CSS的精简就要开始着手做了, 删掉不使用的CSS,只保留网站或者项目用到的.那就就是我要推荐的一个精简工具. 其实就是火狐神器firebug下的一个插件---css Usage 相信但凡是现在的程序员,firebug是必不可少的开发神器. 安装好firebug之后,在火狐里搜索css Usage安装重启即可. 安装完成之后在firebu

用php脚本给html中引用的js和css路径打上版本

比如 <link rel="stylesheet" type="text/css" href="./css/globel.css"> <script src="./js/config.js"></script> 中的href和src加上版本 <link rel="stylesheet" type="text/css" href="./c

Linux虚拟机安装配置手册(版本:7.3)

一.准备 ①.安装VMWare 安装步骤省略.我这里使用的版本如下: ②.Linux系统镜像文件: 建议使用最新版本的Linux系统.有些组件对系统内核版本要求比较高,有可能会产生错误. 我这里使用的版本是:rhel-server-7.3-x86_64-dvd.iso 百度云共享连接:https://pan.baidu.com/s/1hsJS4bM 二.安装虚拟机 ↓创建新的虚拟机 ↓默认.下一步 ↓默认.下一步 ↓默认.下一步 ↓根据镜像文件版本来选择Linux版本.我使用的是[rhel-se