Borang Bootstrap yang anda mesti pelajari setiap hari kemahiran javascript-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Borang Bootstrap yang anda mesti pelajari setiap hari kemahiran javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:30 PM

bootstrap bentuk

Artikel ini menerangkan borang ini sebenarnya tidak asing bagi mereka yang pernah membuat tapak web, dan ia boleh dikatakan sebagai borang Borang yang paling biasa digunakan untuk menyerahkan data. Artikel ini menerangkan kandungan:

1. Kes asas
2. Borang sebaris
3. Borang yang disusun secara mendatar
4. Kawalan yang disokong
5. Kawalan statik
6. Status kawalan
7. Saiz kawalan
8. Teks bantuan

Kes asas
Kawalan borang individu akan diberikan secara automatik beberapa gaya global. Semua elemen , dan <pilih> Membungkus label dan kawalan yang dinyatakan sebelum ini dalam .form-group boleh memberikan susunan terbaik. <br> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter 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> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p style="text-align: center"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123115326120.png?20151023115335" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /></p> <p>Lebar kedua-dua kotak teks sememangnya 100%. Dan terdapat tiga kumpulan bentuk. <br /> <strong>Borang sebaris</strong><br /> Tetapkan .form-inline untuk kawalan aras sejajar kiri dan sebaris untuk menyusunnya dengan lebih padat. <br /> <strong><span style="color: #808080">Perlu menetapkan lebar: Dalam Bootstrap, input, pilih dan kawasan teks ditetapkan kepada lebar 100% secara lalai. Untuk menggunakan borang sebaris, anda perlu menetapkan lebar khusus untuk kawalan borang yang anda gunakan. <br /> </span></strong></p> <p><strong><span style="color: #808080"> Pastikan anda menetapkan label: Jika anda tidak menetapkan label untuk setiap kawalan input, pembaca skrin tidak akan dapat membacanya dengan betul. Untuk borang sebaris ini, anda boleh menyembunyikannya dengan menetapkan .sr-sahaja untuk label. </span></strong><br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p style="text-align: center"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123115429540.png?20151023115436" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /></p> <p><strong>Borang tersusun mendatar</strong><br /> Dengan menambahkan .form-horizontal pada borang dan menggunakan kelas grid pratetap Bootstrap, label dan kumpulan kawalan boleh dibentangkan secara mendatar bersebelahan. Melakukannya akan mengubah gelagat .form-group supaya ia berkelakuan seperti baris dalam sistem grid, jadi tidak perlu menggunakan .row lagi. <br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p style="text-align: center"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123115509519.png?20151023115517" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /></p> <p><strong>Kawalan yang disokong</strong><br /> Kawalan borang standard yang disokong ditunjukkan dalam kes susun atur borang. <br /> <span style="color: #800000"><strong>Input</strong></span><br /> Kebanyakan kawalan borang dan kawalan medan input teks. Termasuk semua jenis yang disokong oleh HTML5: <span style="color: #800000">teks, kata laluan, tarikh, tarikh-tempatan, tarikh, bulan, masa, minggu, nombor, e-mel, url, carian, tel<span style="color: #000000"> dan </span>warna. <br /> </span>Nota: Hanya kawalan input dengan jenis set yang betul boleh diberikan gaya yang betul. <br /> Contoh kotak teks<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="94121" class="copybut" id="copybut94121" onclick="doCopy('code94121')"><U>Salin kod</U></a></span> Kod adalah seperti berikut:</div><div class="codebody" id="code94121"><input type="text" class="form-control" pemegang tempat=" Input teks"></div></p> <p style="text-align: center"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123115647852.png?20151023115654" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /></p> <p><span style="color: #3366ff"><strong>Textarea</strong></span><br /> Kawalan borang yang menyokong teks berbilang baris. Atribut baris boleh ditukar mengikut keperluan. </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <h1>textarea</h1> <textarea class="form-control" rows="3"></textarea> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p style="text-align: center"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123115709715.png?20151023115717" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /></p> <p><span style="color: #3366ff"><strong>Kotak semak dan radio</strong></span><br /> Kotak semak digunakan untuk memilih satu atau lebih pilihan dalam senarai, manakala radio digunakan untuk memilih hanya satu pilihan daripada berbilang pilihan. <br /> Penampilan lalai (disusun bersama) </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <div class="checkbox"> <label> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </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> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p style="text-align: center"><span style="color: #3366ff"><strong><span id="1448251122076S" style="display: none"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123115826545.png?20151023115833" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /> </span></strong></span></p> <p><span style="color: #3366ff"><strong>Kotak semak sebaris</strong></span></p> <p>Dengan menggunakan .checkbox-inline atau .radio-inline pada satu siri kotak pilihan atau kawalan radio, anda boleh mengatur kawalan ini dalam satu baris. <br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p style="text-align: center"> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123115906984.png?20151023115913" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /></p> <p> 同理Radio是一样的，只需要添加一下样式即可。<br /> <span style="color: #3366ff"><strong>Select</strong></span><br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p style="text-align: center"><strong><span id="1448251197723S" style="display: none"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123115943836.png?20151023115951" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /> </span></strong></p> <p><strong>静态控件</strong><br /> 在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为<p>元素添加.form-control-static即可。<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </form> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p style="text-align: center"><strong><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123120025007.png?2015102312032" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /></strong></p> <p><strong>控件状态</strong><br /> 　　通过为控件和label设置一些基本状态，可以为用户提供回馈。<br /> 　　<span style="color: #800000"><strong>输入焦点<br /> </strong></span>　　我们移除了某些表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式。<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="85835" class="copybut" id="copybut85835" onclick="doCopy('code85835')"><U>复制代码</U></a></span> 代码如下:</div><div class="codebody" id="code85835"><input class="form-control" id="focusedInput" type="text" value="This is focused..."></div></p> <p>　　<span style="color: #800000"><strong>被禁用的输入框<br /> </strong></span> 　　为输入框设置disabled属性可以防止用户输入，并能改变一点外观，使其更直观。<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="63809" class="copybut" id="copybut63809" onclick="doCopy('code63809')"><U>复制代码</U></a></span> 代码如下:</div><div class="codebody" id="code63809"><input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled></div></p> <p>　　<span style="color: #800000"><strong>被禁用的fieldset<br /> </strong></span>　　为<fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。<br /> <a>标签的链接功能不受影响</p> <p><span style="color: #808080"><strong>这个class只改变<a class="btn btn-default">按钮的外观，并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。<br /> </strong></span></p> <p><span style="color: #808080"><strong>跨浏览器兼容性</strong></span></p> <p><span style="color: #808080"><strong>虽然Bootstrap会将这些样式应用到所有浏览器上，Internet Explorer 9及以下浏览器中的<fieldset>并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset<br /> </strong></span></p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <form role="form"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">Disabled input</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div> <div class="form-group"> <label for="disabledSelect">Disabled select menu</label> <select id="disabledSelect" class="form-control"> <option>Disabled select</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </fieldset> </form> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p style="text-align: center"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123120226143.png?2015102312233" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /></p> <p>　　可将鼠标移到各个控件上进行查看效果。<br /> <span style="color: #3366ff"><strong>校验状态</strong></span><br /> Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <input type="text" class="form-control" id="inputSuccess"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <input type="text" class="form-control" id="inputWarning"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input with error</label> <input type="text" class="form-control" id="inputError"> </div> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p style="text-align: center"><strong><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123120324131.png?2015102312333" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /></strong></p> <p><strong>控件尺寸<br /> </strong>通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。<br /> <span style="color: #800000"><strong>高度尺寸</strong></span><br /> 创建大一些或小一些的表单控件以匹配按钮尺寸。<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> <select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201511/20151123120521884.png?2015102312529" class="lazy" id="theimg" alt="" onclick="window.open(this.src)" /><span style="max-width:90%"><strong><span id="1448251538119S" style="display: none"> </span></strong></span></p> <p><span style="color: #800000"><strong>调整列尺寸<br /> </strong></span>用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <div class="row"> <div class="col-xs-2"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder=".col-xs-3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div> </pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p><strong>Teks bantuan<br> </strong> Teks bantuan peringkat blok untuk kawalan borang. <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="3330" class="copybut" id="copybut3330" onclick="doCopy('code3330')"><u>Salin kod</u></a></span> Kod tersebut adalah seperti berikut:</div> <div class="codebody" id="code3330"><span class="help-block">Miliki secara eksklusif atau lebih banyak baris teks bantuan peringkat blok. </span></div> <br> Artikel ini menerangkan terutamanya kawalan gaya pelbagai kawalan dalam bentuk, termasuk penggunaan gaya butang yang mudah Artikel seterusnya akan memberi tumpuan kepada menerangkan gaya butang. <p>Untuk butiran, sila rujuk: </p> <p><a target="_blank" href="http://www.jb51.net/article/75326.htm"><strong>Analisis menyeluruh tentang cara menggunakan borang Bootstrap (gaya borang) </strong></a></p> <p><a target="_blank" href="http://www.jb51.net/article/75328.htm"><strong>Analisis menyeluruh tentang cara menggunakan borang Bootstrap (kawalan borang) </strong></a></p> <p><a target="_blank" href="http://www.jb51.net/article/75332.htm"><strong>Analisis menyeluruh tentang cara menggunakan borang Bootstrap (status kawalan borang) </strong></a></p> <p><a target="_blank" href="http://www.jb51.net/article/75333.htm"><strong>Analisis menyeluruh tentang cara menggunakan borang Bootstrap (butang borang) </strong></a></p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Kenyataan Laman Web ini</div> <div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat AI Hot</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Gambar buka pakaian secara percuma</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>Penyingkiran pakaian AI</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Artikel Panas</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796785841.html" title="Assassin's Creed Shadows: Penyelesaian Riddle Seashell" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Penyelesaian Riddle Seashell</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796789525.html" title="Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini" class="phpgenera_Details_mainR4_bottom_title">Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796785857.html" title="Di mana untuk mencari kad kunci kawalan kren di atomfall" class="phpgenera_Details_mainR4_bottom_title">Di mana untuk mencari kad kunci kawalan kren di atomfall</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796783009.html" title="Assassin's Creed Shadows - Cara Mencari Orang Panda" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows - Cara Mencari Orang Panda</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 bulan yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796784440.html" title="<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran" class="phpgenera_Details_mainR4_bottom_title"><🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat panas</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Editor kod yang mudah digunakan dan percuma</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Cina</h3> </a> <p>Versi Cina, sangat mudah digunakan</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Hantar Studio 13.0.1</h3> </a> <p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Alat pembangunan web visual</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Mac</h3> </a> <p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Topik panas</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7625</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1389</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/steamdzhmcssmgs" title="Apakah format nama akaun stim" class="phpgenera_Details_mainR4_bottom_title">Apakah format nama akaun stim</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>89</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/winactivationkeyper" title="kunci pengaktifan win11 kekal" class="phpgenera_Details_mainR4_bottom_title">kunci pengaktifan win11 kekal</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>70</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/newyorktimesdailybrief" title="Sambungan NYT menunjukkan dan jawapan" class="phpgenera_Details_mainR4_bottom_title">Sambungan NYT menunjukkan dan jawapan</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>31</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>138</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/faq/zt">Tunjukkan Lagi</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796792280.html" title="Cara mendapatkan bar carian bootstrap" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/16/2024051623511862234.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara mendapatkan bar carian bootstrap" /> </a> <a href="https://www.php.cn/ms/faq/1796792280.html" title="Cara mendapatkan bar carian bootstrap" class="phphistorical_Version2_mids_title">Cara mendapatkan bar carian bootstrap</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:33 PM</span> <p class="Articlelist_txts_p">Cara menggunakan Bootstrap untuk mendapatkan nilai bar carian: Menentukan ID atau nama bar carian. Gunakan JavaScript untuk mendapatkan elemen DOM. Mendapat nilai elemen. Lakukan tindakan yang diperlukan.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796792401.html" title="Cara menggunakan bootstrap di vue" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202406/12/2024061219422252334.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara menggunakan bootstrap di vue" /> </a> <a href="https://www.php.cn/ms/faq/1796792401.html" title="Cara menggunakan bootstrap di vue" class="phphistorical_Version2_mids_title">Cara menggunakan bootstrap di vue</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 11:33 PM</span> <p class="Articlelist_txts_p">Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796792276.html" title="Cara melakukan pusat menegak bootstrap" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/17/2024051700122087120.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara melakukan pusat menegak bootstrap" /> </a> <a href="https://www.php.cn/ms/faq/1796792276.html" title="Cara melakukan pusat menegak bootstrap" class="phphistorical_Version2_mids_title">Cara melakukan pusat menegak bootstrap</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:21 PM</span> <p class="Articlelist_txts_p">Gunakan Bootstrap untuk melaksanakan pusat menegak: Kaedah Flexbox: Gunakan kelas D-Flex, Justify-Content, dan Align-Item-Center untuk meletakkan unsur-unsur dalam bekas Flexbox. Kaedah Kelas Align-Items-Center: Bagi pelayar yang tidak menyokong Flexbox, gunakan kelas Align-Items-Center, dengan syarat unsur induk mempunyai ketinggian yang ditetapkan.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796792273.html" title="Cara Menulis Garis Pecah Di Bootstrap" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/17/2024051700241717543.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara Menulis Garis Pecah Di Bootstrap" /> </a> <a href="https://www.php.cn/ms/faq/1796792273.html" title="Cara Menulis Garis Pecah Di Bootstrap" class="phphistorical_Version2_mids_title">Cara Menulis Garis Pecah Di Bootstrap</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:12 PM</span> <p class="Articlelist_txts_p">Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796792272.html" title="Cara menggunakan butang bootstrap" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/17/2024051700272480590.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara menggunakan butang bootstrap" /> </a> <a href="https://www.php.cn/ms/faq/1796792272.html" title="Cara menggunakan butang bootstrap" class="phphistorical_Version2_mids_title">Cara menggunakan butang bootstrap</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:09 PM</span> <p class="Articlelist_txts_p">Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796792275.html" title="Cara mengubah saiz bootstrap" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/17/2024051700152735909.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara mengubah saiz bootstrap" /> </a> <a href="https://www.php.cn/ms/faq/1796792275.html" title="Cara mengubah saiz bootstrap" class="phphistorical_Version2_mids_title">Cara mengubah saiz bootstrap</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:18 PM</span> <p class="Articlelist_txts_p">Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796792278.html" title="Cara Menyiapkan Kerangka untuk Bootstrap" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/17/2024051700032351186.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara Menyiapkan Kerangka untuk Bootstrap" /> </a> <a href="https://www.php.cn/ms/faq/1796792278.html" title="Cara Menyiapkan Kerangka untuk Bootstrap" class="phphistorical_Version2_mids_title">Cara Menyiapkan Kerangka untuk Bootstrap</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:27 PM</span> <p class="Articlelist_txts_p">Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796792279.html" title="Cara memasukkan gambar di bootstrap" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/16/2024051623543343733.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara memasukkan gambar di bootstrap" /> </a> <a href="https://www.php.cn/ms/faq/1796792279.html" title="Cara memasukkan gambar di bootstrap" class="phphistorical_Version2_mids_title">Cara memasukkan gambar di bootstrap</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:30 PM</span> <p class="Articlelist_txts_p">Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.</p> </div> </div> <a href="https://www.php.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ms/about/us.html">Tentang kita</a> <a href="https://www.php.cn/ms/about/disclaimer.html">Penafian</a> <a href="https://www.php.cn/ms/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1745244331"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>