Bootstrap笔记合集

一、

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

☑ .text-left：左对齐

☑ .text-center：居中对齐

☑ .text-right：右对齐

☑ .text-justify：两端对齐

用法：

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

二、水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。类似于ul li 中的float！

三、在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容

注意：不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。

code风格

<div>Bootstrap的代码风格有三种：

  <code>&lt;code&gt;</code>

  <code>&lt;pre&gt;</code>

  <code>&lt;kbd&gt;</code>

</div>



pre风格

<div>

<pre>

&lt;ul&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;/ul&gt;

</pre>

</div>

kbd风格

<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

四、正如前面所示，<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。
Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

五、bootstrap中的表格样式

☑ .table：基础表格

☑ .table-striped：斑马线表格

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

响应式表格：随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。在响应式表格中一定要在外层加一个div容器来包裹住内部的表格，用来实现响应式。所有表格示例如下：

附上代码：

<!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>

五、Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

慕课网链接：http://www.imooc.com/code/2294

六、Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）

在<form>元素上使用类名“form-horizontal”主要有以下几个作用：
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式，类似于网格系统的“row”。

代码如下：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>水平表单</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<form class="form-horizontal" role="form">

<div class="form-group">

<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

<div class="col-sm-10">

<input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">

</div>

</div>

<div class="form-group">

<label for="inputPassword3" class="col-sm-2 control-label">密码</label>

<div class="col-sm-10">

<input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<div class="checkbox">

<label>

<input type="checkbox"> 记住密码

</label>

</div>

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<button type="submit" class="btn btn-default">进入邮箱</button>

</div>

</div>

</form>

</body>

</html>

七、

表单控件(复选框checkbox和单选择按钮radio)

<form role="form">

<div class="checkbox">

<label>

<input type="checkbox" value="">

记住密码

</label>

</div>

<div class="radio">

<label>

<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>

喜欢

</label>

</div>

<div class="radio">

<label>

<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">

不喜欢

</label>

</div>

</form>

八、

<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>

九、

<form role="form">

<div class="form-group has-success">

  <label class="control-label" for="inputSuccess1">成功状态</label>

  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >

</div>

<div class="form-group has-warning">

  <label class="control-label" for="inputWarning1">警告状态</label>

  <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">

</div>

<div class="form-group has-error">

  <label class="control-label" for="inputError1">错误状态</label>

  <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

</div>

</form>

十、按钮代码：

<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>

十一、一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。同样，
在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，
唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

<button class="btn btn-default" type="button">button标签按钮</button>

<input type="submit" class="btn btn-default" value="input标签按钮"/>

<a href="##" class="btn btn-default">a标签按钮</a>

<span class="btn btn-default">span标签按钮</span>

<div class="btn btn-default">div标签按钮</div>

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>

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

<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

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

十二、Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。

十三、

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

使用方法：

使用方法非常简单，只需要在<img>标签上添加对应的类名，如下代码：

<img  alt="140x140" src="http://placehold.it/140x140">

<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">

<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">

<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">

<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>

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

<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>

<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

二十四、

200个icon：

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

二十五、bootstrap导航栏的内容

<!-- 按照顺序对应上面的图依次排列下来的代码 -->
<!-- 基础导航 通过加上nav-tabs -->

<ul class="nav nav-tabs">

    <li><a href="##">Home</a></li>

  <li><a href="##">CSS3</a></li>

  <li><a href="##">Sass</a></li>

  <li><a href="##">jQuery</a></li>

  <li><a href="##">Responsive</a></li>

</ul>

<!-- 自适应导航 -->

<ul class="nav nav-tabs nav-justified">

     <li class="active"><a href="##">Home</a></li>

     <li><a href="##">CSS3</a></li>

     <li><a href="##">Sass</a></li>

     <li><a href="##">jQuery</a></li>

     <li><a href="##">Responsive</a></li>

</ul>

<br/>

<!-- 嵌套的导航栏 -->

<ul class="nav nav-pills">

     <li class="active"><a href="##">首页</a></li>

     <li class="dropdown">

        <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>

        <ul class="dropdown-menu">

            <li><a href="##">CSS3</a></li>

            …

       </ul>

     </li>

     <li><a href="##">关于我们</a></li>

</ul>

<!-- 多级导航 如果需要置顶到顶部就是要在第一个dic里面的class中加入 navbar-fixed-top -->

<div class="navbar ">

<div class="navbar-inner">

<div class="container-fluid">

<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</a>

<a href="#" class="brand">Project name</a>

<div class="nav-collapse">

<ul class="nav">

<li class="active">

<a href="#">Home</a>

</li>

<li>

<a href="#">Link</a>

</li>

<li>

<a href="#">Link</a>

</li>

<li>

<a href="#">Link</a>

</li>

<li class="dropdown">

<a data-toggle="dropdown" class="dropdown-toggle" href="#">

Dropdown

<b class="caret"></b>

</a>

<ul class="dropdown-menu">

<li class="dropdown-submenu">

<a href="#">More options</a>

<ul class="dropdown-menu">

<li>

<a href="#">Second level link</a>

</li>

<li>

<a href="#">Second level link</a>

</li>

<li>

<a href="#">Second level link</a>

</li>

<li>

<a href="#">Second level link</a>

</li>

<li class="dropdown-submenu">

<a href="#">Second level link</a>

<ul class="dropdown-menu">

<li>

<a href="#">3333333333</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">Another action</a>

</li>

<li>

<a href="#">Something else here</a>

</li>

<li class="divider"></li>

<li class="nav-header">Nav header</li>

<li>

<a href="#">Separated link</a>

</li>

<li>

<a href="#">One more separated link</a>

</li>

</ul>

</li>

</ul>

<form action="" class="navbar-search pull-left">

<input type="text" placeholder="Search" class="search-query span2">

</form>

<ul class="nav pull-right">

<li>

<a href="#">Link</a>

</li>

<li class="divider-vertical"></li>

<li class="dropdown">

<a class="#" href="#">Menu</a>

</li>

</ul>

</div><!-- /.nav-collapse -->

</div>

</div>

</div>

<hr />

<ul class="nav nav-pills">

<li class="active">

<a href="#">Regular link</a>

</li>

<li class="dropdown">

<a href="#" data-toggle="dropdown" class="dropdown-toggle">

Dropdown

<b class="caret"></b>

</a>

<ul class="dropdown-menu" id="menu1">

<li class="dropdown-submenu">

<a href="#">More options</a>

<ul class="dropdown-menu">

<li>

<a href="#">Second level link</a>

</li>

<li>

<a href="#">Second level link</a>

</li>

<li>

<a href="#">Second level link</a>

</li>

<li>

<a href="#">Second level link</a>

</li>

<li>

<a href="#">Second level link</a>

</li>

</ul>

</li>

<li>

<a href="#">Another action</a>

</li>

<li>

<a href="#">Something else here</a>

</li>

<li class="divider"></li>

<li>

<a href="#">Separated link</a>

</li>

</ul>

</li>

<li class="dropdown">

<a href="#">Menu</a>

</li>

<li class="dropdown">

<a href="#">Menu</a>

</li>

</ul>

Bootstrap笔记合集的更多相关文章

SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕笔记http://www.cnbl ...
OI知识点|NOIP考点|省选考点|教程与学习笔记合集
点亮技能树行动-- 本篇blog按照分类将网上写的OI知识点归纳了一下,然后会附上蒟蒻我的学习笔记或者是我认为写的不错的专题博客qwqwqwq(好吧,其实已经咕咕咕了...) 基础算法贪心枚举分 ...
puppeteer学习笔记合集
官方英文版API入口(如果你英文好的话):https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md. 汉化版API入口(网上有 ...
【福利】离散&C++&硬件一笔记合集
离散 C++ 硬件
HCNP学习笔记之史上最全华为路由器交换机配置命令大合集
先来一张思科和华为命令的对照表: 史上最全华为路由器交换机配置命令大合集,熟练掌握下面的华为路由器交换机配置知识点,你只需花几分钟的时间就能明白华为路由器交换机配置.交换机的配置命令等等. 华为路由器 ...
Javascript 语言精粹代码片段合集
Javascript 语言精粹代码片段合集标签:Douglas-Crockford Javascript 最佳实践原文链接更好的阅读体验使用一个method 方法定义新方法 Function ...
从零开始学数据分析，什么程度可以找到工作？（内附20G、5000分钟数据分析工具教程大合集）
从零开始学数据分析,什么程度可以找到工作?( 内附20G.5000分钟数据分析工具教程大合集 ) 我现在在Coursera上面学data science 中的R programming,过去很少接 ...
【转】Ubuntu常用软件合集
[转]Ubuntu常用软件合集 Ubuntu常用软件合集我用的使Ubuntu-Kylin14.04,原因呢主要是觉得使本土化的,自带了日历.输入法.优客助手等易于上手的应用.也省的每次安装完原生的系 ...
不容错过的UI设计素材大合集
免费PSD素材 TETHR by InVision 这是出自InVision的8款PSD文件,其中包含了100个模板和超过500个UI控件.来自InVision和UI8的设计师一同协作完成了这套UI ...

随机推荐

在 ASP.NET Core 中执行租户服务
在 ASP.NET Core 中执行租户服务不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址本博文翻译自: http://gunna ...
[Caffe]史上最全的caffe安装过程
Linux下的GPU版Caffe安装方法系统环境:Ubuntu 14.04LTS + NV TitanX 1.1 (可选)显卡驱动的安装(有风险) 如果需要重装,需要先卸载已有版本 sudo apt ...
[2012-05-31]awk去重复项
参考http://bbs.chinaunix.net/thread-2309494-1-1.html 10.awk '! a[$0]++' 怎么理解? 这是一个非常经典的去重复项的awk语句,虽然短小 ...
Extjs:添加查看全部按钮
var grid =new Ext.grid.GridPanel({ renderTo:'tsllb', title:'产品成本列表', selModel:csm, height:350, colum ...
Myeclipse去掉恶心的弹框
错误提示: 解决方法: 把JavaScript Validator去掉.去掉的方法是:选择一个项目—-右键Properties—-Builders(排第二)—-点一下右侧会有四项—-取消第一项“Jav ...
border-radius值的解析
border-radius: none | length{1,4} / length{1,4} 其中每一个值可以为数值或百分比的形式. length/length 第一个lenght表示水平方向的半 ...
WAF防火墙介绍
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt187 在互联网应用高速发展的同时,承载Web信息系统的Web服务器也面临着巨 ...
Mysql分区表使用的一些限制和需要注意的地方
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt347 mysql分区策略都基于两个非常重要的假设:查询都能够过滤(prunn ...
CDN架构以及原理分析
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp61 在不同地域的用户访问网站的响应速度存在差异,为了提高用户访问的响应 ...
vim文本基础
p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; f ...

Bootstrap笔记合集

表单控件(复选框checkbox和单选择按钮radio)

Bootstrap笔记合集的更多相关文章

随机推荐

热门专题