The front -Bootstrap

Bootstrap Introduction

Bootstrap it before jQuery, which is meant to be used to import jQuery based Bootstrap File

3.x version is recommended, do not use the latest version

Bootstrap features: only modify the style class attribute is to modify the page

Instructions:

Download: https: //v3.bootcss.com/

The second is a reference to a cdn address:

 

 

Layout container

<div class = "container"> </ div> around a fixed blank 
<div class = "container-fluid c1"> </ div> Full Screen Display

Grid System

A row says a line, this line to your default were divided into 12 parts, each one you can also be divided into 12 parts

class = div "Container">
         < div class = "Row" >   line
             < div class = "COL-md-6 c1" > </ div >   control your account how many columns of the current row
With Google browser automatically switch your phone or computer screen, just add a col-xs-6 generates the corresponding layout

Column offset

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。
例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div>

 

表格标签

<table class="table table-bordered table-hover table-striped"></table>
<tr class="active">...</tr>

 

按钮

<button class="btn btn-success">button</button>
            <button class="btn btn-info">button</button>
            <button class="btn btn-warning">button</button>
            <button class="btn btn-danger">button</button>
            <button class="btn btn-primary">button</button>
            <a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>

 

 

更多详情:https://v3.bootcss.com/

Guess you like

Origin www.cnblogs.com/zhengyuli/p/10981540.html