Boostrap Tutorial

libin19890520 發(fā)布于2019-08-30 12:56 / 1447人閱讀

摘要：

Bootstrap tutorial Download bootstrap

To get bootstrap
Use CDN which stands for const file delivery network instead of download a zip.

Container

Container is fixed length, using container-fluid to get 100% width.

Some marks

single line of code
marked words

    quote content
    quoted from who


    list title
    list description

    multiple code here.

key board

Use the correct marks to prettify your page.

Responsive table

Normal table & condensed table(smaller padding) & striped table(change color each rows). Always use thead & tbody to organize your table. Advanced classes refer to bootstrap table ####Responsive img&video ---------- Responsive image & rounded rectangle image & completely round border image. You can use one of them or all of them.

Responsive video still to be work with. ####Nav bar ---------- Always use nav mark, a nav mark contains navbar-header & navbar-nav. Use navbar-brand to place you logo or brand. #####Drop down menu on navbar Data-toggle attribute is essential. More components and advanced attributes refer to Bootstrap components/dropdowns #####Navbar toggle First in the navbar header, a button must be included.

...... Then your navbar must add some specific class names.

...... So when your screen is extra small, the navbar would not shrink but change into a button which is something like a drop down menu. This button would not be seen while you are browsing through something other than cellphone. See more at Bootstrap navbars. ####Wells & Alert Boxes ---------- A well is a single island section that has slightly border and background. Alert is pretty much the same thing, just contains more UI elements.

A simple well

An alert

×Alert something

The a mark stands for a close button for users to close this alert box. It requires 4 attributes, what these means still not known. Fade in stands for a animation for this danger box. ####Push&Pull ---------- If you want change the order bootstrap rows , use the following code.

Push means move it to the left, pull the opposite. ####Modal ---------- A single pop window. You need a button or some click able elements to control the entrance of you modal. Then you need a modal content, you can use data-dismiss to create a exit button for your modal.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115186.html

相關(guān)文章

從零開始教你用vue-cli一招引入jq和boostrap

摘要：和占了在以前的前端半壁江山如今是三分天下和有著成熟體系和架構(gòu)那我們用如何引用和呢安裝腳手架腳手架工具快速構(gòu)建項(xiàng)目架構(gòu)。。全局安裝生成項(xiàng)目名為的的項(xiàng)目模板，自定義到文件夾中打開或者命令窗口初始化安裝依賴然后輸入。。 jq和boostrap占了在以前的前端半壁江山如今是vue react augular 三分天下 jq和boostrap有著成熟體系和架構(gòu) 那我們用vue-cli如何引用...

CrazyCodes 2019-08-22 16:13 評(píng)論0 收藏0
boostrap中模態(tài)框顯示在陰影之下

摘要：中模態(tài)框顯示在陰影之下出現(xiàn)這種情況的原因我開始也搞了很久，問(wèn)題出現(xiàn)在哪里呢有事問(wèn)百度，在百度上查了一下資料，他們主要的解決辦法是修改標(biāo)簽的屬性的值，我試著改了的值屬性要在設(shè)置了定位時(shí)才能用，但是沒有解決這個(gè)問(wèn)題，后來(lái)又仔細(xì)的查看boostrap中模態(tài)框顯示在陰影之下出現(xiàn)這種情況的原因我開始也搞了很久，問(wèn)題出現(xiàn)在哪里呢？有事問(wèn)百度，在百度上查了一下資料，他們主要的解決辦法：是修改標(biāo)簽的z...

microcosm1994 2019-04-23 11:45 評(píng)論0 收藏0
boostrap3 bootstrap-datetimepicker.min.js設(shè)置中文語(yǔ)言

摘要：?jiǎn)栴}中使用遇到設(shè)置中文語(yǔ)言的問(wèn)題解決辦法在使用的時(shí)候要先引入中的默認(rèn)顯示英文想要顯示中文可以通過(guò)在下載引用來(lái)設(shè)置語(yǔ)言由于文件太大，所有選擇引入中文語(yǔ)言包地址在中找到時(shí)間控件引入中文語(yǔ)言總結(jié)省略了一些主要相關(guān)，問(wèn)題 bootstrap3中使用bootstrap-datetimepicker遇到設(shè)置中文語(yǔ)言的問(wèn)題解決辦法 bootstrap-datetimepicker在使用的時(shí)候要先...

Zack 2019-08-01 17:46 評(píng)論0 收藏0
boostrap3 bootstrap-datetimepicker.min.js設(shè)置中文語(yǔ)言

摘要：?jiǎn)栴}中使用遇到設(shè)置中文語(yǔ)言的問(wèn)題解決辦法在使用的時(shí)候要先引入中的默認(rèn)顯示英文想要顯示中文可以通過(guò)在下載引用來(lái)設(shè)置語(yǔ)言由于文件太大，所有選擇引入中文語(yǔ)言包地址在中找到時(shí)間控件引入中文語(yǔ)言總結(jié)省略了一些主要相關(guān)，問(wèn)題 bootstrap3中使用bootstrap-datetimepicker遇到設(shè)置中文語(yǔ)言的問(wèn)題解決辦法 bootstrap-datetimepicker在使用的時(shí)候要先...

zorpan 2019-08-21 16:59 評(píng)論0 收藏0
BOOSTRAP 3.0 網(wǎng)格(GRID)工作原理

摘要：網(wǎng)格是實(shí)現(xiàn)響應(yīng)式頁(yè)面設(shè)計(jì)的利器，但至于它的工作原理，大多數(shù)時(shí)候?qū)﹂_發(fā)人員應(yīng)該是一個(gè)黑盒。而中間的列進(jìn)行偏移時(shí)，效果是將前一列與當(dāng)前列一分為二。明白了網(wǎng)格系統(tǒng)的以上工作原理，我項(xiàng)目當(dāng)中頁(yè)面布局的異常都得到了合理的解釋。 BOOTSTRAP CSS 網(wǎng)格是實(shí)現(xiàn)響應(yīng)式頁(yè)面設(shè)計(jì)的利器，但至于它的工作原理，大多數(shù)時(shí)候?qū)﹂_發(fā)人員應(yīng)該是一個(gè)黑盒。很少有人想知道它背后是如何工作的。直到你自已設(shè)計(jì)的頁(yè)面...

JowayYoung 2019-08-30 14:00 評(píng)論0 收藏0