Dieser Artikel bietet Ihnen eine Einführung in gängige Komponenten von BootStrap basierend auf BootStrap-Studiennotizen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie weitere Video-Tutorials zum Thema Bootstrap lernen und erhalten möchten, können Sie auch Folgendes besuchen: Bootstrap-Tutorial!
<h3>图标</h3> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span>
3. Schaltflächengröße:
<h3>按钮</h3> <button>按钮</button> <button>primary</button> <button>success</button> <button>info</button> <button>warning</button> <button>danger</button>
<h3>按钮尺寸</h3> <button>按钮</button> <button>primary</button> <button>success</button> <button>info</button>
<h3>把图标显示在按钮里</h3> <button><span></span> 按钮</button>
<p> <button> <span>菜单一</span> <span></span> </button> </p>
6. Eingabefeld:
$('.dropdown-item').click(function () { $('#dropdown-title').text($(this).text()); });
<h3>输入框</h3>
<p>
<span></span>
<input>
</p>
<p>
<span></span>
<input>
</p>
<h3>导航栏</h3>
<nav>
<p>
</p>
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
<li>
<a>Dropdown <span></span></a>
<ul>
<li><a>Action</a></li>
<li><a>Another action</a></li>
<li>
<li>Nav header</li>
<li><a>Separated link</a></li>
</ul>
</li>
</ul>
</nav>
<h3>表单</h3>
10 >
<h3>警告框</h3> <p> <button><span>×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </p> <p> <a>success!</a> </p> <p> <a>info!</a> </p> <p> <a>warning!</a> </p> <p> <a>danger!</a> </p>
<h3>进度条</h3> <p> </p><p> 70% </p>
<span>item1</span> <p>item2</p>
这是tab1
这是tab2
这是tab3
13 Ein Plug-in, das JSON-Daten über Ajax anfordern und eine Tabelle generieren kannProjektadresse: https://github.com/wenzhixin/bootstrap-table 14 . Benachrichtigungsnachrichtenkomponente Download-Adresse: https://github.com/CodeSeven/toastr 🎜>http://www.ithao123.cn/content-2414918.htmlEinführung: Suchen Sie den Build-Ordner in der heruntergeladenen Datei und führen Sie toastr in .min ein. js und toastr.cssVerwendung: Diese Eingabeaufforderung wird standardmäßig in der oberen rechten Ecke des Browsers angezeigt. Wir können sie so ändern, dass sie in der oberen Mitte angezeigt wird während der Initialisierung:$('a[data-toggle="tab"]').on('shown.bs.tab',function (e) { var activeTab = $(e.target).text(); alert(activeTab); });
toastr.options.positionClass = 'toast-top-center';//显示位置
toast-top-right toast-botton-right toash-bottom-left toast-top-left toast-top-full-width 这个是在网页顶端,宽度铺满整个屏幕 toast-bottom-full-width toast-top-center顶端中间 toast-bottom-center
toastr.success('提交数据成功'); toastr.error('Error'); toastr.warning('只能选择一行进行编辑'); toastr.info('info');
<button> 换个密码 </button>
$('.btn').on('click',function () { $.post('xxx') .done(function (result) { var json = ajaxResultShow(result); if (json.result_code == 0) $('#pwdId').text(json.data1); }) .fail(function () { }) .always(function () { }); });
<link> <link> <script></script> <script></script>
<input>
Der Status kann direkt bei der Initialisierung gesetzt werden:
$("[name='my-checkbox']").bootstrapSwitch();
Schaltstatus:
$("#isOpenCheckbox").bootstrapSwitch('state',false);
Überwachung von Schaltereignissen:
$('#isOpenCheckbox').bootstrapSwitch('toggleState');
Das obige ist der detaillierte Inhalt vonAnmerkungen zur BootStrap-Studie: Einführung in allgemeine Komponenten von BootStrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!