Boostrap Tutorial

libin19890520 发布于2019-08-30 12:56 / 1348人阅读

摘要：

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.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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中模态框显示在阴影之下

摘要：中模态框显示在阴影之下出现这种情况的原因我开始也搞了很久，问题出现在哪里呢有事问百度，在百度上查了一下资料，他们主要的解决办法是修改标签的属性的值，我试着改了的值属性要在设置了定位时才能用，但是没有解决这个问题，后来又仔细的查看boostrap中模态框显示在阴影之下出现这种情况的原因我开始也搞了很久，问题出现在哪里呢？有事问百度，在百度上查了一下资料，他们主要的解决办法：是修改标签的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 网格(GRID)工作原理

摘要：网格是实现响应式页面设计的利器，但至于它的工作原理，大多数时候对开发人员应该是一个黑盒。而中间的列进行偏移时，效果是将前一列与当前列一分为二。明白了网格系统的以上工作原理，我项目当中页面布局的异常都得到了合理的解释。 BOOTSTRAP CSS 网格是实现响应式页面设计的利器，但至于它的工作原理，大多数时候对开发人员应该是一个黑盒。很少有人想知道它背后是如何工作的。直到你自已设计的页面...

JowayYoung 2019-08-30 14:00 评论0 收藏0