UI/UXのデモ用にセマンティックUIコンテンツをWebサイト（インスペクタを使用）に挿入する方法は？

FacebookやTwitterに投稿するときに特別な機能を提供するブラウザ拡張機能を構築しています。 UI/UXをデモンストレーションするために、インスペクタを使用してコンテンツを挿入して、それが作成されたように見せたいと思います。私は基本的なHTMLのためにこれを行う方法を知っていますが、セマンティックUIのようなフロントエンドのフレームワークでこれをしようとすると、動作させることができません。私はCDNのCSSとJSファイルを含んでいたので、それはうまくいくと思いましたが、そうではありません。誰もこれを行う方法を知っていますか？UI/UXのデモ用にセマンティックUIコンテンツをWebサイト（インスペクタを使用）に挿入する方法は？

私が含める例として、セマンティックUIのドロップダウンボックスhereのドキュメントを参照できます。

ありがとうございました！

出典

2017-08-09 liammccarty

のようないくつかのthignを試していない理由を、HTMLなどをデモするために探している場合、あなたはあなたの関連するコードの一部を提供することができますか？ – ihpar

エディタでページを編集する前にcss、Semantic UIなどが読み込まれていない限り、それは動作しません。インスペクタ内のCSSを追加するなど

は何もしない、CSSなどは、CSS/JSなど

を登録するには、ブラウザのためにロードする必要があるので、あなたが必要なCSSやJSファイルが最初にロードされていることを確認してください。

あなたがcodepen https://codepen.io/

出典

2017-08-09 22:48:41

問題は、私はデモがFacebook/Twitterのように見えると感じるようにしたいが、少し変更があるので、私はcodepenがそのトリックをするとは思わない。インスペクタを使用してCSS/jsを最初に読み込むことはできますか？ – liammccarty

いいえ、ページをロードして、インスペクタを介してhtml要素を追加して効果を出す必要があります。 –

UI/UXのデモ用にセマンティックUIコンテンツをWebサイト（インスペクタを使用）に挿入する方法は？

答えて

関連する問題