總結bootstrap前端框架的使用實例

1、bootstrap 排版

全域樣式style.css：

#1、移除body的margin宣告

2、設定body的背景色為白色

3、為排版設定了基本的字體、字號和行高

4、設定全域連結顏色，且當連結處於懸浮「:hover」狀態時才會顯示底線樣式

標題h1-h6

HTML 中的所有標題標籤，

到

皆可使用。另外，也提供了 .h1 到 .h6 類選擇器，為的是給內聯（inline）屬性的文字賦予標題的樣式。

1、重新設定了margin-top和margin-bottom的值

2、h1~h3重置後的值都是20px；h4~h6重置後的值都是10px

3、所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文字顏色和字體都繼承父元素的顏色和字體

4、固定不同等級標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px

在標題內還可以包含 標籤或賦予.small 類別的元素，可以用來標記副標題。

<h2 id="Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-Text-small">Bootstrap heading <small>Secondary Text</small></h2>

Bootstrap heading Secondary text

#p 標籤

(段落)元素還被設定底部外邊距（margin）10px。

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

透過新增 .lead 類別可以讓段落反白顯示。

<br>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturice dicce dis part . Nullam id dolor id nibh ultricies vehicula.<br>

強調內容的標籤

一般配合段落標籤使用

 

 

 

強調相關的類別

text-muted：  提示，使用浅灰色（#999）text-primary：主要，使用蓝色（#428bca）text-success：成功，使用浅绿色(#3c763d)text-info：   通知信息，使用浅蓝色（#31708f）text-warning：警告，使用黄色（#8a6d3b）text-danger： 危险，使用褐色（#a94442）

文字對齊風格

text-left：   左对齐
text-center： 居中对齐
text-right：  右对齐
text-justify：两端对齐

列表

1、ul 、 ol < ;span style="color:red;">去序列：

class=“list-unstyled“

2、ul 、 ol 水平排列 span>（把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示）

class=“list-inline”

3、dl水平列表（屏幕大於768px的時候，添加類名“.dl-horizo​​ntal 」才有水平定義清單效果）

class=“dl-horizontal”

圖片

使用方法非常簡單，只需要在

 

標籤上新增對應的類別名稱
img-responsive：響應式圖片，主要針對於響應式設計

img-rounded：   圆角图片
img-circle：    圆形图片
img-thumbnail： 缩略图片

自己動手加入並查看對應的效果吧~ ~ ~

##bootstrap圖示

#Bootstrap框架中也為大家提供了近200個不同的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。

任何行級元素都可以，通常使用span標籤做圖示容器

可登陸bootstrap網站查看;span>

用法很簡單，只需將圖示下的英文複製貼上到class裡即可：

<span class="glyphicon glyphicon-ok"></span>

#2、bootstrap-表格

##基礎實例

<table class="table"></table>

條紋狀表格

透過.table-striped 類別可以給 之內的每一行增加斑馬條紋樣式。

條紋狀表格是依賴 :nth-child CSS 選擇器實現的，而這項功能不被 Internet Explorer 8 支援。

有邊框的表格

新增 .table-bordered 類別為表格和其中的每個儲存格增加邊框。

滑鼠懸停

透過新增 .table-hover 類別可以讓 中的每一行對滑鼠懸停狀態做出回應。

緊縮表格

透過新增 .table-condensed 類別可以讓表格更緊湊，儲存格中的內補（padding）皆會減半。

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述

.active        鼠标悬停在行或单元格上时所设置的颜色.success    标识成功或积极的动作.info        标识普通的提示信息或动作.warning    标识警告或需要用户注意.danger        标识危险或潜在的带来负面影响的动作

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
      <table class="table">
     ...
      </table>
</div>

3、bootstrap表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 <input>、<textarea></textarea> 和 <select></select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列。

<form role="form">告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单</form><form role="button">告诉设备，这是个按钮，可以点击。本质上是增强语义性，增强组件的可访问性、可用性</form>

不要将表单组合输入框组混合使用，建议将输入框组嵌套到表单组中使用。

<form>
      <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
             <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
       </div>
       <div class="form-group">
             <label for="exampleInputPassword1">Password</label>
             <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
       <div class="form-group">
          <label for="exampleInputFile">File input</label>
             <input type="file" id="exampleInputFile">
           <p class="help-block">Example block-level help text here.</p>
     </div>
       <div class="checkbox">
             <label>
               <input type="checkbox"> Check me out
             </label>
      </div>
       <button type="submit" class="btn btn-default">Submit</button>
</form>

多个控件可以排列在同一行:

<form class="form-inline">
      <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      </div>
      <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
      </div>
     <button type="submit" class="btn btn-default">Send invitation</button>
</form>

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

单选和多选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

设置了disabled属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。</fieldset>

多选框：

<div class="checkbox">      <label>          <input type="checkbox" value="">
        Option one is this and that—be sure to include why it&#39;s great       </label></div>
<div class="checkbox disabled">      <label><input type="checkbox" value="" disabled>
            Option two is disabled      </label></div>

单选框：

<div class="radio">
      <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
</div>
<div class="radio disabled">
      <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
            Option three is disabled
      </label>
</div>

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

参考博文：bootstrap框架怎么用?

以上是總結bootstrap前端框架的使用實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！