Boostrap Tutorial

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

摘要：

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.

GPU云服務器云服務器 boostrap Tutorial

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

轉載請注明本文地址：http://m.hztianpu.com/yun/115186.html

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

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

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

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

microcosm1994 2019-04-23 11:45 評論0 收藏0
boostrap3 bootstrap-datetimepicker.min.js設置中文語言

摘要：問題中使用遇到設置中文語言的問題解決辦法在使用的時候要先引入中的默認顯示英文想要顯示中文可以通過在下載引用來設置語言由于文件太大，所有選擇引入中文語言包地址在中找到時間控件引入中文語言總結省略了一些主要相關，問題 bootstrap3中使用bootstrap-datetimepicker遇到設置中文語言的問題解決辦法 bootstrap-datetimepicker在使用的時候要先...

Zack 2019-08-01 17:46 評論0 收藏0
boostrap3 bootstrap-datetimepicker.min.js設置中文語言

摘要：問題中使用遇到設置中文語言的問題解決辦法在使用的時候要先引入中的默認顯示英文想要顯示中文可以通過在下載引用來設置語言由于文件太大，所有選擇引入中文語言包地址在中找到時間控件引入中文語言總結省略了一些主要相關，問題 bootstrap3中使用bootstrap-datetimepicker遇到設置中文語言的問題解決辦法 bootstrap-datetimepicker在使用的時候要先...

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

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

JowayYoung 2019-08-30 14:00 評論0 收藏0