bootstrap布局基本標(biāo)簽總結(jié)
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
文件頭： bootstrap在reset.css文件中設(shè)置margin為0，因此其他的標(biāo)簽需要重新設(shè)計(jì)margin。 1.h<h>標(biāo)簽和普通使用方法一樣。 定義了.h1~.h6六個(gè)類名，樣式和標(biāo)題樣式一樣。 副標(biāo)題用<small>標(biāo)簽指出，必須包含在h標(biāo)簽內(nèi)。 <h1>Bootstrap標(biāo)題一</h1> <div class="h1">Bootstrap標(biāo)題一</div> <h1>Bootstrap標(biāo)題一<small>我是副標(biāo)題</small></h1>
2.p定義<body>的字體庫(kù)、字號(hào)、行高、顏色，<p>標(biāo)簽繼承這些設(shè)置，單獨(dú)設(shè)置margin-bottom為10px，使用方法同普通方法。 強(qiáng)調(diào)內(nèi)容增大：.lead; 加粗：<strong>; <b>（設(shè)置font-weight: bold） 斜體：<em>;<i> （設(shè)置font-style: italic） 不變：<cite> 變?。?lt;small>,.small 強(qiáng)調(diào)類（顏色）.text-muted：提示，使用淺灰色（#999） .text-primary：主要，使用藍(lán)色（#428bca） .text-success：成功，使用淺綠色(#3c763d) .text-info：通知信息，使用淺藍(lán)色（#31708f） .text-warning：警告，使用黃色（#8a6d3b） .text-danger：危險(xiǎn)，使用褐色（##a94442） 文本對(duì)齊（設(shè)置text-align：center、left、right、justify） .text-left：左對(duì)齊 .text-center：居中對(duì)齊 .text-right：右對(duì)齊 .text-justify：兩端對(duì)齊
3.列表（ul ol dl）Bootstrap對(duì)于列表，只是在margin上做了一些調(diào)整 margin-top: 0; margin-bottom: 10px; 去除項(xiàng)目符號(hào).list-unstyled （padding-left: 0; list-style: none;） 內(nèi)聯(lián)列表，制作水平導(dǎo)航.list-inline 代碼<code> <pre> <kbd> <pre class=“.pre-scrollable”> 設(shè)置最大代碼區(qū)域
4.表格千萬注意，你的<table>元素中一定不能缺少類名table .table：基礎(chǔ)表格 .table-striped：斑馬線表格 .table-bordered：帶邊框的表格 .table-hover：鼠標(biāo)懸停高亮的表格 .table-condensed：緊湊型表格 .table-responsive：響應(yīng)式表格 <tr>的不同行顏色 5.表單<form role=”form”> 默認(rèn)垂直顯示用<div class=“form-group”>包圍控件及其標(biāo)簽 對(duì)input select textarea設(shè)置.form-control1、寬度變成了100% 2、設(shè)置了一個(gè)淺灰色（#ccc）的邊框 3、具有4px的圓角 4、設(shè)置陰影效果，并且元素得到焦點(diǎn)之時(shí)，陰影和邊框效果會(huì)有所變化 5、設(shè)置了placeholder的顏色為#999 水平風(fēng)格表單：標(biāo)簽在左，控件在右1、在<form>元素是使用類名“form-horizontal”。 2、配合Bootstrap框架的網(wǎng)格系統(tǒng)。（網(wǎng)格布局會(huì)在以后的章節(jié)中詳細(xì)講解） 內(nèi)聯(lián)表單 ：控件一行顯示 在<form>元素中添加類名“form-inline” 表單控件select：<select multiple class="form-control"> 選擇多個(gè) textarea： <textarea class="form-control" rows="3"></textarea> radio，checkbox：div包著label包著input 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> 驗(yàn)證狀態(tài)：form-group容器添加has-success等類;若想label同步變色需要在label上加.control-label;顯示icon需要在form-group加.has-feedback，最后加一個(gè)span存放icon 表單提示信息：在form-group容器后加一個(gè)span，添加類名.help-block button：四種方式，bootstrap用button實(shí)現(xiàn)，建議用button和a標(biāo)簽來制作按鈕 <input type="button"> <input type="reset"> <input type="submit"> <button></button> button樣式.btn .btn-default
大小： .btn-lg .btn-sm .btn-xs 塊狀按鈕：按鈕充滿整個(gè)容器，沒有padding和margin .btn-block 禁用按鈕：添加類.disabled 或者添加屬性disabled=“disabled”
網(wǎng)格系統(tǒng)分為12列，可以嵌套 .col-md-offset-4 .col-md-4 .col-md-push-* .col-md-pull-* 轉(zhuǎn)自https://www.cnblogs.com/smoothLily/p/4172724.html 作者smoothLily 該文章在 2024/7/19 16:51:23 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
