99黄色网,美女扒了内裤让男人桶爽视频,久久国内精品视频

bootstrap布局基本標簽總結

freeflydom

2024年7月19日 16:37 本文熱度 909

文件頭：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基礎表格</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

bootstrap在reset.css文件中設置margin為0，因此其他的標簽需要重新設計margin。

1.h

<h>標簽和普通使用方法一樣。

定義了.h1~.h6六個類名，樣式和標題樣式一樣。

副標題用<small>標簽指出，必須包含在h標簽內。

<h1>Bootstrap標題一</h1>

<div class="h1">Bootstrap標題一</div>

<h1>Bootstrap標題一<small>我是副標題</small></h1>

2.p

定義<body>的字體庫、字號、行高、顏色，<p>標簽繼承這些設置，單獨設置margin-bottom為10px，使用方法同普通方法。

強調內容

增大：.lead;

加粗：<strong>; <b>（設置font-weight: bold）

斜體：<em>;<i> （設置font-style: italic）

不變：<cite>

變小：<small>,.small

強調類（顏色）

.text-muted：提示，使用淺灰色（#999）

.text-primary：主要，使用藍色（#428bca）

.text-success：成功，使用淺綠色(#3c763d)

.text-info：通知信息，使用淺藍色（#31708f）

.text-warning：警告，使用黃色（#8a6d3b）

.text-danger：危險，使用褐色（##a94442）

文本對齊

（設置text-align：center、left、right、justify）

.text-left：左對齊

.text-center：居中對齊

.text-right：右對齊

.text-justify：兩端對齊

3.列表（ul ol dl）

Bootstrap對于列表，只是在margin上做了一些調整

margin-top: 0;

margin-bottom: 10px;

去除項目符號

.list-unstyled

（padding-left: 0;

list-style: none;）

內聯列表，制作水平導航

.list-inline

代碼

<pre class=“.pre-scrollable”> 設置最大代碼區域

4.表格

千萬注意，你的<table>元素中一定不能缺少類名table

.table：基礎表格

.table-striped：斑馬線表格

.table-bordered：帶邊框的表格

.table-hover：鼠標懸停高亮的表格

.table-condensed：緊湊型表格

.table-responsive：響應式表格

<table class="table">
   <thead>
     <tr>
       <th>表格標題</th>
       <th>表格標題</th>
       <th>表格標題</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
   </tbody>
 </table>

<tr>的不同行顏色

<tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示當前活動的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正確的行為</td>
    </tr>
    <tr class="info">
      <td >.info</td>
      <td>表示中立的信息或行為</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告，需要特別注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危險或者可能是錯誤的行為</td>
    </tr>
  </tbody>

5.表單

默認垂直顯示

用<div class=“form-group”>包圍控件及其標簽

對input select textarea設置.form-control

1、寬度變成了100%

2、設置了一個淺灰色（#ccc）的邊框

3、具有4px的圓角

4、設置陰影效果，并且元素得到焦點之時，陰影和邊框效果會有所變化

5、設置了placeholder的顏色為#999

水平風格表單：標簽在左，控件在右

1、在<form>元素是使用類名“form-horizontal”。

2、配合Bootstrap框架的網格系統。（網格布局會在以后的章節中詳細講解）

內聯表單：控件一行顯示

在<form>元素中添加類名“form-inline”

表單控件

select：<select multiple class="form-control"> 選擇多個

textarea： <textarea class="form-control" rows="3"></textarea>

radio，checkbox：div包著label包著input

<div class="checkbox">
<label>
<input type="checkbox" value="">
記住密碼
</label>
</div>

radio，checkbox：水平排列

div（class=”form-group”）包著label（class=”checkbox-inline”or“radio-inline”）包著input

禁用控件：在控件上添加disabled屬性<input class="input-lg" id="disabledInput" type="text" placeholder="表單已被禁用，不可輸入" disabled>

驗證狀態：form-group容器添加has-success等類;若想label同步變色需要在label上加.control-label;顯示icon需要在form-group加.has-feedback，最后加一個span存放icon

表單提示信息：在form-group容器后加一個span，添加類名.help-block

button：四種方式，bootstrap用button實現，建議用button和a標簽來制作按鈕

button樣式

.btn

.btn-default

大?。?/p>

.btn-lg

.btn-sm

.btn-xs

塊狀按鈕：按鈕充滿整個容器，沒有padding和margin .btn-block

禁用按鈕：添加類.disabled 或者添加屬性disabled=“disabled”

網格系統

分為12列，可以嵌套

.col-md-offset-4 .col-md-4 .col-md-push-* .col-md-pull-*

<div class="container">
  <div class="row">
    <div class="col-md-8">
      我的里面嵌套了一個網格
      <div class="row">
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-6">col-md-6</div>
      </div>
    </div>
    <div class="col-md-4">col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
   
      <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
      </div>
    </div>
  </div>
</div>