08-bootcss

官网：https://v3.bootcss.com/

CDN库：http://www.bootcdn.cn/bootstrap/

媒体查询

 @media screen and (min-width: 500px) {
            div{
                width: 100px;
                height: 100px;
                background: yellow;
            }
        }
        @media screen and (min-width: 800px) {
            div{
                width: 200px;
                height: 200px;
                background: blue;
            }
        }

布局容器

.container 类用于固定宽度并支持响应式布局的容器

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

<div class="container-fluid">
  ...
</div>

栅格系统(系统会自动分为最多12列)

	                  超小屏幕        小屏幕          中等屏幕 桌面显示器    大屏幕 大桌面显示器 
	                手机 (<768px)   平板 (≥768px)	    (≥992px)	           (≥1200px)
栅格系统行为	       总是水平排列	  开始是堆叠在一起的，当大于这些阈值时将变为水平排列C		
.container 最大宽度	 None （自动）	   750px	            970px	              1170px
类前缀	               .col-xs-	          .col-sm-	       .col-md-	             .col-lg-
列（column）数	          12			  12                 12                     12
最大列（column）宽	   自动	          ~62px	             ~81px	               ~97px

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

排版

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式

<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<span class="h1">我是p标签的h1标签</span><br/><br/>
<span class="h2">我是p标签的h2标签</span><br/><br/>
<span class="h3">我是p标签的h3标签</span><br/><br/>
<span class="h4">我是p标签的h4标签</span><br/><br/>
<span class="h5">我是p标签的h5标签</span><br/><br/>
<span class="h6">我是p标签的h6标签</span><br/><br/>

表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式

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

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框

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

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

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

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半

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

状态类

通过这些状态类可以为行或单元格设置颜色

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

表单

内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px宽度时（视口宽度再小的话就会使表单折叠）。

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列

<form action="#" class="form-horizontal">
	<div class="form-group">
		<input type="text" placeholder="请输入你的帐号" class="form-control">
	</div>
	<div class="form-group">
		<input type="password" placeholder="请输入你的密码" class="form-control">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox">记住我
		</label>
		</div>
	<div class="radio">
		<label for="man">
			<input type="radio" id="man" name="sex">man
		</label>
		<label for="woman">
			<input type="radio" id="woman" name="sex">woman
		</label>
		<label for="secret">
			<input type="radio" id="secret" name="sex" disabled>secret
		</label>
    </div>
	<div class="form-group">
		<select name="select" class="form-control">
			<option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
		</select>
	</div>
</form>

按钮

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>

图片

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

辅助类

情境文本颜色

<p class="text-muted">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-primary">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-success">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-warning">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

情境背景色

<p class="bg-primary">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-success">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-warning">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的

<span class="caret"></span>

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动

<div class="clearfix">...</div>

显示或隐藏内容

<div class="show">...</div>
<div class="hidden">...</div>

`Glyphicons`字体图标

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上.图标类只能应用在不包含任何文本内容或子元素的元素上。

<span class="glyphicon glyphicon-align-left"></span>
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span>
</button>

下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码

<div class="dropdown">
	<button class="btn btn-primary" data-toggle="dropdown">我是一个下拉框 
	<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="dropup">
	<button class="btn btn-primary" data-toggle="dropdown">我是一个上拉框 
		<span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="http://www.baidu.com">python</a></li>
      <li><a href="#">c++</a></li>
      <li><a href="#">java</a></li>
    </ul>
</div>

按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为

<div class="btn-group">
  	<button type="button" class="btn btn-default">Left</button>
  	<button type="button" class="btn btn-success">Middle</button>
  	<button type="button" class="btn btn-warning">Right</button>
</div>

按钮组嵌套下拉框

<div class="btn-group">
	<button class="btn btn-danger">按钮1</button>
	<button class="btn btn-success">按钮2</button>
	<button class="btn btn-warning">按钮3</button>
	<div class="btn-group">
    	<button class="btn btn-primary" data-toggle="dropdown">我是一个下拉框 
    		<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">python</a></li>
            <li><a href="#">c++</a></li>
            <li><a href="#">java</a></li>
        </ul>
    </div>
</div>

分裂式下拉菜单

<div class="btn-group">
	<button class="btn btn-success">成功</button>
	<button class="btn btn-info" data-toggle="dropdown">
		<span class="caret"></span></button>
	<ul class="dropdown-menu">
        <li><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
	</ul>
</div>

输入框组

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素

<div class="input-group">
	<span class="input-group-addon">@</span>
	<input type="text" placeholder="请输入你的帐号" class="form-control">
</div>

<div class="input-group">
	<input type="text" placeholder="请输入你的帐号" class="form-control">
	<span class="input-group-addon">@</span>
</div>

<div class="input-group">
	<input type="text" placeholder="请输入你的帐号" class="form-control">
	<span class="input-group-addon">
		<span class="glyphicon glyphicon-heart"></span>
	</span>
</div>

<div class="input-group">
	<span class="input-group-addon">
		<span class="glyphicon glyphicon-heart"></span>
	</span>
	<input type="text" placeholder="请输入你的帐号" class="form-control">
</div>

导航条

添加 .navbar-fixed-top 类可以让导航条固定在顶部,添加 .navbar-fixed-bottom 类可以让导航条固定在底部

<div class="navbar navbar-default navbar-fixed-top">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>

<div class="navbar navbar-inverse navbar-fixed-bottom">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">python</a></li>
        <li><a href="#">c++</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>

分页

<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><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="#">»</a></li>
</ul>

进度条

<div class="progress">
	<div class="progress-bar progress-bar-success" style="width:50%">50%</div>
</div>

<div class="progress">
	<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:50%">50%			</div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" 		 style="width:50%">50%</div>
	</div>
</div>

发表于 2018-03-25 18:23 坚持code 阅读(297) 评论(0) 编辑收藏举报

媒体查询

布局容器

栅格系统(系统会自动分为最多12列)

排版

表格

条纹状表格

带边框的表格

鼠标悬停

紧缩表格

状态类

表单

内联表单

水平排列的表单

按钮

尺寸

图片

辅助类

情境文本颜色

情境背景色

关闭按钮

三角符号

快速浮动

清除浮动

显示或隐藏内容

`Glyphicons`字体图标

下拉菜单

按钮组

按钮组嵌套下拉框

分裂式下拉菜单

输入框组

导航

标签页

胶囊式标签页

两端对齐的标签页

路径导航标签页

导航条

分页

进度条

08-bootcss

媒体查询

布局容器

栅格系统(系统会自动分为最多12列)

排版

表格

条纹状表格

带边框的表格

鼠标悬停

紧缩表格

状态类

表单

内联表单

水平排列的表单

按钮

尺寸

图片

辅助类

情境文本颜色

情境背景色

关闭按钮

三角符号

快速浮动

清除浮动

显示或隐藏内容

Glyphicons字体图标

下拉菜单

按钮组

按钮组嵌套下拉框

分裂式下拉菜单

输入框组

导航

标签页

胶囊式标签页

两端对齐的标签页

路径导航标签页

导航条

分页

进度条

`Glyphicons`字体图标