Column combination
The simple understanding of column combination is to change the number to merge the columns (principle: the total number of columns cannot exceed 12, more than 12, it will automatically switch to the next row.), somewhat similar to the colspan attribute of the table.
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
<div class="row">
<div class="col-md-2">2列</div>
<div class="col-md-10">10列</div>
</div>
</div>Column offset
If we do not want two adjacent columns to be close together, but do not want to use margin or other technical means. At this time, you can use the column offset function to achieve. Using the column offset is also very simple, just add the class name "col-md-offset-*" (where the asterisk represents the number of column combinations to be offset) on the column element, then the column with this class name will be Offset right. For example, if you add "col-md-offset-8" to the column element, it means that the column is moved to the right by the width of 8 columns (make sure that the total number of columns and offset columns does not exceed 12, otherwise the column will break|wrap display).
<div class="container">
<div class="row">
<div class="col-md-1">1列</div>
<div class="col-md-1">2列</div>
<div class="col-md-1 col-md-offset-8">11列</div>
<div class="col-md-1">12列</div>
</div>
</div>Column sort
Column sorting is actually to change the direction of the column, that is, to change the left and right floating, and set the floating distance. In the grid system of the Bootstrap framework, the class names col-md-push- and col-md-pull- are added (where the asterisk represents the number of column combinations moved). Pull forward, push backward.
<div class="container">
<div class="row">
<div class="col-md-1 col-md-push-10">1列</div>
<div class="col-md-1 col-md-pull-1">2列</div>
</div>
</div>Column nesting
The grid system of the Bootstrap framework also supports column nesting. You can add one or more row containers to a column, and then insert columns in this row container.
<div class="container">
<div class="row">
<div class="col-md-2">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-9">9</div>
<div class="col-md-3">3</div>
</div>
</div>
<div class="col-md-10">我的里面嵌套了一个网格
<div class="row">
<div class="col-md-10">10</div>
<div class="col-md-2">2</div>
</div>
</div>
</div>
</div>Common style
typesetting
title
Bootstrap is the same as a normal HTML page. The definition of the title is to use the tags from <h1> to <h6>, but Bootstrap covers its default style and uses it to display the same effect in all browsers. In order to make the non-heading elements and the heading use the same style, six class names from .h1 to .h6 are also specifically defined. At the same time, it can be followed by a line of small subtitles <small></small> or use .small
<h1>h1. Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>paragraph
Paragraph is another important element in typesetting. Use .lead to emphasize the content (its role is to increase the text size, bold the text, and also deal with the line height and margin accordingly. You can use the following tags to make the text prominent:
<small>: Small font
<b><strong>: bold
<i><em>:斜体
<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>Emphasize
Defines a set of class names, which are called emphasized class names here. These emphasized classes are emphasized by color. The instructions are as follows:
.text-muted: hint, use light gray (#999)
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>Alignment effect
In CSS, text-align is often used to set the alignment style of the text.
There are mainly four styles:
Left aligned, the value is left;
Center aligned, the value is center;
Align right, the value is right;
Justify at both ends, the value is justify.
In order to simplify the operation and facilitate the use, Bootstrap controls the text alignment style by defining four class names: .text-left: left alignment. text-center: center alignment. text-right: right alignment. text-justify: both ends Aligned.
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份</p>List
In HTML documents, there are three main list structures:
Unordered list (<ul><li>…</li></ul>)
Ordered list (<ol><li>…</li></ol>)
定义列表(<dl><dt>…</dt><dd>…</dd></dl>)
Go to point list
class="list-unstyled"
<ul class="list-unstyled">
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>Inline list
class="list-inline", replace the vertical list with a horizontal list, and remove the bullet (number) to keep the horizontal display. It can also be said that inline lists are born for making horizontal navigation.
<ul class="list-inline">
<li>首页</li>
<li>java学院</li>
<li>在线课堂</li>
</ul>Definition list
Added some styles to the original foundation, use the style class="dl-horizontal" to make a horizontal definition list: When the title width exceeds 160px, three ellipsis will be displayed.
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表是一种样式表语言</dd>
</dl>
<dl class="dl-horizontal">
<dt>HTML 超文本标记语言</dt>
<dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
<dt>测试标题不能超过160px的宽度,否则2个点</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
</dl>Code
Generally used more frequently on personal blogs to display the style of the code. There are mainly three coding styles provided in Bootstrap:
(1) Use <code></code> to display a single line of inline code
(2) Use <pre></pre> to display multiple lines of code
Style: pre-scrollable (height, max-height height is fixed, 340px, more than there is a scroll bar)
(3) Use <kbd></kbd> to display user input codes, such as shortcut keys
One-line inline code
<code>this is a simple code</code>hot key
<p>使用<kbd>ctrl+s</kbd>保存</p>Multi-line block code
<!-- 代码会保留原本的格式，包括空格和换行 -->
<pre>
public class HelloWorld {
public static void main(String[] args){
System.out.println("helloworld...");
}
}
</pre>
<!--
显示html标签的代码需要适应字符实体
小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代
-->
<pre>
<ul>
<li>测试实体符</li>
</ul>
</pre>
<!-- 当高度超过，会存在滚动条 -->
<pre class="pre-scrollable">
<ol>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
</ol>
</pre>####