首页 > 代码库 > 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知识点
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。