首页 > 代码库 > bootstrap知识点

bootstrap知识点

响应式图像
<img src="http://www.mamicode.com/..." class="img-responsive" alt="响应式图像">

媒体查询
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }


为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本
网格布局
<div class="container">   <div class="row">      <div class="col-*-*"></div>      <div class="col-*-*"></div>         </div>   <div class="row">...</div></div><div class="container">....
列偏移
<div class="col-xs-6 col-md-offset-3" >

字体显示红色
<p class="text-warning">本行内容带有一个 warning class</p>

缩写
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
地址
<address>
  <strong>Some Company, Inc.</strong><br>  007 street<br>  Some City, State XXXXX<br>  <abbr title="Phone">P:</abbr> (123) 456-7890</address>
引用
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
 
<h4>未定义样式列表</h4><ul class="list-unstyled">
<h4>内联列表</h4><ul class="list-inline">
<h4>水平的定义列表</h4><dl class="dl-horizontal">

技术分享

  • <code> 标签。如果您想要内联显示代码,那么您应该使用 <code> 标签。
  • <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签。

技术分享

基本的表格

<table class="table">

条纹表格

<table class="table table-striped">

边框表格

<table class="table table-bordered">

悬停表格

<table class="table table-hover">

精简表格

<table class="table table-condensed">

技术分享

<tr class="success">

响应式表格

通过把任意的 .table 包在 .table-responsive class 内

表单布局

  • 向父 <form> 元素添加 role="form"
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
  • 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control
<form role="form">   <div class="form-group">      <label for="inputfile">文件输入</label>      <input type="file" id="inputfile">      <p class="help-block">这里是块级帮助文本的实例。</p>   </div>
</div>

内联表单

<form class="form-inline" role="form">
  • 默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。
  • 使用 class .sr-only,您可以隐藏内联表单的标签。
<label class="sr-only" for="inputfile">文件输入</label>

水平表单

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

  • 向父 <form> 元素添加 class .form-horizontal
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。
  • 向标签添加 class .control-label

Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select

未完待续

 

 

bootstrap知识点